Just find out what’s the original value of the property (with code inspector), and then assign that value if your condition isn’t met. You can also try values like ‘unset’, ‘initial’, ‘inherit’.
- color: "[[[ return variables.use_state ? variables.icon_color : 'unset'; ]]]"
Can anyone guide me on setting colors for light & dark mode? I’m missing a step or 2
One set of lights:
type: custom:vertical-stack-in-card
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: markdown
content: |
### Master Bedroom
card_mod:
style: |
ha-card {
height: 100%;
width: 250%
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.security_booth_lights_l1
icon: mdi:lightbulb-group
show_name: false
show_icon: true
color_type: card
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: center
- font-weight: normal
state:
- justify-self: start
state:
- value: "off"
styles:
card:
- color: SlateGrey
- background-color: var(--switch-button-off-color) !important;
- value: "on"
styles:
card:
- color: White
- background-color: var(--switch-button-on-color) !important;
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
entity: switch.security_booth_lights_l2
icon: mdi:television-classic
show_name: false
show_icon: true
color: auto
color_type: card
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: center
- font-weight: normal
state:
- justify-self: start
state:
- value: "off"
styles:
card:
- color: SlateGrey
- background-color: var(--switch-button-off-color) !important;
- value: "on"
styles:
card:
- color: White
- background-color: var(--switch-button-on-color) !important;
- type: custom:button-card
entity: switch.security_booth_lights_l3
icon: mdi:air-conditioner
show_name: false
show_icon: true
color: auto
color_type: card
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: center
- font-weight: normal
state:
- justify-self: start
state:
- value: "off"
styles:
card:
- color: SlateGrey
- background-color: var(--switch-button-off-color) !important;
- value: "on"
styles:
card:
- color: White
- background-color: var(--switch-button-on-color) !important;
view_layout:
position: sidebar
card_mod:
style: |
ha-card {
background: transparent !important;
margin-top: 0px;
#margin-left: 15px;
#max-width: 450px;
}
EDIT:
Found a solution here
UPDATE:
It works but isn’t consistent for button card. Modifying the Metro theme but the background-color reference I created for off is (finally) behaving itself, on isn’t registering consistently at all. Using element inspector sometimes the color doesn’t change to the reference selected for on without reloading the page. If I color the card directly in yaml, the on color stays loaded in off mode for light or dark.
Relevant part of theme yaml
light:
lovelace-background: var(--background-image)
background-image: "center / cover no-repeat fixed url('/local/Metro_day.svg')"
switch-button-off-color: "rgba(255,255,255,.55)"
switch-button-on-color: "rgba(255,193,7,.75)"
dark:
lovelace-background: var(--background-image)
background-image: "center / cover no-repeat fixed url('/local/Metro_night.svg')"
switch-button-off-color: "rgba(0,0,0,.55)"
switch-button-on-color: "rgba(255,193,7,.75)"
I got an interesting question that maybe someone is able to answer. Is there a way to template a custom_field (with or without card mod) so it shows two different values (of two sensors) in an alternating way?
Meaning it looks like it falshes every second or so at at each flash it shows the other value.
I am trying to make a climate card that when the AC is running shows the current temperature and the set temperature flashes in place until it’s done cooling/heating.
I have been unable to use template sensors or animations (in card mod as they don’t support templated content).
Any ideas?
@mynolix1986, you might find this interesting. I didn’t do alternating values, but I did arrange multiple values around the button to show the states of my HVAC.
hi at all!
i’m using custom button-card in an horizontal stack??
how to reduce the gap between cards? thanks a lot
thanks a lot!
please, i don’t understand how to add my last custom field to my button card at right bottom.
I think that the problem is the grid…
As in the image, i need to move the "circular input button’ at the right bottom.
Could you help me?
Thanks
this is my code
color_type: icon
lock:
enabled: true
unlock: double_tap
duration: 2
entity: sensor.alarm_battery
icon: mdi:car-battery
name: BATTERY
tap_action:
action: none
hold_action: none
show_label: true
show_state: false
label: |
[[[
if (states['input_boolean.alarm_battery'].state == 'on')
return '<b>ON</b>';
return 'OFF';
]]]
custom_fields:
btn2:
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.alarm_battery
tap_action:
action: toggle
icon: mdi:power
card_mod:
style: |
ha-card {
--chip-background: grey;
padding: 1px !important;
border-radius: 100px !important;
color:white;
}
styles:
custom_fields:
btn2:
- justify-self: start
- align-self: start
state:
- label: ALARM
styles:
grid:
- grid-template-areas: "\"n\" \"l\" \"btn2\" \"btn2\""
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content min-content min-content
- align-items: start
- will-change: transform
card:
- padding: 20px 8px 22px 12px
- height: 190px
img_cell:
- justify-content: start
- position: absolute
- width: 150px
- height: 150px
- left: 0
- bottom: 0
- margin: 0 0 -40px -40px
- background: orange
- border-radius: 500px
- opacity: "0.5"
name:
- justify-self: start
- position: absolute
- font-size: 13px
- font-weight: 500
label:
- justify-self: start
- align-self: start
- margin-top: 10px
- font-size: 11px
- font-weight: 500
icon:
- position: relative
- width: 80px
- color: "#ffffff"
- opacity: "0.7"
value: "off"
type: custom:button-card
card_mod:
style: |
#lock {
width: 18px !important;
}
just set this button to <display: absolut> and then add <top: 12px> and <left: -12px> play arround with the px to set the button where you want
Hi, I’m trying to pass variables to button_card_templates: but something is wrong
button_card_templates:
orange_button:
styles:
name:
- font-size: 11px
- word-break: break-word
- white-space: unset
variables:
var_confronto: ''
var_stato: ''
card_mod:
style: |
div#img-cell > ha-state-icon {
{% if is_state('[[[ return variables.var_confronto ]]]', 'off') %}
color: orange !important;
{% else %}
color: grey !important;
{%- endif %}
}
and in dashboard
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: true
show_icon: true
tap_action:
action: toggle
entity: script.riscaldamento_basso
hold_action:
action: none
icon: valutta:Riscaldamento GIU
theme: slate
template: orange_button
name: Riscaldamento<br/>basso
variables:
var_confronto: input_boolean.riscaldamento
var_stato: 'off'
“if is_state” have something wrong doesn’t change
please help me!
youre mixing the JS (= javascript, native templating to the button-card) with Jinja (native to card-mod), and that wont work
why not use all of the config in the button-card itself, and stop using card-mod.
setting an icon-color in button-card is very simple
also you dont need
in the template. this will be merged with the config, and since you set the variables there, all will be taken from those values
Thank you!!!
type: custom:button-card
show_name: true
show_icon: true
tap_action:
action: call-service
service: script.riscaldamento_basso
entity: input_boolean.riscaldamento
hold_action:
action: none
icon: valutta:Riscaldamento GIU
theme: slate
template: orange_button
name: Riscaldamento<br/>basso
state:
- value: "off"
color: orange
- value: "on"
color: grey
So better!!!
I created simple button card to notify me about washing machine status. Tricky part is that it overlaps circle icon on top of bacground image (screenshot of washing machine icon) to create washing animation:
type: conditional
conditions:
- entity: input_text.washing_status
state: Washing Started
card:
entity: input_text.washing_status
icon: mdi:circle-slice-4
name: Washing Cycle in Progress
size: 53px
styles:
icon:
- color: var(--cyan2)
- animation: 2s infinite ease-in-out rotating
card:
- background-image: url('/local/washing-machine.png')
- background-size: 53px
- background-position: center 5px
- background-repeat: no-repeat
tap_action:
action: none
type: custom:button-card
It works perfectly as stand alone card. Vut for my target dashboard I’d like to put it on top of picture element card and for this I need to have trasparrent bvackground of the card. But if I apply some card mod CSS style, it also remove washing machine picture, leaving only rotating icon.
card_mod:
style: |
ha-card {
background: none !important;
}
Is the any way to remove card solid color bacground leaving the background picture?
Hope this is the correct thread hope someone can explain whatever simple thing I am missing. This YAML is for showing wind speed and direction, the background icon changes dynamically based on wind speed- That works fine, I have a custom sensor that turns the wind direction from degrees to cardinal direction, that works fine. If the wind speed is 0 mph the background is a static image and does not display any MPH or direction data- That works fine BUT… If the MPG is above 0 I want the MPH and wind direction to appear and it does but the PROBLEM is they are overlapped on top of each other and I can not seem to find a way to seperate them!! That is what I need help with. Here is the YAML for the Dasboard button.
`type: custom:button-card
entity: sensor.denmans_mountain_wind_speed
show_icon: false
show_name: false
show_state: false
styles:
card:
- height: 150px
- width: 150px
- background-size: contain
- background-repeat: no-repeat
- background-position: center
- background-image: >
[[[
return `url(${states['sensor.wind_speed_icon'].state})`;
]]]
- display: grid
- grid-template-rows: auto 1fr auto
- align-items: center
custom_fields:
wind_speed:
- justify-self: center
- font-size: 18px
- font-weight: bold
- color: var(--primary-text-color)
wind_direction:
- justify-self: center
- font-size: 16px
- color: var(--secondary-text-color)
custom_fields:
wind_speed: >
[[[
return `${states['sensor.denmans_mountain_wind_speed'].state} mph`;
]]]
wind_direction: >
[[[
return `${states['sensor.denmans_mountain_wind_cardinal_direction'].state}`;
]]]
`
Any help is appreciated.
Hello!
Please, could someone explain to me why - only using custom_fields in my button card - very often if i refresh the page the card disappear??? If I remove the custom fields all is working well…
Thanks
This is supposed to be dynamically updating the icon based on temp change but it isn’t. it displays the current temp from my local weather station then it should be pulling data from a sensor that pulls hourly temp data based on that if the next hours temp is higher or lower it should change the icon if the temp is the same it displays a"same" icon all I can get it to do is display the same icon. I have checke dto ensure the path is current for the icons and all the sensors are working and pulling data but can’t get this to work any and all help is welcomed! here is the card YAML
entity: sensor.denmans_mountain_temperature
show_icon: false
show_name: false
show_state: true
styles:
card:
- height: 150px
- width: 150px
- background-image: |
[[[
const trend = states['sensor.temperature_trend'].state;
if (trend === 'warmer') {
return "url('/local/temperature/thermometer-warmer.svg')";
} else if (trend === 'colder') {
return "url('/local/temperature/thermometer-colder.svg')";
} else {
return "url('/local/temperature/thermometer.svg')";
}
]]]
- background-size: contain
- background-repeat: no-repeat
- background-position: center
here are the template sensors
# Sensor for the next hour's temperature
- name: "Next Hour Temperature"
unique_id: "next_hour_temperature"
state: >
{% set forecast = state_attr('sensor.pirate_weather_hourly', 'data') %}
{% if forecast and forecast[0] %}
{{ forecast[0].temperature }}
{% else %}
"N/A"
{% endif %}
unit_of_measurement: "°F"
# Sensor for the daily high temperature
- name: "Daily High Temperature"
unique_id: "daily_high_temperature"
state: >
{% set forecast = state_attr('sensor.pirate_weather_daily', 'data') %}
{% if forecast %}
{{ forecast | map(attribute='temperature') | max }}
{% else %}
"N/A"
{% endif %}
unit_of_measurement: "°F"
# Sensor for the daily low temperature
- name: "Daily Low Temperature"
unique_id: "daily_low_temperature"
state: >
{% set forecast = state_attr('sensor.pirate_weather_daily', 'data') %}
{% if forecast %}
{{ forecast | map(attribute='templow') | min }}
{% else %}
"N/A"
{% endif %}
unit_of_measurement: "°F"
# Temperature Trend Sensor
- name: "Temperature Trend"
unique_id: "temperature_trend"
state: >
{% set current_temp = states('sensor.denmans_mountain_temperature') | float(0) | round(1) %}
{% set next_hour_temp = states('sensor.next_hour_temperature') | float(0) | round(1) %}
{% if next_hour_temp > current_temp %}
"warmer"
{% elif next_hour_temp < current_temp %}
"colder"
{% else %}
"same"
{% endif %}
here is the automation to update the trend sensor
description: Update temperature trend every 30 minutes
triggers:
- minutes: /30
trigger: time_pattern
actions:
- data:
entity_id:
- sensor.temperature_trend
action: homeassistant.update_entity
mode: single ```Custom_field not correctly working after HA 2025.0
type: custom:button-card
entity: switch.oven_inschakelen
hold_action:
action: none
name: Oven
icon: mdi:toaster-oven
color_type: card
show_state: true
show_entity_picture: true
custom_fields:
percentage:
card:
type: custom:button-card
entity: sensor.oven_programma_voortgang
tap_action:
action: none
show_name: false
show_state: true
show_icon: false
show_entity_picture: false
color_type: card
color: rgba(225,225,225,0.8)
styles:
card:
- width: 155px
- height: 155px
- margin: 0px
name:
- display: block
- position: absolute
- left: 8px
- bottom: 21px
- font-weight: bold
- font-size: 16px
- font-family: Sans-serif
img_cell:
- margin: 0px
- padding: 0px
state:
- display: block
- position: absolute
- bottom: 5px
- left: 12px
- font-size: 14px
- font-family: Sans-serif
- text-transform: capitalize
icon:
- width: 100px
- margin: 0px 0px 5px 0px
custom_fields:
percentage:
- width: 50px
- display: block
- position: absolute
- top: 8px
- right: 8px
- font-size: 14px
state:
- value: "on"
color: rgba(241,233,233,0.6)
entity_picture: /local/pictures/entities/device/household/oven_icon_136.png?v=1
- value: "off"
color: rgba(65,65,63,0.8)
entity_picture: /local/pictures/entities/device/household/oven_icon_136.png?v=1
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- value: unavailable
color: rgba(65,65,63,0.8)
entity_picture: /local/pictures/entities/error_icon_136.png?v=1
styles:
card:
- filter: opacity(50%)
img_cell:
- margin: 0px
- padding: 0px
icon:
- width: 70px
- margin: 0px 0px 10px 0px
- value: unknown
color: rgba(65,65,63,0.8)
entity_picture: /local/pictures/entities/question_icon_136.png?v=1
styles:
card:
- filter: opacity(50%)
img_cell:
- margin: 0px
- padding: 0px
icon:
- width: 70px
- margin: 0px 0px 10px 0px
the color does not apply anymore, and also font styles do nothing anymore 
Anyone has the same?
It was and should be white and the font shoud be 14px. but its Ha original font size now.
It seems that the fonts/text are not applying anymore because of a element
ha-card.button-card-main.
Is there a way to override this?
I’m trying to create a condition in a button card template that retrieves the name of the card itself.
I am defining the name in the dashboard for the template and am trying to access it to compare it to an Input select. I have tried this.name and config.name to no avail.
I’m trying to avoid having to define the card name in variables.
Does anyone have an idea?
Hi all. I have a problem w dashboard with type SECTION and use card with custom:button-card
When use and use section and put my code my card with button-card , tit no working no load correct and no load all cards…
When use tile view and also use the same cards all works ok and load correct.
This is my code:
https://pastebin.com/YxvNdjQq
Problem is only on first view in dashboard. When use it with secion on second view all load ok.
I dont know where is problem… but only on view section…
anybody has solution for it ?
Button card custom_fields are not working correctly anymore
The problem is button card, not card_mod. Some styles set in the “style” option from the button_card do not work anymore.
The issue is simple: ha-card.button-card-main, has default values for “fonts” “witdh” “padding”. All the values you want te edit/set in the custom_fields do not work anymore. inside custom_fields the button_card styles always stay the default values that are in “ha-card.button-card-main”.
This means someday, the other “styles” in button_card will also not work anymore.
A “fix” is only possible because there is a card_mod. That has the power to overrule this again. Still means button_card is broken.
version 3.5 from card_mod did NOT overrule them anymore. Version 3.4.4 does overrule them again.
Example:
type: custom:button-card
....
custom_fields:
Number:
card:
type: custom:button-card
entity: sensor.hp_printer_pages_total_remaining
tap_action:
action: none
show_name: false
show_state: true
show_icon: false
show_entity_picture: false
color_type: card
color: rgba(255,255,255,0.8)
card_mod:
style: |
ha-card {
font-size: 14px !important;
border-color: #d9d9d9 !important;
box-shadow: none !important;
}
....
styles:
card:
- width: 155px > works
name:
- display: block > works
- position: absolute > works
- bottom: 21px > works
- left: 8px > works
- font-weight: bold > works
- font-size: 16px > works
- font-family: Sans-serif > works
state:
- display: block > works
- position: absolute > works
- bottom: 5px > works
- left: 12px > works
- font-color: rgba(255, 0, 0, 0.8) > works
- font-size: 14px > works
- font-family: Sans-serif > works
- text-transform: capitalize > works
icon:
- width: 110px > works
- margin: 0px 0px 1px 0px > works
custom_fields:
Number:
- width: 50px > works because not in ha-card.button-card-main
- display: block > works because not in ha-card.button-card-main
- position: absolute > works because not in ha-card.button-card-main
- top: 8px > works because not in ha-card.button-card-main
- right: 8px > works because not in ha-card.button-card-main
- font-size: 14px > does NOT work because IS in ha-card.button-card-main
- font-family: Sans-serif > does NOT work because IS in ha-card.button-card-main
- text-transform: capitalize > does NOT work because IS in ha-card.button-card-main
state:
Than we use card_mod for the values that do not work anymore in the style from button_card
card_mod:
style: |
ha-card {
font-size: 14px !important; > works in 3.4.4 not anymore in 3.5
border-color: #d9d9d9 !important; > works in 3.4.4 not anymore in 3.5
box-shadow: none !important; > works in 3.4.4 not anymore in 3.5
}