2022.12 Color states are broken/unusable

[piitaya (Paul)]

Hello

Some news about state colors. It will change nothing if you do not use custom themes but it will help theme developers.

With the 2023.2 beta release, we did some improvements for colors :

1. No more RGB format for themes variables. You can use hexadecimal or css color directly in themes (e.g. red, amber, green)

2. Official theme support for state color variables : Home Assistant Frontend - Home Assistant. State colors can be customized at different levels : state, state domain and state domain device class. (e.g. state-person-work, state-binary_sensor-smoke-on)

3. in Lovelace card, the inactive state can be now customized (e.g. locked lock color can be customized).

[GH2user]

@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.

[randr (Jason)]

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.

[huu]

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.

[Mariusthvdb (Marius)]

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

[arganto]

@Mariusthvdb

only need to figure out how to set different inactive colors depending on a domain

state-{domain}-(active|inactive)-color

[Mariusthvdb (Marius)]

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

[piitaya (Paul)]

state-{domain}-color doesn’t exist anymore. You need to use state-{domain}-(active|inactive)-color or state-{domain}-{state}-color

[Mariusthvdb (Marius)]

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 ?

[piitaya (Paul)]

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)

1. state-{domain}-{device_class}-{state}-color
2. state-{domain}-{state}-color
3. state-{domain}-(active|inactive)-color
4. state-(active|inactive)-color

[Mariusthvdb (Marius)]

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!

[Mariusthvdb (Marius)]

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.

[piitaya (Paul)]

state-icon-color was never officially supported and I doubt it will be.

[KennethLavrsen]

@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

[ukro]

Can you please tell me how can i add this js file and where?

[KennethLavrsen]

See reply 617 in this thread from 4 days ago

[ukro]

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

[ukro]

Also didn’t work the /local/kenneth-colours.js
idk why…

[Mariusthvdb (Marius)]

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…

[ukro]

At the end i went with

Alarm panel: change background color of status button

In order to make sure this is nothing in the code that could prevent it to work could you please post the code of the whole card? Do you confirm that card_mod is indeed installed and working? EDIT: as you see in the original code I posted there is a vertical stack on top. It could be that the reference of the object we want to change color is not the same. Try to put a vertical stack in case there is none

Didn’t liked other themes than original HA