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:
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