How do I do this

hi, I’m trying to have a entity card with different icons and icon colour depending on state on/off

here is what it looks like

I would like the icons to be red when off and green when on, those icons when on and the off version when off, thank you in advance.

If you want custom colours, I think you’re going to have to use something like card-mod from HACS.

Hi Paul, on top of the option already given, a search on the forum gives you plenty of info: https://community.home-assistant.io/search?q=entities+state+color

You do not need to use card mod to change the icon state colours. This can be done with the built in themes configuration.

Assuming those entities are switches, these theme variables:

  state-switch-on-color: '#e0b400' # yellow
  state-switch-off-color: '#395274' # dark blue-grey

Here are the rest (with my day_theme colours):

### State colours ###
  state-default-color: '#395274' # dark blue-grey
  state-alarm_control_panel-armed_away-color: '#e45e65' # red
  state-alarm_control_panel-armed_night-color: '#039be5' # blue
  state-alarm_control_panel-armed_custom_bypass-color: '#e0b400' # yellow
  state-alarm_control_panel-arming-color: '#ff8000' # orange
  state-alarm_control_panel-disarmed-color: '#0da035' # green
  state-alarm_control_panel-disarming-color: '#ff8000' # orange
  state-alarm_control_panel-pending-color: '#ff8000' # orange
  state-alarm_control_panel-triggered-color: '#e45e65' # red
  state-alert-off-color: '#0da035' # green
  state-alert-on-color: '#e45e65' # red
  state-automation-color: '#e0b400' # yellow
  state-binary_sensor-on-color: '#e0b400' # yellow
  state-binary_sensor-off-color: '#395274' # dark blue-grey
  state-calendar-color: '#039be5' # blue
  state-camera-color: '#039be5' # blue
  state-climate-auto-color: '#ff8000' # orange
  state-climate-cool-color: '#039be5' # blue
  state-climate-dry-color: '#e0b400' # yellow
  state-climate-fan_only-color: '#0da035' # green
  state-climate-heat-color: '#e45e65' # red
  state-climate-heat-cool-color: '#b200ff' # purple
  state-climate-idle-color: '#395274' # dark blue-grey
  state-cover-color: '#b200ff' # purple
  state-device_tracker-active-color: '#039be5' # blue
  state-device_tracker-home-color: '#e0b400' # yellow
  state-device_tracker-inactive-color: '#395274' # dark blue-grey
  state-fan-on-color: '#e0b400' # yellow
  state-group-color: '#e0b400' # yellow
  state-humidifier-color: '#039be5' # blue
  state-input-boolean-color: '#e0b400' # yellow
  state-light-active-color: '#e0b400' # yellow
  state-lock-jammed-color: '#e45e65' # red
  state-lock-locked-color: '#395274' # dark blue-grey
  state-lock-pending-color: '#ff8000' # orange
  state-lock-unlocked-color: '#e0b400' # yellow
  state-media_player-active-color: '#e0b400' # yellow
  person-home-color: '#e0b400' # yellow
  state-person-not-home-color: '#395274' # dark blue-grey
  state-person-zone-color: '#039be5' # blue
  state-remote-color: '#e0b400' # yellow
  state-script-color: '#e0b400' # yellow
  state-sensor-battery-high-color: '#0da035' # green
  state-sensor-battery-low-color: '#e45e65' # red
  state-sensor-battery-medium-color: '#ff8000' # orange
  state-sensor-battery-unknown-color: '#8A8A8A' # Off (Mid-Grey)
  state-siren-color: '#e45e65' # red
  state-sun-above_horizon-color: '#e0b400' # yellow
  state-sun-below_horizon-color: '#395274' # dark blue-grey
  state-switch-on-color: '#e0b400' # yellow
  state-switch-off-color: '#395274' # dark blue-grey
  state-timer-color: '#e0b400' # yellow
  state-update-active-color: '#e45e65' # red
  state-update-installing-color: '#ff8000' # orange
  state-vacuum-active-color: '#e0b400' # yellow

Themes docs:

1 Like

hi, I’ve done the icon colour via the card mod and that’s working great just like I want. trying to get the icon change working now