Card background colour based on state

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

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

3 Likes

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.

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

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

You should have more options like this

image

on my post not on yours