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
The right variable is state-binary_sensor-active-color not state-binary-sensor-active-color because domain use snake case.
Also the variable in default theme should be state-binary_sensor-active-color not state-binary_sensor-color. I will push a fix for that.
1 Like
nice!
thanks.
so a bug and a user-error 
cool.
state-binary_sensor-[on/off]-color will work too?
Yes, both work because for binary_sensor active = on and inactive = off.
nice. can confirm to work correctly now.
glad if you could push that fix.
@ piitaya
ALL my colours in my picture element cards are f**ked up again now.
How do I get them back? What are the new names of the CSS I need to use in picture elements card to get the colours defined for individual elements. I asked you directly many days ago what we should watch out for.
I looked at the Picture Elements Card - Home Assistant and it shows
"--paper-item-icon-color": pink
But that only sets the off colour. How do I set the ON colour for an individual icon like before?
I tried with
- entity: binary_sensor.bed_sensor_diane
icon: mdi:bed
style:
'state-active-color': 255,0,0
left: 85%
top: 26%
type: state-icon
it is ignored. I want the bed red when it is occupied. But I do not want all binary sensors to be red. I only want the bed icon in the picture_elements card to be red. So I cannot just change the theme colours.
This seems to work
- entity: binary_sensor.bed_sensor_diane
icon: mdi:bed
style:
'--state-binary_sensor-active-color': red
left: 85%
top: 26%
type: state-icon
I tried --state-active-color but that does not work. And the old 255,0,0 does not work either.
If this was just bleeding documented instead of me having to spend hours on this. I can accept the change as long as it is documented.
It is… check the docs, it’s listed in the release notes as well as a link.
Here’s the link
1 Like
You can also use state-binary_sensor-occupancy-on-color: red in a theme file so all occupancy binary sensors will be red. You don’t have to define them in every card.
Not for picture-elements card.
The first thing I did was put --state-active-color: red and it did not work.
So then I had to tried without – and with 255,0,0 and nothing worked.
The theme changes are documented. But the picture-elements card still requires more knowledge and it should be documented on the picture-elements card documentation because the documentation that is there is now WRONG
Feel free to open an issue or fix documentation if it’s wrong.
Things evolves and documentation can not be always up to date. I will remove reference to paper item variables in documentation as it’s not supported to avoid confusion.
HI All,
Following this conversation as after last update, my “curtains” are purple again.
I’m not so sure anymore what should be the best way to fix this now ?
Is there a solution yet?
See above in this thread: 2022.12 Color states are broken/unusable - #637 by piitaya
Or in documentation or in release notes or …
How can I change the colors of the lock with latest changes?
state-lock-active-color: "#ff8000"
state-lock-jammed-color: "#F44336"
state-lock-locked-color: '#4CAF50'
state-lock-locked-color: '#4CAF50'
state-lock-unlocked-color: '#ff8000'
state-lock-pending-color: "#FF9800"