@piitaya
Great work on the coding and the docs so we can now set our own colours for almost everything it seems. Maybe with hindsight this moment would have been a better time to roll out the changes as happened in 2022.12.
Thank you! I cannot tell you how many times ive looked at my dashboard and thought my alarm was in a offline state or not set to armed or not armed when it was armed. will be happy to get things how im used to seeing them.
Would the developers consider re-think about the grey coloir. This traditionally it use as being disable or non-functional. The term “grey-out” have a meaning when something is not working. … sorry about the spelling colour above, i try to edit it but my delete button is grey-out.
thanks Paul,
noticed these were merged: Allow coloring inactive states in dashboard cards by piitaya · Pull Request #15177 · home-assistant/frontend · GitHub and Entity state colors theming by piitaya · Pull Request #14831 · home-assistant/frontend · GitHub
inactive color customization is extremely appreciated, only need to figure out how to set different inactive colors depending on a domain
state-{domain}-(active|inactive)-color
well, I had my opened covers color gold with:
state-cover-color: '#ffd700'
and currently, they all are purple again.
trying the inactive (for closed) to be green:
state-cover-color: '#ffd700'
state-cover-inactive-color: '#008000' #green
does show the inactive/closed to be green, but the regular still being purple.
have to change that to
state-cover-active-color: '#ffd700'
state-cover-inactive-color: '#008000' #green
so, when deviating from the default color, we need to do that for both?
btw, color names work too now:
state-cover-active-color: gold
state-cover-inactive-color: maroon
which is very very nice indeed
state-{domain}-color doesn’t exist anymore. You need to use state-{domain}-(active|inactive)-color or state-{domain}-{state}-color
is it ‘or’ meaning we can use both
state-cover-active-color And state-cover-open-color
or, is that depending on domain, so eg we use
state-cover-active-color but for eg automation we need to use state-automation-on-color?
in the process of rewriting this:
state-icon-color: '#636B75'
# rgb-state-switch-color: 255, 215, 0 #(paper-item-icon-active-color: gold)
# main-on-color: '#ffd700' #255, 215, 0
state-script-color: '#f00000' # red
state-switch-color: '#ffd700' # gold
state-automation-color: '#ffd700'
state-cover-active-color: gold #'#ffd700'
state-cover-inactive-color: maroon #'#008000' #green
state-fan-color: '#ffd700'
state-light-color: '#ffd700'
state-binary-sensor-color: '#ffd700'
state-input-boolean-color: '#ffd700'
state-group-color: '#ffd700'
state-update-color: '#f44336' #red
state-person-home-color: '#008000'
state-person-not-home-color: '#636B75'
state-person-zone-color: '#7b68ee' #mediumslateblue
badge-person-home-color: '#008000'
badge-person-not-home-color: '#636B75' #var(--state-person-not-home-color)
badge-person-zone-color: '#7b68ee' #mediumslateblue
havent checked yet, but can we now also use theme variables?
state-cover-active-color: var(--primary-color)
if these are set to use color names ?
You can use any variable format for every colored domain. It’s just a priority order.
Here’s the order (available in the front end doc too)
state-{domain}-{device_class}-{state}-colorstate-{domain}-{state}-colorstate-{domain}-(active|inactive)-colorstate-(active|inactive)-color
5 Likes
cool.
can confirm that using:
state-switch-on-color: pink
state-switch-off-color: blue
or
state-switch-active-color: pink
state-switch-inactive-color: blue
both work
Please add a section on the matter to the release notes… Ive asked in #beta, button sure that got picked up
Its big news indeed!
wondering if
state-icon-color: '#636B75'
is still doing anything, or should we set that to
state-icon-active-color: '#636B75'
too?
it would help if we could set the ‘default’ on/active color like that, and not have to set it for each domain
we can now even fix this:
case: 2 individual covers, assumed state, which are also grouped inside a group cover. since their state is unknown, they get colored according to inactive, which is not very useful.
state-cover-active-color: gold
state-cover-inactive-color: maroon
yet, we can now set:
state-cover-open-color: gold
state-cover-unknown-color: pink
state-cover-closed-color: maroon
.
it’s a bit more tweaking, but way more effective and concise.
huge jump forward I would say.
state-icon-color was never officially supported and I doubt it will be.
@piitaya do I need to be concerned about changes related to Picture Elements Card?
In Picture Elements we are many that set both on and off state colours on individual entities
I am actually not that concerned about the colours used in entity cards etc. It is my picture elements cards that I am extremely sensitive
In December release the css names of the on state changed but the off state remained like it was
Example
- entity: cover.kitchen_curtain
style:
'--rgb-state-cover-color': 255, 152, 0
'--paper-item-icon-color': green
left: 44%
top: 4%
tap_action:
action: toggle
type: state-icon
If CSS names change also for off state - then I am personally OK with having to fix my setup - as long as it is documented what the new names are and referenced in release note
Can you please tell me how can i add this js file and where? 
See reply 617 in this thread from 4 days ago
I went for changing the default theme
Classic:
state-alarm-armed-color: '#F44336' # Red
state-alarm-arming-color: '#FF9800' # Orange
state-alarm-disarmed-color: '#4CAF50' # Green
state-alarm-pending-color: '#FF9800' # Orange
state-alarm-triggered-color: '#F44336' # Red
state-alert-color: '#F44336' # Red
# Header:
app-header-background-color: rgb(17, 17, 17)
app-header-text-color: rgb(198, 203, 210)
app-header-selection-bar-color: var(--primary-color)
app-header-edit-background-color: rgb(136, 136, 136)
# Main Interface Colors
primary-color: rgb(138, 180, 248)
primary-background-color: rgb(17, 17, 17)
secondary-background-color: rgb(28, 28, 28)
divider-color: var(--primary-background-color)
accent-color: var(--primary-color)
# Text
primary-text-color: rgb(242, 242, 242)
secondary-text-color: rgb(166, 166, 166)
text-primary-color: var(--primary-text-color)
disabled-text-color: rgba(184, 190, 199, 0.4)
# Sidebar Menu
sidebar-icon-color: rgb(68, 115, 158)
sidebar-text-color: rgb(198, 203, 210)
sidebar-background-color: rgb(28, 28, 28)
sidebar-selected-icon-color: rgb(138, 180, 248)
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
# Buttons
paper-item-icon-color: rgb(68, 115, 158)
paper-item-icon-active-color: rgb(138, 180, 248)
mdc-button-outline-color: rgb(138, 180, 248)
# States and Badges
state-icon-color: var(--paper-item-icon-color)
state-icon-active-color: var(--paper-item-icon-active-color)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: rgb(138, 180, 248)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
# Labels
label-badge-background-color: var(--secondary-background-color)
label-badge-text-color: var(--primary-text-color)
label-badge-red: rgb(208, 101, 104)
label-badge-green: rgb(128, 200, 132)
label-badge-blue: rgb(138, 180, 248)
label-badge-yellow: rgb(223, 194, 113)
label-badge-gray: rgb(95, 98, 103)
# Cards
card-background-color: rgb(28, 28, 28)
ha-card-background: rgb(28, 28, 28)
ha-card-border-color: rgb(42, 43, 46)
paper-dialog-background-color: var(--card-background-color)
paper-listbox-background-color: var(--card-background-color)
paper-card-background-color: var(--card-background-color)
# Switches
switch-checked-button-color: rgb(138, 180, 248)
switch-checked-track-color: rgb(138, 180, 248)
switch-unchecked-button-color: rgb(172, 176, 185)
switch-unchecked-track-color: rgb(154, 160, 166)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
data-table-background-color: var(--primary-background-color)
# Dropdowns
material-background-color: var(--table-row-background-color)
material-secondary-background-color: var(--table-row-alternative-background-color)
mdc-theme-surface: var(--secondary-background-color)
# Pre/Code
markdown-code-background-color: rgb(17, 17, 17)
code-editor-background-color: rgb(17, 17, 17)
# Checkboxes
mdc-checkbox-unchecked-color: rgb(68, 115, 158)
mdc-checkbox-disable-color: var(--disabled-text-color)
mdc-select-fill-color: rgb(42, 43, 46)
mdc-select-ink-color: var(--primary-text-color)
mdc-select-label-ink-color: var(--secondary-text-color)
mdc-select-idle-line-color: var(--primary-text-color)
mdc-select-dropdown-icon-color: var(--secondary-text-color)
mdc-select-hover-line-color: var(--accent-color)
mdc-text-field-fill-color: var(--mdc-select-fill-color)
# Input
input-fill-color: var(--secondary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-idle-line-color: var(--primary-text-color)
input-hover-line-color: var(--accent-color)
#RGB
rgb-primary-text-color: 68, 115, 158
rgb-primary-color: 68, 115, 158
Also didn’t work the /local/kenneth-colours.js
idk why…
btw, Arganto, could you please help me out in my quest for hiding some menu items (in card-mod-theme)
trying to zoom into the new Assist icon and remove it:
mwc-icon-button[title="Helpen"] {
{% if is_state('input_boolean.hide_assist','on') %}
display: none;
{% endif %}
}
/* /app-header/app-toolbar/ha-icon-button[2]//mwc-icon-button//button */
or use the aria-label in the button, but cant make it happen…
At the end i went with
Didn’t liked other themes than original HA
would there be any reason the:
state-binary-sensor-active-color: pink
does not work? or state-binary-sensor-on-color: pink for that matter.
either in Glance or entities, using state_color: true
I see frontend/ha-style.ts at bbb9cfb2c25808f880f8c62526cb11010427948c · home-assistant/frontend · GitHub only has state-binary-color set to amber, so I also tried
state-binary-sensor-color: pink
obviously, but even then, the amber remains.
Please give us the on/active off/inactive variants for binary_sensor…
seems a bug when reading Entity state colors theming by piitaya · Pull Request #14831 · home-assistant/frontend · GitHub mentions we can color the binary-sensor on state