im trying to set specific binary sensor device class for certain colours. below is an example. Now i read the themes website section called The color rules can be customized using theme variables and also made note of
Note that the variables will be used in the listed order, so if multiple match your entity, the first matching variable (= most specific one) will be used.
The below may seem the same but the on and off are switched because if the a Binary sensor for Safety is marked as safe its Off, but i want this to be green
state-binary_sensor-safety-on-color: "#F44336" # red
state-binary_sensor-safety-off-color: "#FFA500" # green
state-binary_sensor-safety-unknown-color: "#F44336" # red
state-binary_sensor-safety-unavailable-color: "#F44336" # red
Where as Binary sensor for running is on its green and off is red
### Binary Sensor Running ###
state-binary_sensor-running-on-color: "#4CAF50" # green
state-binary_sensor-running-off-color: "#FFA500" # orange
state-binary_sensor-running-unknown-color: "#F44336" # red
state-binary_sensor-running-unavailable-color: "#F44336" # red
Here is the rest of my theme
My Theme:
## HA variables
#ha-card-box-shadow: inset 0px 0px 0px 1px var(--border-color) # borders, no shadow
ha-card-box-shadow: "0px 2px 4px 0px rgba(0,0,0,0.20)"
ha-card-border-radius: 14px
ha-card-border-width: 0px
ha-dialog-border-radius: 14px
# # app header
# app-header-text-color: var(--primary-text-color)
# app-header-background-color: var(--primary-background-color) # see light/dark mode below
## Browser Mod variables
popup-border-radius: 24px
popup-background-color: var(--primary-background-color)
popup-padding-x: 8px
popup-padding-y: 8px
## Mushroom variables
# layout
mush-spacing: 8px
# titles & subtitles
mush-title-padding: 20px 12px 8px
mush-title-spacing: 6px
mush-title-font-size: 16px
mush-title-font-weight: bolder
mush-title-line-height: 1.1
mush-subtitle-font-size: 12px
mush-subtitle-font-weight: normal
mush-subtitle-line-height: 1
## Home Assistant Tile Card Variables
ha-card-tile-border-radius: 50px
ha-card-tile-padding: 12px
ha-card-tile-background-color: var(--card-background-color)
ha-card-tile-border-color: var(--border-color)
ha-card-tile-border-width: 1px
ha-card-tile-box-shadow: var(--ha-card-box-shadow)
ha-card-tile-title-font-size: 12px
ha-card-tile-title-font-weight: bold
ha-card-tile-subtitle-font-size: 11px
ha-card-tile-subtitle-font-weight: normal
ha-card-tile-icon-size: 24px
ha-card-tile-icon-color: var(--primary-color)
# cards
mush-card-primary-font-size: 14px
mush-card-secondary-font-size: 12px
mush-card-primary-font-weight: bold
mush-card-secondary-font-weight: normal
mush-card-primary-line-height: 1.5
mush-card-secondary-line-height: 1.5
# chips
mush-chip-spacing: 6px
mush-chip-padding: 0 0.25em
mush-chip-height: 38px
mush-chip-border-radius: 8px
mush-chip-font-size: 0.3em
mush-chip-font-weight: bold
mush-chip-icon-size: 0.5em
mush-chip-avatar-padding: 0.1em
mush-chip-avatar-border-radius: 50%
mush-chip-box-shadow: var(--ha-card-box-shadow)
mush-chip-background: var(--ha-card-background)
# Control
mush-control-border-radius: 20px
mush-control-height: 42px
mush-control-button-ratio: 1
mush-control-icon-size: 0.5em
# Slider
mush-slider-threshold: 10
# Badge
mush-badge-size: 10px
mush-badge-icon-size: 0.75em
mush-badge-border-radius: 50%
ha-badge-active-badge-color: "#3F51B5" # primary
ha-badge-size: 36px
ha-badge-border-radius: 8px
# Icon
mush-icon-border-radius: 50%
mush-icon-size: 35px
mush-icon-symbol-size: 0.6em
# Colors
mush-rgb-amber: rgb(255, 194, 0) → #FFC200
mush-rgb-black: rgb(0, 0, 0) → #000000
mush-rgb-blue: rgb(52, 152, 219) → #3498DB
mush-rgb-blue-grey: rgb(52, 73, 94) → #34495E
mush-rgb-brown: rgb(121, 85, 72) → #795548
mush-rgb-disabled-color: rgb(189, 189, 189) → #bdbdbd;
mush-rgb-cyan: rgb(0, 188, 212) → #00BCD4
mush-rgb-dark-blue: rgb(21, 101, 192) → #1565C0
mush-rgb-dark-green: rgb(25, 111, 61) → #196F3D
mush-rgb-dark-grey: rgb(81, 90, 90) → #515A5A
mush-rgb-deep-orange: rgb(255, 87, 34) → #FF5722
mush-rgb-deep-purple: rgb(103, 58, 183) → #673AB7
mush-rgb-green: rgb(76, 175, 80) → #4CAF50
mush-rgb-grey: rgb(149, 165, 166) → #95A5A6
mush-rgb-indigo: rgb(63, 81, 181) → #3F51B5
mush-rgb-light-blue: rgb(129, 212, 250) → #81D4FA
mush-rgb-light-green: rgb(165, 214, 167) → #A5D6A7
mush-rgb-light-purple: rgb(187, 143, 206) → #BB8FCE
mush-rgb-lime: rgb(205, 220, 57) → #CDDC39
mush-rgb-orange: rgb(255, 165, 0) → #FFA500
mush-rgb-pink: rgb(236, 64, 122) → #EC407A
mush-rgb-purple: rgb(142, 68, 173) → #8E44AD
mush-rgb-red: rgb(244, 67, 54) → #F44336
mush-rgb-teal: rgb(0, 150, 136) → #009688
mush-rgb-white: rgb(255, 255, 255) → #FFFFFF
mush-rgb-yellow: rgb(255, 204, 0) → #FFCC00
mush-rgb-info: "#3498DB"
mush-rgb-success: "#4CAF50"
mush-rgb-warning: var(--mush-rgb-accent)
mush-rgb-danger: "#F44336"
## State Domain Colors ##
state-active-color: "#4CAF50" # green
state-inactive-color: var(--grey-color);
state-unavailable-color: "#F44336" # red
state-unknown-color: "#F44336" # red
### Alarm Control Panel ###
state-alarm_control_panel-armed_away-color: "#4CAF50" # green
state-alarm_control_panel-armed_custom_bypass-color: "#4CAF50" # green
state-alarm_control_panel-armed_home-color: "#4CAF50" # green
state-alarm_control_panel-armed_night-color: "#4CAF50" # green
state-alarm_control_panel-armed_vacation-color: "#4CAF50" # green
state-alarm_control_panel-arming-color: "#FFA500" # orange
state-alarm_control_panel-disarming-color: "#FFA500" # orange
state-alarm_control_panel-pending-color: "#FFA500" # orange
state-alarm_control_panel-triggered-color: "#F44336" # red
state-alarm_control_panel-unknown-color: "#F44336" # red
state-alarm_control_panel-unavailable-color: "#F44336" # red
### Alert ###
state-alert-off-color: "#95A5A6" # grey
state-alert-on-color: "#F44336" # red
state-alert-unknown-color: "#F44336" # red
state-alert-unavailable-color: "#F44336" # red
# ### Binary Sensor ###
# state-binary_sensor-active-color: "#4CAF50" # green
# state-binary_sensor-battery-on-color: "#F44336" # red
# state-binary_sensor-carbon_monoxide-on-color: "#F44336" # red
# state-binary_sensor-gas-on-color: "#F44336" # red
# state-binary_sensor-heat-on-color: "#F44336" # red
# state-binary_sensor-moisture-on-color: "#F44336" # red
# state-binary_sensor-problem-on-color: "#F44336" # red
# state-binary_sensor-smoke-on-color: "#F44336" # red
# state-binary_sensor-sound-on-color: "#F44336" # red
# state-binary_sensor-tamper-on-color: "#F44336" # red
# state-binary_sensor-cold-on-color: "#3498DB" # blue
# state-binary_sensor-window-on-color: "#F44336" # red
# state-binary_sensor-unknown-color: "#F44336" # red
# state-binary_sensor-unavailable-color: "#F44336" # red
# state-binary_sensor-moisture-off-color: "#4CAF50" # green
### Binary Sensor Safety ###
state-binary_sensor-brads_nas_drive_1_below_min_remaining_life-on-color: "#F44336" # red (alert)
state-binary_sensor-brads_nas_drive_1_below_min_remaining_life-off-color: "#FFA500" # green (no alert)
state-binary_sensor-safety-on-color: "#F44336" # red
state-binary_sensor-safety-off-color: "#FFA500" # green
state-binary_sensor-safety-unknown-color: "#F44336" # red
state-binary_sensor-safety-unavailable-color: "#F44336" # red
### Binary Sensor Running ###
state-binary_sensor-running-on-color: "#4CAF50" # green
state-binary_sensor-running-off-color: "#FFA500" # orange
state-binary_sensor-running-unknown-color: "#F44336" # red
state-binary_sensor-running-unavailable-color: "#F44336" # red
### Binary Sensor Door ###
state-binary_sensor-door-off-color: "#4CAF50" # green
state-binary_sensor-door-on-color: "#FFA500" # orange
state-binary_sensor-door-unknown-color: "#F44336" # red
state-binary_sensor-door-unavailable-color: "#F44336" # red
### Binary Sensor Lock ###
state-binary_sensor-lock-off-color: "#4CAF50" # green
state-binary_sensor-lock-on-color: "#FFA500" # orange
state-binary_sensor-lock-unknown-color: "#F44336" # red
state-binary_sensor-lock-unavailable-color: "#F44336" # red
### Binary Sensor Connectivity ###
state-binary_sensor-connectivity-off-color: "#FFA500" # orange
state-binary_sensor-connectivity-on-color: "#4CAF50" # green
state-binary_sensor-connectivity-unknown-color: "#F44336" # red
state-binary_sensor-connectivity-unavailable-color: "#F44336" # red
### Climate ###
state-climate-auto-color: "#009688" # teal
state-climate-cool-color: "#3498DB" # blue
state-climate-dry-color: "#4CAF50" # green
state-climate-fan_only-color: "#00BCD4" # cyan
state-climate-heat-color: "#FF5722" # deep orange
state-climate-heat_cool-color: "#FFC200" # amber
state-climate-off-color: "#95A5A6" # grey
state-climate-idle-color: "#95A5A6" # grey
state-climate-emergency_heat-color: "#F44336" # red
state-climate-unknown-color: "#F44336" # red
state-climate-unavailable-color: "#F44336" # red
### Cover ###
state-cover-active-color: "#FFA500" # purple
state-cover-garage-open-color: "#FFA500" # orange
state-cover-open-color: "#8E44AD" # purple
state-cover-closed-color: "#4CAF50" # green
state-cover-unknown-color: "#F44336" # red
state-cover-unavailable-color: "#F44336" # red
### Device Tracker ###
state-device_tracker-active-color: "#FFA500" # orange
state-device_tracker-home-color: "#4CAF50" # green
state-device_tracker-unknown-color: "#F44336" # red
state-device_tracker-unavailable-color: "#F44336" # red
### Fan ###
state-fan-active-color: "#009688" # teal
state-fan-unknown-color: "#F44336" # red
state-fan-unavailable-color: "#F44336" # red
### Humidifier ###
state-humidifier-on-color: "#FFA500" # orange
state-humidifier-unknown-color: "#F44336" # red
state-humidifier-unavailable-color: "#F44336" # red
### Lawn Mower ###
state-lawn_mower-error-color: "#F44336" # red
state-lawn_mower-mowing-color: "#FFA500" # orange
state-lawn_mower-unknown-color: "#F44336" # red
state-lawn_mower-unavailable-color: "#F44336" # red
### Light ###
state-light-active-color: "#FFC200" # amber
state-light-off-color: "#95A5A6" # grey
state-light-idle-color: "#95A5A6" # grey
state-light-unknown-color: "#F44336" # red
state-light-unavailable-color: "#F44336" # red
### Lock ###
state-lock-jammed-color: "#F44336" # red
state-lock-locked-color: "#4CAF50" # green
state-lock-locking-color: "#FFA500" # orange
state-lock-unlocked-color: "#FFA500" # orange
state-lock-unlocking-color: "#FFA500" # orange
state-lock-open-color: "#FFA500" # orange
state-lock-opening-color: "#FFA500" # orange
state-lock-unknown-color: "#F44336" # red
state-lock-unavailable-color: "#F44336" # red
### Media Player ###
state-media_player-playing-color: "#4CAF50" # green
state-media_player-paused-color: "#FFA500" # orange
state-media_player-idle-color: "#95A5A6" # grey
state-media_player-unknown-color: "#F44336" # red
state-media_player-unavailable-color: "#F44336" # red
### Person ###
state-person-active-color: "#3498DB" # blue
state-person-home-color: "#4CAF50" # green
state-person-unknown-color: "#F44336" # red
state-person-unavailable-color: "#F44336" # red
### Plant ###
state-plant-active-color: "#F44336" # red
state-plant-unknown-color: "#F44336" # red
state-plant-unavailable-color: "#F44336" # red
### Remote ###
state-remote-on-color: "#4CAF50" # green
state-remote-off-color: "#95A5A6" # grey
state-remote-unknown-color: "#F44336" # red
state-remote-unavailable-color: "#F44336" # red
### Siren ###
state-siren-active-color: "#FFA500" # orange
state-siren-unknown-color: "#F44336" # red
state-siren-unavailable-color: "#F44336" # red
### Sun ###
state-sun-above_horizon-color: "#FFC200" # amber
state-sun-below_horizon-color: "#3F51B5" # indigo
state-sun-unknown-color: "#F44336" # red
state-sun-unavailable-color: "#F44336" # red
### Switch ###
state-switch-active-color: "#FFA500" # orange
state-switch-off-color: "#95A5A6" # grey
state-switch-unknown-color: "#F44336" # red
state-switch-unavailable-color: "#F44336" # red
### Timer ###
state-timer-active-color: "#FFA500" # orange
state-timer-paused-color: "#FFC200" # amber
state-timer-finished-color: "#4CAF50" # green
state-timer-unknown-color: "#F44336" # red
state-timer-unavailable-color: "#F44336" # red
### Update ###
state-update-active-color: "#FFA500" # orange
state-update-unknown-color: "#F44336" # red
state-update-unavailable-color: "#F44336" # red
### Vacuum ###
state-vacuum-active-color: "#FFA500" # orange
state-vacuum-docked-color: "#4CAF50" # green
state-vacuum-cleaning-color: "#FFA500" # orange
state-vacuum-paused-color: "#FFC200" # amber
state-vacuum-returning-color: "#3498DB" # blue
state-vacuum-unknown-color: "#F44336" # red
state-vacuum-unavailable-color: "#F44336" # red
### Valve ###
state-valve-active-color: "#3498DB" # blue
state-valve-unknown-color: "#F44336" # red
state-valve-unavailable-color: "#F44336" # red
### Water Heater ###
state-water_heater-eco-color: "#4CAF50" # green
state-water_heater-electric-color: "#FFA500" # orange
state-water_heater-gas-color: "#FFA500" # orange
state-water_heater-heat_pump-color: "#FFA500" # orange
state-water_heater-high_demand-color: "#FF5722" # deep orange
state-water_heater-performance-color: "#FF5722" # deep orange
state-water_heater-off-color: "#95A5A6" # grey
state-water_heater-unknown-color: "#F44336" # red
state-water_heater-unavailable-color: "#F44336" # red
### Button ###
state-button-pressed-color: "#FFA500" # orange
state-button-unknown-color: "#F44336" # red
state-button-unavailable-color: "#F44336" # red
### Sensor ###
state-sensor-battery-high-color: "#4CAF50" # green
state-sensor-battery-low-color: "#F44336" # red
state-sensor-battery-medium-color: "#FFA500" # orange
state-sensor-active-color: "#4CAF50" # green
state-sensor-idle-color: "#95A5A6" # grey
state-sensor-unknown-color: "#F44336" # red
state-sensor-unavailable-color: "#F44336" # red
### Input Entities ###
state-input_boolean-on-color: "#4CAF50" # green
state-input_boolean-off-color: "#FFA500" # orange
state-input_boolean-unknown-color: "#F44336" # red
state-input_boolean-unavailable-color: "#F44336" # red
state-input_number-active-color: "#3498DB" # blue
state-input_number-unknown-color: "#F44336" # red
state-input_number-unavailable-color: "#F44336" # red
state-input_select-active-color: "#FFC200" # amber
state-input_select-unknown-color: "#F44336" # red
state-input_select-unavailable-color: "#F44336" # red
state-input_text-active-color: "#00BCD4" # cyan
state-input_text-unknown-color: "#F44336" # red
state-input_text-unavailable-color: "#F44336" # red
### Automation and Script ###
state-automation-on-color: "#4CAF50" # green
state-automation-unknown-color: "#F44336" # red
state-automation-unavailable-color: "#F44336" # red
state-script-running-color: "#FFA500" # orange
state-script-unknown-color: "#F44336" # red
state-script-unavailable-color: "#F44336" # red
### Weather ###
state-weather-clear-night-color: "#3F51B5" # indigo
state-weather-cloudy-color: "#34495E" # blue-grey
state-weather-fog-color: "#95A5A6" # grey
state-weather-hail-color: "#81D4FA" # light blue
state-weather-lightning-color: "#FFCC00" # yellow
state-weather-lightning-rainy-color: "#3498DB" # blue
state-weather-partlycloudy-color: "#95A5A6" # grey
state-weather-pouring-color: "#1565C0" # dark blue
state-weather-rainy-color: "#3498DB" # blue
state-weather-snowy-color: "#81D4FA" # light blue
state-weather-snowy-rainy-color: "#34495E" # blue-grey
state-weather-sunny-color: "#FFC200" # amber
state-weather-windy-color: "#A5D6A7" # light green
state-weather-windy-variant-color: "#95A5A6" # grey
state-weather-exceptional-color: "#F44336" # red
state-weather-unknown-color: "#F44336" # red
state-weather-unavailable-color: "#F44336" # red
# ### Energy Dashboard Colours ###
# --energy-grid-consumption-color: #F44336; #red
# --energy-grid-return-color: #4CAF50; # green
# --energy-solar-color: #ff9800;
# --energy-non-fossil-color: #0f9d58;
# --energy-battery-out-color: #4db6ac;
# --energy-battery-in-color: #f06292;
# --energy-gas-color: #8e021b;
# --energy-water-color: #00bcd4;
# font
primary-font-family: "Roboto"
secondary-font-family: SF Pro, Roboto, system-ui
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--secondary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--secondary-font-family)"
paper-font-title_-_font-family: "var(--secondary-font-family)"
ha-card-header-font-family: "var(--secondary-font-family)"
# You must keep this to support light/dark theme
modes:
light:
# HA variables: background and sidebar
card-background-color: "#FFFFFF"
primary-background-color: "#EFEFEF"
border-color: "#E8E8E8"
# Mushroom variables
mush-rgb-disabled: 189, 189, 189
mush-rgb-snow: rgba("#95A5A6", 0.1)
# Custom variables
cstm-rgb-on-primary-text: 255, 255, 255
cstm-rgb-on-secondary-text: 220, 220, 220
cstm-rgb-on: 30, 30, 30
cstm-rgb-on-secondary: 51, 51, 51
cstm-rgb-plug-on-icon: 255, 255, 255
cstm-rgb-plug-on-background: rgba("#3498DB", 0.7)
cstm-rgb-automation-on-icon: var(--mush-rgb-white)
cstm-rgb-automation-on-background: rgba(var(--mush-rgb-black), 0.7)
cstm-rgb-bottom-nav: 255, 255, 255
dark:
# HA variables: background and sidebar
primary-background-color: "#121212"
card-background-color: "#1D1D1D"
border-color: "#2C2633"
# Mushroom variables
mush-rgb-disabled: 111, 111, 111
mush-rgb-snow: rgba(var(--mush-rgb-white), 0.7)
# Custom variables
cstm-rgb-on-primary-text: 0, 0, 0
cstm-rgb-on-secondary-text: 51, 51, 51
cstm-rgb-on: 255, 255, 255
cstm-rgb-on-secondary: 221, 221, 221
cstm-rgb-plug-on-icon: 255, 255, 255
cstm-rgb-plug-on-background: rgba("#3498DB", 0.8)
cstm-rgb-automation-on-icon: var(--mush-rgb-black)
cstm-rgb-automation-on-background: rgba(var(--mush-rgb-white), 0.8)
cstm-rgb-bottom-nav: 30, 30, 30