Ich habe eine Raum Karte in der habe ich eine mushroom Chip Karte integriert. Dort färbe ich bereits den Icon Hintergrund per Card-Mod und verwende eine Farbvariable “var(–light-button-active-icon-state-background-colour)” die ich in meinem Theme hinterlegt habe. Das bekomme ich aber nicht hin für das Einfärben des Icons selbst. Ich will das über alle Räume gleich machen und wenn ich die Farbe ändere dann will ich nicht alle Raum Karten und alle z.B. Lichter anfassen müssen.
type: custom:mushroom-chips-card
chips:
- type: template
icon: kuf:light_downlight
icon_color: >-
{% if is_state(entity, 'on') %}
yellow
{% else %}
white
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.bad_oben_spots
card_mod:
style: |
ha-card {
--chip-background: {% if is_state(config.entity, 'on') %} var(--light-button-active-icon-state-background-colour) {% else %} var(--inactive-state-icon-background-colour) {% endif %};
padding: 5px!important;
border-radius: 100px!important;
}
Das hier funktioniert alles nicht, vielleicht kann mir jemand helfen oder sieht meinen Fehler?
icon_color: |
[[[
states['light.wohnzimmer_spots'].state === 'on' ?
'var(--light-button-active-icon-state-colour)' :
'var(--light-button-inactive-icon-state-colour)'
]]]
oder im Card Mod Bereich:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
--color: {% if is_state(config.entity, 'on') %} var(--light-button-active-icon-state-colour) {% else %} var(--light-button-inactive-icon-state-colour) {% endif %};
Was natürlich funktioniert ist:
icon_color: >-
{% if is_state(entity, 'on') %}
yellow
{% else %}
white
{% endif %}
Theme:
mein-theme:
#######################################################
############### Custom global variables ###############
#######################################################
# Gradients
active-light: linear-gradient(145deg, rgba(251,192,217,1) 0%, rgba(255,212,193,1) 100%)
active-small: linear-gradient(145deg, rgba(255,212,193,1) 0%, rgba(248,177,235,1) 100%)
active-big: linear-gradient(145deg, rgba(255,220,178,1) 0%, rgba(255,176,233,1) 60%, rgba(104,156,255,1) 150%)
# Colors
black: "#28282A"
white: "#f5f7fa"
modes:
light:
# General inaktiv
inactive-state-icon-background-colour: "#66666699"
# Light
light-button-inactive-icon-state-colour: "white"
light-button-active-icon-state-colour: "yellow"
light-button-active-icon-state-background-colour: "#fafacd66"
# Button
power-button-inactive-icon-state-colour: "white"
power-button-active-icon-state-colour: "green"
power-button-active-icon-state-background-colour: "#fafacd66"
#climate
climate-heating-icon-colour: "yellow"
climate-idle-icon-colour: "green"
# Menü Leiste
menu-item-text-colour-gray000: "#edeff2"
menu-item-text-colour-gray100: "#e9eaec"
menu-item-text-colour-gray150: "#EDEEEF"
menu-item-text-colour-gray200: "#d6d7d9"
menu-item-text-colour-gray300: "#b6b7b9"
menu-item-text-colour-gray400: "#909193"
menu-item-text-colour-gray500: "#707173"
menu-item-text-colour-gray600: "#494a4c"
menu-item-text-colour-gray700: "#313233"
menu-item-text-colour-gray800: "#0f0f10"
dark:
# General inaktiv
inactive-state-icon-background-colour: "#66666699"
# Light
light-button-inactive-icon-state-colour: "white"
light-button-active-icon-state-colour: "yellow"
light-button-active-icon-state-background-colour: "#fafacd66"
# Button
power-button-inactive-icon-state-colour: "white"
power-button-active-icon-state-colour: "green"
power-button-active-icon-state-background-colour: "#fafacd66"
#climate
climate-heating-icon-colour: "yellow"
climate-idle-icon-colour: "green"
climate-idle-icon-state-background-colour: "#fafacd66"
climate-heating-icon-state-background-colour: "#fafacd66"
# Menü Leiste
menu-item-text-colour-gray000: "#3a3b3d"
menu-item-text-colour-gray100: "#353637"
menu-item-text-colour-gray150: "#323234"
menu-item-text-colour-gray200: "#404142"
menu-item-text-colour-gray300: "#555658"
menu-item-text-colour-gray400: "#737476"
menu-item-text-colour-gray500: "#939496"
menu-item-text-colour-gray600: "#c8c9cb"
menu-item-text-colour-gray700: "#eff0f2"
menu-item-text-colour-gray800: "#ffffff"