Because the section operator: default causes the problem.
Change the section
- value: Updating
styles:
…
…
- operator: default
styles:
…
…
into
- value: Updating
styles:
…
…
styles:
…
…
I updated the button card recently, and all cards background color turn into gray.
It used to have white background, and when it turn on, change the color that I selected.
anyone knows how to turn this back to white when it turn off?
Post your code.
Hello!
type: custom:button-card
entity: switch.smart_plug_power_03
name: Humidifier
color_type: card
color: '#632b00'
icon: mdi:fan
styles:
card:
- height: 120px
hold_action:
action: more-info
This is one of the button code.
Setting the color to auto-no-temperature or auto should work. Otherwise you should check your theme (if you’re using one). See the documentation:
color
Color of the icon/card. auto sets the color based on the color of a light including the temperature of the light. Setting this to auto-no-temperature will behave like home-assistant’s default, ignoring the temperature of the light. By default, if the entity state is off , the color will be var(--paper-item-icon-color) , for on it will be var(--paper-item-icon-active-color) and for any other state it will be var(--primary-text-color) . You can redefine each colors using state
Really hoping someone can help as Im new to this and would like to get it working.
I have a horizontal stack and within that have buttons that navigate but also show Room names and the current temperature of the room.
What I would like to do is, if the room is currently heating (this information is in an attribute of thermostat entity) I would like the font color to be red, and if its not heating, font color to be white.
The entity is called climate.wiser_lounge and the attribute is called is_heating and has a value of either true or false.
How would I code it to change the font of the temperature, which in the card is the state?
I have attached the code below, thanks for your time.
type: custom:button-card
size: null
entity: sensor.wiser_lts_temperature_lounge
icon: mdi:sofa-outline
aspect_ratio: 1/1
color_type: card
color: grey
tap_action: navigate
navigation_path: livingroom
name: Living Room
show_state: true
card size: 3
styles:
state:
- color: (this is where Im guessing the query would go?)
styles:
state:
- color: |
[[[
return entity.attributes.is_heating === true
? 'red'
: 'white';
]]]
But the entity that has the heating_on attribute is different to the entity specified in the card, thats where Im struggling
Oops.
styles:
state:
- color: |
[[[
return states['climate.wiser_lounge'].attributes.is_heating === true
? 'red'
: 'white';
]]]
Excellent!! Thank you so much!
I have just tried to also change the icon depending on state but doesnt seem to be working. Any ideas?
type: custom:button-card
size: null
entity: sensor.wiser_lts_temperature_lounge
aspect_ratio: 2/1
color_type: card
color: grey
tap_action: navigate
navigation_path: livingroom
name: Living Room
show_state: true
card size:
styles:
state:
- icon: >
[[[ return states['climate.wiser_lounge'].attributes.is_heating ==
true
? 'mdi:radiator' : 'mdi:radiator-off' ; ]]]
- color: >
[[[ return states['climate.wiser_lounge'].attributes.is_heating ==
true
? 'red' : 'blue' ; ]]]
It’s either
styles:
icon: >
or
state:
- value: …
styles:
icon: >
EDIT: typo
Managed to get it working this way.
state:
- operator: template
value: >
[[[ return states['climate.wiser_lounge'].attributes.is_heating ==
true ]]]
icon: mdi:radiator
styles:
state:
- color: red
- operator: template
value: >
[[[ return states['climate.wiser_lounge'].attributes.is_heating ==
false ]]]
icon: mdi:radiator-off
styles:
state:
- color: white
Thanks for your help
Thanks!
What I want is the button is white when it is off, but it is turn into specific color (#632b00) when it is on.
I don’t use any theme.
I also saw for any other state it will be var(--primary-text-color) . You can redefine each colors using state
but couldn’t figure that out how to redefine each colors with state.
Can you help me to redefine --paper-item-icon-color?
See: GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant
Two basic examples:
type: custom:button-card
entity: light.garderobe
show_state: true
color_type: card
state:
- value: 'on'
color: '#632b00'
- value: 'off'
color: white
- value: unavailable
color: grey
type: custom:button-card
entity: light.garderobe
show_state: true
color_type: card
state:
- value: 'on'
color: '#632b00'
styles:
icon:
- color: white
- value: 'off'
color: white
styles:
icon:
- color: blue
- width: 50px
- value: unavailable
color: grey
Thank you so much!! this works perfectly 
I have tested this in the template section
{{expand('light.living_room_wall_lights', 'entity_id')| selectattr('state','eq','on')|map(attribute='entity_id')|list|count}}/{{ expand('light.living_room_wall_lights') | count }} Lights On
And it displays what I want which is x/x Lights On
How would I get my label to show this?
I have an issue.
I have an RGBW light controller under the light domain integrated to HA with the Magic Home add-on.
If I added it to Lovelace with a simple entity card the tap to toggle On-Off or more-info is working perfectly.
If I add this to a custom button it is not working !!!
type: custom:button-card
entity: light.led_light_office
icon: mdi:led-strip-variant
show_name: false
tap_action: toggle
double_tap_action: more-info
if I remove the tap_action it is working as normal (toggle)
Any ideas? Is it a bug or something which I did wrong?
This can’t work - look at button-card’s manual and examples. Correct way is:
tap_action:
action: toggle
hold_action:
action: more-info