Card background colour based on state

Configuration Frontend
#1

Hi,

Noob question - I’m using custom button card, and I cannot for the life of me change the background colour of a card based on its state being either on or off. I feel like this is a really easy thing to do, but I have been searching and searching and I cannot work this out.

This is what I have so far, but I’m really struggling to understand when to put a dash or not, so that may be the issue too.

Any help would be really appreciated. Thank you

show_name: true
show_icon: true
type: custom:button-card
state:
  - value: 'on'
    color: red
    styles:
    card:
    - background-color: orange

  - value: 'off'
    color: blue
    styles:
    card:
    - background-color: green

tap_action:
  action: toggle
entity: switch.sonoff_1000c0d660
name: Hallway light
theme: noctis
#2

Hi @macca_andy,
You simply need to indent “card” after styles.

Here is a working version

show_name: true
show_icon: true
type: custom:button-card
state:
  - value: 'on'
    color: red
    styles:
      card:
      - background-color: orange

  - value: 'off'
    color: blue
    styles:
      card:
      - background-color: green

tap_action:
  action: toggle
entity: switch.sonoff_1000c0d660
name: Hallway light
theme: noctis

Kind regards,
Ghassan

2 Likes
#3

Wow. What a simple change you just made. Do you know if there are any good resources to learn about spacing and indents?

Thank you very much for your help.

#4

No general rules.
You follow the instruction and examples of the component you are trying to use.

For custom:button-card see for example:
Fun with custom:button-card - Share your Projects! / Lovelace & Frontend - Home Assistant Community (home-assistant.io)

or the instructions at the cards Github repository:
custom-cards/button-card: :sparkle: Lovelace button-card for home assistant (github.com)

Please remember to tag my reply as solution.

Kind regards,
Ghassan

#5

Not sure how to mark it as solved with your solution… these are the only options i have?

image
image738×127 2.06 KB

#6

You should have more options like this

image

on my post not on yours