Should this work with custom:mushroom-template-badge. With the introduction of the replacement for Badges I am trying to get a simular behaviour where the outline or background colour changes based on the state. When I try and add card_mod to the code I get the error
At path: card_mod – Expected a value of type never, but received: `null
You already get:
when using card mod directly against a Chip in the Chip card, so that specifically is not an indication that it isnt working. however i have been trying to apply card mod to the new badges + the mushroom template badge, and so far ive been entirely unsuccesful. thats why the guide is not updated to the newest version yet 
im not the only one working on it either:
thanks for the reply, sometimes its just good to know you are not the only one. I have been trying various examples but without any success and that is the only error message I can share. I will wait and see if the guide gets updated
Thank you for the feedback. Yes, the font color alone works. In connection with the other styles, however, I can’t get the font color to change.
ha-card { ***
****-fontsize
Im really trying to figure this out, but it makes little sense to me of what goes where. From using your examples I have teased out the following code. I would like to give a little more headroom above the icon (making the card a little bigger) and make the icon background transparent. Here is my code, and thank you for the help and replies you have already given!
type: custom:mushroom-fan-card
entity: fan.pergola_ceiling_fan_2
icon_animation: true
primary_info: name
fill_container: true
show_percentage_control: true
name: Patio Fan
layout: vertical
show_oscillate_control: false
secondary_info: state
collapsible_controls: false
icon: phu:fan-blade
card_mod:
style:
mushroom-fan-percentage-control$: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
mushroom-slider {
--main-color: #FFBF00 !important;
--bg-color: #d1eced !important;
}
.: |
mushroom-shape-icon{
--icon-color: #FFBF00 !important;
--shape-color: transparent !important;
--icon-symbol-size: 55px
}
Sorry but i really dont know what this means? your code seems to be missing? and can you elaborate on what is not working please?
I can change the color alone. But if I want to change the complete style from above, I can’t get it to work all together. (color/size/margin…)
type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: ▹ Tv - Watch
alignment: left
subtitle: ''
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 8px;
--card-primary-font-size: 10px;
}
.: |
ha-card {
border-radius: 6px;
font-variant: small-caps;
height: 49px !important;
background-color: rgb(166,166,161, 0.3) !important;
padding-left: 10px !important;
padding-top: 10px !important;
--title-font-size: 17px !important;
--subtitle-font-size: 17px !important;
}
.title {
color: red !important;
}
.subtitle {
color: blue !important;
}
?
does this help?
card_mod:
style:
mushroom-fan-percentage-control$: |
mushroom-slider {
--main-color: #FFBF00 !important;
--bg-color: #d1eced !important;
}
mushroom-shape-icon$: |
.shape {
background: transparent !important;
}
.: |
mushroom-shape-icon{
--icon-color: #FFBF00 !important;
--icon-symbol-size: 55px;
}
mushroom-state-item {
margin-top: 20px;
}
Many many thanks Dimitri. I have see my error.
Your´e the best
Guys, I need help. I’m trying to change the color of the card’s border according to the chosen light color.
Chatgpt helped here:
type: custom:mushroom-light-card
entity: light.yeelight_color4_0x17799bb6
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
styles:
card:
- box-shadow: |
[[[
const rgbColor = states[‘sensor.rgb_color_sensor’].state;
if (rgbColor) {
// Garantir que o valor de rgbColor está no formato correto
const [r, g, b] = rgbColor.replace(‘rgb(’, ‘’).replace(‘)’, ‘’).split(‘,’).map(Number);
return0px 0px 10px 3px rgba(${r}, ${g}, ${b}, 0.5);
}
// Valor de fallback se rgbColor não estiver disponível
return ‘0px 0px 10px 3px rgba(0, 0, 0, 0.5)’;
]]]
However, I get this error:
O editor visual não é compatível com esta configuração:
- At path: styles – Expected a value of type
never, but received:[object Object]Você ainda pode editar sua configuração como YAML.
Note: I created this sensor to get the entity’s RGB value:
sensor.rgb_color_sensor
It accepts a fixed shadow color, but it doesn’t accept dynamic ones. Does anyone have any idea how to get around this?
I think you need to understand the basics first because chatgpt is wrong and I believe over complicated it?
type: custom:mushroom-light-card
entity: light.bar
card_mod:
style: |
ha-card {
border: 2px solid {% if is_state('light.bar', 'on') %}
rgb({{ state_attr('light.bar', 'rgb_color')[0] }},
{{ state_attr('light.bar', 'rgb_color')[1] }},
{{ state_attr('light.bar', 'rgb_color')[2] }})
{% else %} transparent
{% endif %};
}
next time please format your code inside preformatted text under options cog
Thank you for your help. I am struggling to find a good explanation of what portions of design are in the root, versus not. When do we use $ or .: I want to add padding onto a card and have tried it in different positions within the card code. Wondering if there is a reference you would recommend. I have been through 100’s of cards looking for similar issues and solutions.
type: custom:mushroom-fan-card
entity: fan.bed_room_ceiling_fan
icon_animation: true
primary_info: name
fill_container: false
show_percentage_control: true
name: BEDROOM FAN
layout: vertical
show_oscillate_control: false
secondary_info: state
collapsible_controls: false
icon: phu:fan-blade
padding: 10px
card_mod:
style:
height: 90px
width: 242px
mushroom-fan-percentage-control$: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
mushroom-slider {
--main-color: #FFBF00 !important;
}
.: |
mushroom-shape-icon{
--icon-color: #FFBF00 !important;
--shape-color: transparent !important;
--icon-symbol-size: 60px
}
I know for sure this code is wrong, but it was a hail mary attempt at a solution. I need to undersand where to put height and width, and padding. Thanks in advance for all your help. And if there is a reference, so I dont have to bother this forum, I would appreciate that too!
Thank you! It worked!!!
I’ve got an AQI chip that I would like the background to change color based on the numbered state. So <50 would be green, 51-100 would be yellow, etc. What would that look like?
this should get you started
type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:chip
icon_color: |-
{% set aqi = states('sensor.aqi') | int %}
{% if aqi < 50 %}
green
{% else %}
yellow
{% endif %}
Oh it has to be a template card!
it does if you want to use standard mushroom card.
or you can use card_mod which card did you want to use?
No, template is fine. How do I display the state of sensor.aqi in the ‘chip’? I feel like I should know this, but its been a long time since I played around with mushroom.
{{ states('sensor.aqi') }}