Oh shoot, I didn’t notice that, thanks!
This is better. I was testing so I used my fan.
icon_color: |-
{%- if is_state(entity, 'on') %}
#f92aad
{%- elif is_state(entity, 'off') %}
#475c31
{% else %}
red
{% endif %}
1 Like
Weird, it is still not working for me… I cannot get any of my chips cards to change the icon color even without code. I was curious if I just set a color without any logic and it still will not change, I am kind of at a loss. I tried creating a new card and the icon colors will not change in that one either.
I also tried changing back to the default theme and that also did not change the result.
Is Mushroom on 3.4.2?
Yes, and I just triggered a re-download and reloaded and it is still the same
Are colors changing on other cards, just not chips? Oh if your are stacking chips we may need to move to card mod to change the color. DM the full card code.
Our current method works for multiple chips
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.bedroom_fan
icon: mdi:mushroom
content: ''
icon_color: |-
{%- if is_state(entity, 'on') %}
#f92aad
{%- elif is_state(entity, 'off') %}
#475c31
{% else %}
red
{% endif %}
tap_action:
action: toggle
card_mod:
style:
div:
mushroom-template-chip:nth-child(4):
$:
mushroom-chip: |
ha-state-icon {
{% set _state = states('switch.bedroom_fan') %}
{% if _state == "on" %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- type: template
entity: switch.bedroom_fan
icon: mdi:fan
content: ''
icon_color: |-
{%- if is_state(entity, 'on') %}
#f92aad
{%- elif is_state(entity, 'off') %}
#475c31
{% else %}
red
{% endif %}
tap_action:
action: toggle
- type: template
entity: switch.bedroom_fan
icon: mdi:lamp
content: ''
icon_color: |-
{%- if is_state(entity, 'on') %}
#f92aad
{%- elif is_state(entity, 'off') %}
#475c31
{% else %}
red
{% endif %}
tap_action:
action: toggle
weird… i wonder what my setup could be doing that is different. I copied your example above directly into my lovelace and it is still not working:
It has to be with you theme or your browser needs refreshed. You can use developer services to reload: themes.
1 Like
well damn it, ok, I just blasted out my cache and rebooted and it is working now.
Thank you so so so so so much for all of your help and patience
No problem, happy to help. When using themes a lot info gets cached and has caused folks a lot of unnecessary frustration, including me at one point 
2 Likes
to add an extra note for people - it is especially difficult to fully clear the cache on IOS/MAC/Safari. not the developers fault. IOS/MAC/Safari, is just notoriously difficult to actually get to clear the cache fully.
1 Like
hi me again.
is it possible to have the text in a chips card displayed below the icon instead of next to it, i.e.:
here is the code (excerpt):
type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.tasmota6_2
icon_color: '{{ ''#FFC207'' if states(''switch.tasmota6_2'') == ''on'' else ''#3D73A2'' }}'
icon: mdi:power-socket-de
content: LEDs
card_mod:
style: |
ha-card {
justify-content: center;
--chip-icon-size: 44px;
--chip-height: 44px;
}
a reply would be much appreciated. thanks!
Thanks for your support. Its appreciated.
I found out that the command to change the color of the label has changed from
--primary-text-color: to --card-primary-color:
Changing this in accordance to your example fixed the colored label.
The color definitions are stored in the theme I am using
Minimalist Theme
minimalist-desktop:
Journal
state-icon-color: “rgb(var(–color-theme))”
border-radius: “20px”
ha-card-border-radius: “var(–border-radius)”
error-color: “var(–google-red)”
warning-color: “var(–google-yellow)”
success-color: “var(–google-green)”
info-color: “var(–google-blue)”
divider-color: “rgba(var(–color-theme),.12)”
accent-color: “var(–google-yellow)”
ha-dialog-border-radius: “10px”
fix added border-lines in 2022.11
ha-card-border-width: “0px”
card-mod-theme: “minimalist-desktop”
card-mod-view-yaml: |
“*:first-child$”: |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
modes:
light:
# text
primary-text-color: “#212121”
# main interface colors
primary-color: “#434343”
google-red: “#F54436”
google-green: “#01C852”
google-yellow: “#FF9101”
google-blue: “#3D5AFE”
google-violet: “#661FFF”
google-grey: “#BBBBBB”
color-red: “245, 68, 54”
color-green: “1, 200, 82”
color-yellow: “255, 145, 1”
color-blue: “61, 90, 254”
color-purple: “102, 31, 255”
color-grey: “187, 187, 187”
color-pink: “233, 30, 99”
color-theme: “51,51,51”
color-background-yellow: “250, 250, 250”
color-background-blue: “250, 250, 250”
color-background-green: “250, 250, 250”
color-background-red: “250, 250, 250”
color-background-pink: “250, 250, 250”
color-background-purple: “250, 250, 250”
color-yellow-text: “var(–primary-text-color)”
color-blue-text: “var(–primary-text-color)”
color-green-text: “var(–primary-text-color)”
color-red-text: “var(–primary-text-color)”
color-pink-text: “var(–primary-text-color)”
color-purple-text: “var(–primary-text-color)”
opacity-bg: “1”
# background and sidebar
card-background-color: “#FAFAFA”
primary-background-color: “#EFEFEF”
secondary-background-color: “#EFEFEF”
# header
app-header-text-color: “var(–primary-text-color)”
app-header-background-color: “var(–primary-background-color)”
# paper-tabs-selection-bar-color: “var(–primary-text-color)”
# slider
slider-color: “rgb(var(–color-blue))”
slider-bar-color: “rgba(var(–color-blue),0.38)”
# cards
box-shadow: “0px 2px 4px 0px rgba(0,0,0,0.16)”
ha-card-box-shadow: “var(–box-shadow)”
# sidebar
sidebar-selected-text-color: “var(–google-red)”
sidebar-selected-icon-color: “var(–google-red)”
sidebar-text-color: “#80868b”
# switch
switch-checked-color: “var(–google-blue)”
# media player
mini-media-player-accent-color: “var(–google-blue)”
dark:
# text
primary-text-color: “#DDDDDD”
# main interface colors
primary-color: “#89B3F8”
google-red: “#F18B82”
google-green: “#80C994”
google-yellow: “#FCD663”
google-blue: “#89B3F8”
google-violet: “#BB86FC”
google-grey: “#BBBBBB”
color-red: “241, 139, 130”
color-green: “128, 201, 148”
color-yellow: “252, 214, 99”
color-blue: “137, 179, 248”
color-theme: “221,221,221”
color-purple: “102, 31, 255”
color-grey: “187, 187, 187”
color-pink: “233, 30, 99”
color-background-yellow: “var(–color-yellow)”
color-background-blue: “var(–color-blue)”
color-background-green: “var(–color-green)”
color-background-red: “var(–color-red)”
color-background-pink: “var(–color-pink)”
color-background-purple: “var(–color-purple)”
color-yellow-text: “var(–color-yellow)”
color-blue-text: “var(–color-blue)”
color-green-text: “var(–color-green)”
color-red-text: “var(–color-red)”
color-pink-text: “var(–color-pink)”
color-purple-text: “var(–color-purple)”
opacity-bg: “0.1”
# floating button text color
mdc-theme-on-secondary: “var(–card-background-color)”
# background and sidebar
card-background-color: “#1D1D1D”
primary-background-color: “#121212”
secondary-background-color: “#121212”
# header
app-header-text-color: “var(–primary-text-color)”
app-header-background-color: “var(–primary-background-color)”
paper-tabs-selection-bar-color: “var(–primary-text-color)”
# Sidebar
sidebar-selected-text-color: “rgb(var(–color-blue))”
sidebar-selected-icon-color: “rgb(var(–color-blue))”
# Slider
slider-color: “rgb(var(–color-blue))”
slider-bar-color: “rgba(var(–color-blue),0.38)”
# card
box-shadow: “none”
# media player
mini-media-player-accent-color: “var(–google-blue)”
# Journal
state-icon-color: “rgb(var(–color-theme))”
However the background coloring of the living room card does not seem to take an effect. Even if I try it real simple by something like this:
card-mod:
style: |
ha-card {
background: green
}
Doing the same on the kitchen card colors it green, but it does for some reason not affect the living room card…
2 Likes
I came in to ask why changing the color of the primary text didn’t work in my case - in the end I changed it to the one suggested in the post, thank u, very quickly! 
card_mod:
style: |
ha-card {
{% if states('sensor.washing_machine_state') == 'Washing' %}
--primary-text-color: green;
{% else %}
--primary-text-color: black;
{% endif %}
border: none !important;
}
Changed --primary-text-color to --card-primary-color. I think it’s was correct?
thats my socket 
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
--ha-card-background: none;
height: 99px !important;
background: url('/local/images/icon/merossbg.png') center / cover no-repeat !important;
--ha-card-border-radius: 1px;
margin-left: -2px !important;
transition: all 0s;
padding: 0px !important;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.demir_isiklar
icon_color: >-
{{ '#B7E5B4' if states('light.demir_isiklar') == 'on' else
'#B6BBC4' }}
icon: mdi:toggle-switch-outline
card_mod:
style: |
ha-card {
justify-content: center;
--chip-icon-size: 45px;
--chip-height: 70px;
--chip-background: transparent;
margin-left: -20px;
margin-top: 20px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.yeelink_strip6_b185_light
icon_color: >-
{{ '#B7E5B4' if states('light.yeelink_strip6_b185_light') == 'on'
else '#B4B4B8' }}
icon: mdi:power-socket-de
card_mod:
style: |
ha-card {
justify-content: center;
--chip-icon-size: 74px;
--chip-height: 74px;
--chip-background: transparent;
margin-left: -40px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.yeelink_color2_4ef3_light_2
icon_color: >-
{{ '#B7E5B4' if states('light.yeelink_color2_4ef3_light_2') ==
'on' else '#B4B4B8' }}
icon: mdi:power-socket-de
card_mod:
style: |
ha-card {
justify-content: center;
--chip-icon-size: 74px;
--chip-height: 74px;
--chip-background: transparent;
margin-left: -40px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.yeelink_lamp4_4de6_light
icon_color: >-
{{ '#B7E5B4' if states('light.yeelink_lamp4_4de6_light') == 'on'
else '#B4B4B8' }}
icon: mdi:power-socket-de
card_mod:
style: |
ha-card {
justify-content: center;
--chip-icon-size: 74px;
--chip-height: 74px;
--chip-background: transparent;
margin-left: -40px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.yeelink_color5_adff_light
icon_color: >-
{{ '#B7E5B4' if states('light.yeelink_color5_adff_light') == 'on'
else '#B4B4B8' }}
icon: mdi:power-socket-de
card_mod:
style: |
ha-card {
justify-content: center;
--chip-icon-size: 74px;
--chip-height: 74px;
--chip-background: transparent;
margin-left: -40px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.yeelink_colora_8af0_light
icon_color: >-
{{ '#B7E5B4' if states('light.yeelink_colora_8af0_light') == 'on'
else '#B4B4B8' }}
icon: mdi:list-box-outline
card_mod:
style: |
ha-card {
justify-content: center;
--chip-icon-size: 74px;
--chip-height: 74px;
--chip-background: transparent;
margin-left: -45px;
margin-right: 0px;
}
card_mod:
style: |
ha-card {
position: absolute;
right: 0px;
top: 12px;
background: rgba(var(--rgb-card-background-color), 0.3);
box-shadow: none;
transition: all 0s;
}
5 Likes
I’ll install minimalist on my test HA and see if I source the issue. I am fairly certain it’s theme related.
Guys, is it possible to add an icon-type overlay, but without text?
In what type of application or card?