2022.12 Color states are broken/unusable

Configuration
759

you can try card_mod with if / else…
something like that:

type: tile
entity: sensor.solaredge_inverter_status_description
name: Wechselrichter Status
vertical: false
color: purple
card_mod:
  style: |
    .tile {
      {% if is_state('sensor.solaredge_status', '1') %}
        --tile-color:var(--red-color);
      {% elif is_state('sensor.solaredge_status', '2') %}
        --tile-color:var(--indigo-color);
      {% elif is_state('sensor.solaredge_status', '3') %}  
        --tile-color:var(--light-green-color);
      {% elif is_state('sensor.solaredge_status', '4') %}  
        --tile-color:var(--green-color);
      {% elif is_state('sensor.solaredge_status', '5') %}  
        --tile-color:var(--lime-color);
      {% elif is_state('sensor.solaredge_status', '6') %}  
        --tile-color:var(--orange-color);
      {% elif is_state('sensor.solaredge_status', '7') %}  
        --tile-color:var(--red-color);
      {% elif is_state('sensor.solaredge_status', '8') %}  
        --tile-color:var(--orange-color);
      {% endif %}
760

card_mod doenst seems to work on android app, or is it?

761

Would wonder if not.

762

I am happy to report that colour states are no longer broken/unusable for me.

The available theme variables are now excellent.

Thank you for listening to our feedback.

3 Likes
763

I haven’t faced any issues on Android App.
MAYBE - you need to reload your UI / Cache - it could be that some state colors are not immediately changed on the android companion app… Have faced something like that, too… but after closing the app completely and reopen it, it has worked well

764

that is exactly what these theme color variables can do? set them in themes, and use those themes either auto dark/light, or with any other granularity you should wish.

There is no need for card_mod if all you need is to change a couple of color variables during day/night.
just set them in the appropriate color setting and see the changing of the themes change your tiles…

change colors depending on state is another matter entirely, and probably even out of scope of this thread…

765

And how can I set the color of the binary sensors? They are yellow now.
Also the mediaplayer icon doesn’t work anymore.

I use a theme.yaml to change the colors for day and night. After the last update the colors changed again.
How can I change these colors back to the color I want?
I’ve tried these settings but that doesn’t work.
I want them dark blue at day and orange at night.

Icons

paper-item-icon-color: ‘#6184bf’ # Grey blue Off var(–text-dark-color) #CED2E7
paper-item-icon-active-color: ‘#0021ff’ # Blue var(–accent-color)
state-icon-color: ‘#6184bf’
state-icon-active-color: ‘#0021ff’
state-switch-color: ‘#0021ff’
state-switch-active-color: ‘#0021ff’
state-automation-color: ‘#0021ff’
state-automation-active-color: ‘#0021ff’
state-cover-color: ‘#0021ff’
state-fan-color: ‘#0021ff’
state-light-color: ‘#0021ff’
state-binary-sensor-color: ‘#0021ff’
state-binary-sensor-alerting-color: ‘#0021ff’
state-binary-sensor-on-color: ‘#0021ff’
state-input-boolean-color: ‘#0021ff’
state-person-home-color: ‘#0021ff’
state-group-color: ‘#0021ff’
state-media-player-color: ‘#0021ff’
state-media-player-active-color: ‘#0021ff’
state-media_player.denon_avr_x1200w-active-color: ‘#0021ff’
badge-person-not-home-color: ‘#0021ff’

icon colors
icon colors998×169 29.9 KB

766

read several posts back…

use state-binary_sensor-etcetc

see 2022.12 Color states are broken/unusable - #695 by piitaya

767

to clarify marius… You have - in binary-sensor when it should be _ … binary_sensor

1 Like
768

sorry…

elaborating there, I dont think there is such a thing as binary_sensor-alerting-color in frontend/ha-style.ts at 791fd102c6596c813109c52911d6f142996f91ab · home-assistant/frontend · GitHub

you might want to edit that in your theme too, change it to either
state-alert-on-color, or maybe any of the other device_class binaries.

769

I have this in my config.yaml

> # switch GFT
>   - platform: template
>     sensors:
>       gft:
>         friendly_name: "GFT"          
>         value_template: '{{ (((now() + timedelta( days = 2 )).strftime("%U") | int) / 2) == (((now() + timedelta( days = 2 )).strftime("%U") | int) / 2) | round(0) }}'
>         icon_template: mdi:food-apple

What to put in the theme.yaml?

770

no idea, what do you want?

(btw, please use the </> button above on that post, so we can understand it better)

771

I have now this in my theme.yaml for the light theme.
Still yellow for all binary sensors.

  # Icons
  paper-item-icon-color: '#6184bf'                                                # Grey blue Off var(--text-dark-color) #CED2E7
  paper-item-icon-active-color: '#0021ff'                                         # Blue var(--accent-color)
  state-icon-color: '#6184bf'
  state-icon-active-color: '#0021ff'
  state-switch-color: '#0021ff'
  state-switch-active-color: '#0021ff'
  state-automation-color: '#0021ff'
  state-automation-active-color: '#0021ff'
  state-cover-color: '#0021ff'
  state-fan-color: '#0021ff'
  state-light-color: '#0021ff'
  state-alert-on-color: '#0021ff'
  state-binary_sensor-alerting-color: '#0021ff'
  state-input-boolean-color: '#0021ff'
  state-person-home-color: '#0021ff'
  state-group-color: '#0021ff'
  state-media-player-color: '#0021ff'
  state-media-player-active-color: '#0021ff'
  state-media_player.denon_avr_x1200w-active-color: '#0021ff'
  badge-person-not-home-color: '#0021ff'
772

well, you only defined alerting color

773

Just added an extra rule, nothing changed.
Device_class is None.
Also media player color doesn’t work anymore after the update.

state-binary_sensor-color: '#0021ff'
774

You aren’t following the docs. state-{domain}-color is not a valid option. Please read the docs.

image

775

Yes, that was the solution.
Thanks for your patience and help.
Just added these 2 rules

state-binary_sensor-active-color:
state-media_player-active-color:
776

Thank you for reply.
I have tested it again, stoped the app,cleared the cache, the color of disarm is gray on the phone with card_mod. On PC its green how i modded it…

777

hm… I cannot confirm this case - in my Companion App all state “individual” state colors that I’ve set with Card_mod are working as expected.

But if you want to define the “disarm” globally for all alarm panels, I would consider not to use card_mod in that particular case.
You could just use it within your configuration.yaml or within your themes file…

So for example with:

frontend:
  themes:
    my_theme:
      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
1 Like
778

I’m trying to change my light unavailable colour away from transparent.

I have added this to my theme:

state-light-unavailable-color: '#bdbdbd' # Silver

but I am still getting a transparent history for unavailable lights. What have I done wrong?