Farbe von Rollladen-Anzeige in Abhängigkeit vom Fensterstatus einfärben

Dashboard/Cards/Frontend
1

Hallo,

aktuell wird die Position und die Tasten meiner Rollläden wie folgt angezeigt:

type: tile
entity: cover.rollladen_kuche
color: primary
vertical: false
features:
  - type: cover-position
features_position: bottom

Die Standardfarbe (primary) ist hellblau. Dies ist bei geschlossenem Fenster auch ok. Nun möchte ich aber das Ganze in rot anzeigen lassen, wenn das entsprechende Dachfenster geöffnet ist.
Wer kann helfen. Ich habe zwar gelesen, dass dies mit card_mod gehen sollte, habe aber nicht verstanden wie.

Viele Grüße
Jürgen

2

Moin Jürgen,

Du kannst dich an meinem Code orientieren. Ich ändere das Icon damit und dann noch die Farbe. Grün ist geschlossen, gelb ist gekippt und rot ist offen. Vom Prinzip her funktioniert das folgendermaßen:

Wenn offen => rot,
Wenn gekippt => gelb,
Sonst grün.

type: custom:button-card
entity: sensor.heizungsraum_fenster_zustand
name: Heizungsraum
show_state: true
variables:
  s: '[[[ return entity.state ]]]'
icon: |
  [[[
    return variables.s === "unavailable"
      ? "mdi:close-circle"
      : ["offen","gekippt"].includes(variables.s)
        ? "mdi:window-open-variant"
        : "mdi:window-closed-variant";
  ]]]
styles:
  card:
    - background-color: |
        [[[
          return variables.s === "unavailable" || variables.s === "offen"
            ? "lightcoral"
            : variables.s === "gekippt"
              ? "yellow"
              : "lightgreen";
        ]]]
    - font-size: 12px
    - color: black
  name:
    - font-size: 12px
    - color: black
  state:
    - font-size: 12px
    - color: black
tap_action:
  action: more-info

Mfg

3

Damit änderst du das Icon des Fensters. Wenn ich die Frage richtig verstanden habe, möchte er das Icon des Rolladens in Abhängigkeit vom Fensterzustand ändern.

4

Ja stimmt. War die einfachere Variante um einen farbigen Unterschied je nach Zustand zu erzeugen.

5

Könnte da nicht mit Card Mod Studio gehen in Verbindung mit Card Mod?

6

Die Farbe des Icon kann ich nun über den Zustand des Fensters anpassen.

type: tile
entity: cover.rollladen_buro
color: primary
vertical: false
features:
  - type: cover-position
features_position: bottom
uix:
  style: |-
    ha-state-icon {
      color: {{ 'var(--red-color)' if is_state(config.entity, 'on') else 'var(--blue-color)' }} !important;
    }

Ich möchte aber auch den Slider farblich ändern. Aktuell ist er über “color: primary” fix definiert.

Wer hat hierzu noch eine Idee?

Screenshot 2026-09-26 153815
Screenshot 2026-09-26 153815266×167 7 KB

7

Sas Geht mir card mod Studio soweit ich weiss. Da gibt’s auch Videos zu..Ganz cool d7e Integration..Ohne das man CSS können muss

8

Ich habe es damitversucht, aber nicht hinbekommen. Hast Du den Link zum Video?

9

Schau mal hier

10

das geht auch über uix

Ich würds etwa so probieren, wobei ich nicht verstehe, warum du in deinem Code config.entity hast. Damit kommst Du doch nur auf den Zustand deines Rollos, nicht auf den Fenster Status

uix:
  style:
    .: |
      ha-state-icon {
        color: {{ 'var(--red-color)' if is_state(config.entity, 'on') else 'var(--blue-color)' }} !important;
      }
    hui-card-features $:
      hui-card-feature $:
        hui-cover-position-card-feature $:
          ha-control-slider$: |
            .slider-track-bar {
              background-color: {{ 'var(--red-color)' if is_state(config.entity, 'on') else 'var(--blue-color)' }} !important;
            }
            .slider-track-bar::after {
              background-color: {{ 'var(--red-color)' if is_state(config.entity, 'on') else 'var(--blue-color)' }} !important;
            }
            .slider-track-background {
              background-color: {{ 'var(--red-color)' if is_state(config.entity, 'on') else 'var(--blue-color)' }} !important;
            }
11

Danke für Deinen Tipp. Leider hat dies auf die “Slider-Farbe” bei mir keinen Einfluss. Das mit “config.entity” war natürlich falsch.
Hier mein aktuelles Coding:

type: tile
entity: cover.rollladen_buro
color: primary
vertical: false
features:
  - type: cover-position
features_position: bottom
uix:
  style: |-
    ha-state-icon {
      color: {{ 'var(--red-color)' if is_state('binary_sensor.hmip_swdo_0000da498d425c', 'on') else 'var(--blue-color)' }} !important;
    }
  hui-card-features $:
    hui-card-feature $:
      hui-cover-position-card-feature $:
        ha-control-slider$: |
          .slider-track-bar {
            background-color: {{ 'var(--red-color)' if is_state('binary_sensor.hmip_swdo_0000da498d425c', 'on') else 'var(--green-color)' }} !important;
          }
          .slider-track-bar::after {
            background-color: {{ 'var(--red-color)' if is_state('binary_sensor.hmip_swdo_0000da498d425c', 'on') else 'var(--green-color)' }} !important;
          }
          .slider-track-background {
            background-color: {{ 'var(--red-color)' if is_state('binary_sensor.hmip_swdo_0000da498d425c', 'on') else 'var(--green-color)' }} !important;
          }
12

Du musst die Syntax genau einhalten.
Der Slider ist im DOM und da kannst du
für den style nicht mehr das String Format benutzen.

Daher muss das style so formatiert werden, wie in meinem Beispiel.

13

Danke für den Hinweis.

Ich habe Dein Coding übernommen und die Entität (Fenster) eingetragen. Damit funktioniert es.