What result do you get ?
@TommyWelle
You cant use templates in a none template chip (or card for that matter). Not unless you use card mod at least.
Since you are using a light chip you will need to use card mod. Like this:
type: custom:mushroom-chips-card
chips:
- type: light
entity: light.office_desk_light
use_light_color: true
card_mod:
style:
mushroom-light-chip:nth-child(1)$: |
ha-state-icon {
{% if states('light.office_desk_light') == 'off' %}
color: grey;
{% endif %}
}
Sorry but nope. Thats unfortunately the simple answer.
The only improvements you can possibly make are to try and make the transition quicker.
- Use a faster viewing device. So a better phone. Not really an easy ask all of the time.
- Use a faster connection to your HA instance. Check that your ping isnt high to your HA instance.
- Have a faster HA machine. Makes a marginal difference. Its mostly down to the viewing device.
1 Like
It would do yes. You can fix this with more card mod. Again it should be in the guide how to try and position the bar and buttons for example.
Yeah, thats what i thought.
Your code worked, thanks alot. 
One more question, how do i now merge the card_mod code i had before into the new one? 
UNTESTED
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Toalett
secondary: |-
{{ states('sensor.hue_motion_do_temp') }}°C |
{{ states('sensor.aqara_multisensor_gangen_fukt') }} %
icon: mdi:toilet
entity: light.dolys_dz
icon_color: |-
{% if is_state('light.dolys_1', 'on') %}
orange
{% elif is_state('light.dolys_2', 'on') %}
orange
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace-panel/toalett
multiline_secondary: false
layout: horizontal
fill_container: false
card_mod:
style: |
ha-state-icon::after {
content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Do')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Do'))
|rejectattr('entity_id', 'search', 'dz')
|map(attribute='entity_id')
|list | count > 0
%}
background-color: rgba(var(--rgb-disabled), 0.5);
{% else %}
background-color: rgba(var(--rgb-disabled), 0.5);
{% endif %}
border-radius: 50%;
}
{% if states('binary_sensor.hue_motion_do_motion') == 'on' %}
ha-state-icon::before {
content: 'directions_walk';
position: absolute;
font-family: 'Material Icons';
top: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-disabled), 0.5);
color: rgba(var(--rgb-red), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
{% endif %}
@keyframes blink {
50% {opacity: 0;}
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.dolys_dz
use_light_color: true
content_info: none
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em;
background: radial-gradient( var(--card-background-color) 60%, none calc(60% + 1px)), conic-gradient(var(--icon-color) {{state_attr(config.entity,'brightness') | float / 2.55}}% 0%, var(--card-background-color) 0% 100%) !important;
}
alignment: end
card_mod:
style:
mushroom-light-chip:nth-child(1)$: |
ha-state-icon {
{% if states('light.office_desk_light') == 'off' %}
color: grey;
{% endif %}
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: 10px;
}
So if he changes the type to template it would work ?
That works perfectly, thank you so much
Yes but then he loses the “use light color” on the icon, unless he adds that back via a template or card mod instead.
I’m working on a thermostat card and want to theme it to match my mushroom cards. I’m struggling with the the card mod to color the mode buttons to match mushroom icons.
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border-width: 0px;
background: none;
--ha-card-box-shadow: 0px;
}
primary: Thermostat
secondary: |
{{ state_attr('climate.lyric_1f1f94', 'hvac_action') }}
icon: |-
{% set mode = states('climate.lyric_1f1f94') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'heat_cool' %}
mdi:autorenew
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.lyric_1f1f94','hvac_action') %}
{% if status == 'off' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
tap_action: none
- type: custom:simple-thermostat
card_mod:
style: |
ha-card {
border-width: 0px;
background: none;
--ha-card-box-shadow: 0px;
--st-spacing: 0px;
}
header {
margin-bottom: 12px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #9e9e9e;
}
entity: climate.lyric_1f1f94
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:simple-thermostat
card_mod:
style: |
ha-card {
border-width: 0px;
background: none;
--ha-card-box-shadow: 0px;
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: var(--primary-background-color);
margin-left: 12px;
margin-right: 12px;
margin-bottom: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: var(--disabled-color);
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: var(--blue-color);
}
ha-card .mode-item.active.heat {
background: #472421;
color: var(--red-color);
}
ha-card .mode-item.active.heat_cool {
background: #493516;
color: var(--orange-color);
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.lyric_1f1f94
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
cool:
name: Cool
heat_cool:
name: Auto
Can you be more specific with the code that isn’t working and/or circle the section on your picture that you are struggling with?
I have a mushroom template card with a secondary “date line”
secondary: >-
{% set mon = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"] %}
van 1 tot {{ (now().day-1) }} {{ (mon[now().month-1])}}
when it is the first day of the month (and also second I think), this is not ok
can someone help me optimize this ?
edit: something like this
if date is the first of the month
it has to be 1 and not “van 1 tot”
else
the code I have
edit: solution
{% if (now().day == 1) %} {% set mon = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"] %} 1 {{ (mon[now().month-1])}} {% else %} {% set mon = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"] %} van 1 tot {{ (now().day-1) }} {{ (mon[now().month-1])}} {% endif %}
Updated today mushroom card from v3.2.4 to v3.4.0 and now is my secondary information white and not the theme collor, how can i change this back?
Do all you card mods look like this? Post an example of your code if that’s not the issue
card_mod:
style: |
this is my code:
type: custom:mushroom-template-card
icon: hue:room-living
entity: light.beneden
layout: vertical
secondary: >-
{% if is_state("light.woonkamer", "on") %}Aan{% else %}Uit{% endif %} /
{{states('sensor.woonkamer_bme680_temperature')}} °C /
{{states('sensor.woonkamer_bme680_humidity')}} % /
{{states('sensor.woonkamer_senseair_co2')}} CO2
primary: Woonkamer/Keuken
multiline_secondary: true
icon_color: '{{ iif(is_state(entity, "on"), "blue", "") }}'
tap_action:
action: navigate
navigation_path: /mobile-woonkamer
hold_action:
action: toggle
fill_container: true
bofore update it looked this way:
and now:
Is this what you were looking for, it wasnt eactly clear to me.
type: custom:mushroom-template-card
icon: hue:room-living
entity: light.beneden
layout: vertical
secondary: >-
{% if is_state("light.woonkamer", "on") %}Aan{% else %}Uit{% endif %} /
{{states('sensor.woonkamer_bme680_temperature')}} °C /
{{states('sensor.woonkamer_bme680_humidity')}} % /
{{states('sensor.woonkamer_senseair_co2')}} CO2
primary: Woonkamer/Keuken
multiline_secondary: true
icon_color: |
{% if states(config.entity) == 'on' %}
blue
{% else %}
red
{% endif %}
tap_action:
action: navigate
navigation_path: /mobile-woonkamer
hold_action:
action: toggle
fill_container: true
I’ll need time to straight out the text. Been up all night.
Time for sleep than 
But i mean the secondary text is white after the update en before the update is was yellow/orange.
and i want the secondary text in the color from my theme.
I’ll get it. That’s why I stopped. Those colors aren’t defined in the code you posted so either there is more to he card or they a sourced from a theme
Yeah before update v3.4.0 they came out my theme (slate) in the changelog in find this:
I’ll get it, will follow up later today.
1 Like