Custom:button-card - Icon und Img-Cell Verhalten bei Light und Dark Theme

Dashboard/Cards/Frontend
1

Hallo zusammen,

versuche derzeit die Farben einer custom:button-card so hinzubekommen, so dass sie sichwie bei einer Tile-Card verhalten. Die Tile Card kann ich nicht nutzen, da ich mir eine Room-Card bauen möchte auf der zusätzlich Temperatur und Luftfeuchte angezeigt werden.

Die Tile Card verhält sich wie folgt:

Lampe eingeschaltet:

Light Theme:

image
Dark Theme:

image

Lampe ausgeschaltet:

Light Theme:

image

Dark Theme:

image

Nun soll die custom:button_card sich bei Icon und Img_Cell genau so verhalten. Leider habe ich das bis jetzt über styles nicht hinbekommen. Meiner Meinung nach müsste es über die Formatierung unter state gehen. Allerdings finde ich anscheinend nicht die korrekten Farben wie Bspw:

var(--color-background-yellow)

die im Theme hinterlegt sind.

Habe es schon mit:

var(--state-switch-switch-on-color)
var(--state-switch-on-color)
var(--state-switch-active-color)
var(--state-active-color)

bzw.

var(--state-switch-switch-off-color)
var(--state-switch-off-color)
var(--state-switch-inactive-color)
var(--state-inactive-color)

versucht, da ich diese mittels Chrome mit “Untersuchen” im ha-card Container der Tile-Card gefunden hatte. Leider ohne Erfolg.

In den “regulären” Styles habe ich bewusst keine Farben definiert, damit die des Themes genutzt werden.

Derzeit sieht mein Code für den State Bereich wie folgt aus:

state:
  - value: "off"
    styles:
      img_cell:
        - background-color: rgba(var(--color-background-yellow), 0.2)
      icon:
        - filter: opacity(20%)
        - color: rgba(var(--color-yellow), 1)
  - value: "on"
    styles:
      img_cell:
        - background-color: rgba(var(--color-background-yellow), 0.3)

Hiermit siehts es im Dark-Theme schon sehr ähnlich aus, aber im Light-Theme passt es so überhaupt nicht.

KI (ChatGpt, Gemini) hauen leider nur “Müll” raus … :rofl:

Hat jemand einen Tip ?

2

Spiele mal damit herum

styles:
  icon:
    - color: >
        [[[ return entity.state === 'on' ? 'rgba(254, 205, 60, 1)' : 'rgba(158, 158,
        158, 1)'; ]]]
3

Hey … Vielen Dank für die Antwort das Ganze haut mit folgendem Code für Icon und Img_Cell wie folgt hin:

 img_cell:
   - background: >
       [[[ return entity.state === 'on' ? 'rgba(254, 205, 60, 0.2)' :
       'rgba(158, 158, 158, 0.2)'; ]]]
 icon:
   - color: >
       [[[ return entity.state === 'on' ? 'rgba(254, 205, 60, 1)' : 'rgba(158,
       158, 158, 1)'; ]]]

Also Quasi bei der img_cell das gleiche, nur über background und dann die opacity (4. Wert) auf 0.2.

Cool ! … Vielen Dank :slight_smile:

1 „Gefällt mir“
4

Sorry, konnte nicht eher schreiben, sonst hätte ich schon eher meinen Senf dazu beigetragen. :sweat_smile:

Ich mache das bei mir wie folgt, ist sehr nah an dem nativen Verhalten der Home Assistant Standardkarten. Bei farbigen Lichtern, oder Lichtern die unterschiedliche Farbtemperaturen haben können, wird auch die Lichtfarbe / Temperaturfarbe angezeigt, ansonsten das Standard gelb/amber.

        img_cell:
          - background: |
              [[[
                if (entity.state === 'on') {
                  // RGB-Farbe verwenden
                  if (entity.attributes.rgb_color) {
                    const rgb = entity.attributes.rgb_color;
                    return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${0.2})`;
                  }
                  // Wenn kein colormode, typische Lichtfarbe
                  return 'rgba(255,193,7,0.2)';
                } else {
                  return 'rgba(158,158,158,0.2)';
                }
              ]]]
        icon:
          - color: |
              [[[
                if (entity.state === 'on') {
                  // RGB-Farbe verwenden
                  if (entity.attributes.rgb_color) {
                    const rgb = entity.attributes.rgb_color;
                    return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${1})`;
                  }
                  // Wenn kein colormode, typische Lichtfarbe
                  return 'rgba(255,193,7,1)';
                } else {
                  return 'rgba(158,158,158,1)';
                }
              ]]]