Thanks, I mistook this as meaning the part above, not the part below
1 Like
Not necessarily true. I avoiding this whole color kerfuffle by coding all my button based cards to just use --icon-active-color (or whatever it is) for onâs and --icon-color for offâs. I didnât do it on purpose either, just dumb luck.
1 Like
This is a good lesson for us to make our setups less dependent on some changes which may become breaking.
I used my personal vars in themes for special cases, they still work surely.
But everything involving âpaper-item-icon-active-colorâ is broken.
Bad news is that âpaper-item-icon-active-colorâ is gone. So it may reflect your UI as well.
2 Likes
I have 2 questions as I am also trying to make theme Developer-Proof (to not use bad words there)
Both for old Dark-Default-Theme:
-
What is a color for not turned on switch or automation? (Should be something grey like #212121 but could not find a variable for it)
-
What is a color and variable for Energy item on graph (while - light grey thing , here itâs black)
My Dark Theme:
# Colors:
--rgb-primary-color: rgb(3, 169, 244)
--rgb-accent-color: rgb(255, 152, 0)
--rgb-disabled-color: rgb(189, 189, 189)
--rgb-primary-text-color: rgb(33, 33, 33)
--rgb-secondary-text-color: rgb(114, 114, 114)
--rgb-text-primary-color: rgb(255, 255, 255)
--rgb-card-background-color: rgb(255, 255, 255)
--rgb-red-color: rgb(244, 67, 54)
--rgb-pink-color: rgb(233, 30, 99)
--rgb-purple-color: rgb(156, 39, 176)
--rgb-deep-purple-color: rgb(103, 58, 183)
--rgb-indigo-color: rgb(63, 81, 181)
--rgb-blue-color: rgb(33, 150, 243)
--rgb-light-blue-color: rgb(3, 169, 244)
--rgb-cyan-color: rgb(0, 188, 212)
--rgb-teal-color: rgb(0, 150, 136)
--rgb-green-color: rgb(76, 175, 80)
--rgb-light-green-color: rgb(139, 195, 74)
--rgb-lime-color: rgb(205, 220, 57)
--rgb-yellow-color: rgb(255, 235, 59)
--rgb-amber-color: rgb(255, 193, 7)
--rgb-orange-color: rgb(255, 152, 0)
--rgb-deep-orange-color: rgb(255, 87, 34)
--rgb-brown-color: rgb(121, 85, 72)
--rgb-grey-color: rgb(158, 158, 158)
--rgb-blue-grey-color: rgb(96, 125, 139)
--rgb-black-color: rgb(0, 0, 0)
--rgb-white-color: rgb(255, 255, 255)
--primary-color: rgb(2,136,209);
--rgb-state-default-color: rgb(68, 115, 158)
# Header:
app-header-background-color: "#000000"
app-header-text-color: rgb(229, 229, 234)
primary-text-color: "#ffffff" # buttons text, menu text and settings description text
text-primary-color: "#ffffff"
secondary-text-color: "#ffffff"
text-light-primary-color: "#ffffff"
state-on-color: "#66a61e"
state-off-color: "#ff0029"
state-home-color: "#66a61e"
state-not_home-color: "#ff0029"
card-background-color: "#1e1d1d" # card color
primary-background-color: "#000000" # color behind everything
secondary-background-color: "#8a8a8a" # left-slide menu background color
disabled-text-color: "#6f6f6f"
divider-color: rgba(225, 225, 225, 0.12)
mdc-ripple-color: "AAAAAA"
state-switch-color: "#ffd700"
state-automation-color: "#ffd700"
#state-cover-color: "#ffd700"
#state-fan-color: "#ffd700"
#state-light-color: "#ffd700"
state-binary-sensor-color: "#ffd700"
state-input-boolean-color: "#ffd700"
state-person-home-color: "#008000"
badge-person-not-home-color: "#636B75"
state-person-zone-color: "#800080"
rgb-state-light-color: var(--rgb-amber-color)
rgb-state-humidifier-color: var(--rgb-amber-color)
rgb-state-fan-color: var(--rgb-amber-color)
rgb-state-climate-fan-only-color: var(--rgb-amber-color)
rgb-state-climate-idle-color: var(--rgb-disabled-color)
rgb-state-remote-color: var(--rgb-amber-color)
rgb-state-vacuum-color: var(--rgb-amber-color)
rgb-state-media-player-color: var(--rgb-amber-color)
rgb-state-input-boolean-color: var(--rgb-amber-color)
input-idle-line-color: "#212121"
input-disabled-fill-color: "#212121"
rgb-state-sensor-battery-high-color: var(--rgb-green-color)
rgb-state-sensor-battery-low-color: var(--rgb-red-color)
rgb-state-sensor-battery-medium-color: var(--rgb-orange-color)
rgb-state-sensor-battery-unknown-color: var(--rgb-disabled-color)
# Climate:
# state-climate-auto-color: "#008000"
# state-climate-eco-color: "#00ff7f"
# state-climate-cool-color: "#2b9af9"
# state-climate-heat-color: "#ff8100;
# state-climate-manual-color: "#44739e"
# state-climate-off-color: "#8a8a8a"
# state-climate-fan_only-color: "#8a8a8a"
# state-climate-dry-color: "#efbd07"
# state-climate-idle-color: "#8a8a8a"
# Energy:
# energy-grid-consumption-color: "#488fc2"
# energy-grid-return-color: "#8353d1"
# 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"
2 Likes
more questions when what will be colored⌠
Three Battery Sensors, all of them provide a Batery Level per percentage:
These seem to be indicated correctlyâŚ
This one - is from my Car:
and this one from my vacuum robot:
All four battery sensors have the device_class: battery
So I donât think that it is because the (custom) integration is using a wrong device class - and I would expect the sensor to change itâs color just like the othersâŚ?!
What Iâve also noticed:
Other entities from the same integration might also be affected:
Shouldnât be at least the âdoor lockedâ status be in color?
1 Like
For the battery : is it in a lovelace dashboard ? Do you have state_color: true in your entities card ?
1 Like
oh⌠yes, that could it be 
Thanks⌠Will check it out right now
I donât get the change of declaration either but am very interested in this from a technical perspective.
Why is it defined as a plain number tuple without rgb() in the new variables (and than most probably used hard-coded within one other rgb() placeholder in the code) instead of having the common rgb() in the variables and use this than in the code afterwards 1:1? All the other rgba, hex, etc. are containing the declaring-type within the definition even in the related ts file. Only the new donât do it.
Perhaps Paul can explain it in more detail?
BTW Will the announced dev blog for this topic be published (or is it already, but I have overseen it)?
I think Iâve not really been affected by this issue, my latest dashboard uses a lot of mushroom template cards, and I control everything myself. However, I have had dashboards with standard cards using card-mod to set colours and I can see this will have been annoying.
On the good side, this shows a desire to move to flexible colouring, per device_class that can be built in to a theme. So, less need for card-mod and more consistency just by setting themeable variables.
Not a good way to introduce it, poor communication, some very odd colour choices, limited documentation, and some bugs that need addressing. Most issues could have been avoided with a theme that looked like 2022.11 but gave you all the variables for styling to your choice (whether guaranteed to be supported in the future, or not).
But, I think, a step in the right direction. If I were starting with HA now, Iâd rather have these options than what Iâve been fighting with up to now. Shame that the time investment for people to customise has been wasted.
Also, thereâs been much more willingness from Paul to address issues, than we normally see when a release breaks something people are passionate about.
9 Likes
I made my own themes using the Cyberpunk theme from HACS as a template. Will my themes be altered by this update?
The link to my themes: GitHub - LuxStatera/ha-themes: Home Assistant Themes
Iâd wager because your entities-card does not have the option to color the icon based on the state enabled?
EDIT: Just saw there was a non linked reply already to your post.
HA is never changing your themes, but you might have to depending on what CSS variables you are using in your theme.
Thank you I appreciate it
Itâs not gone, itâs in my theme.
Ah, itâs gone from a default theme.
1 Like
Where ??? I have no clue what you are talking aboutđł. To repair something what was not broken???
Here is the Theme with the full list of all available states:
State Colors:
modes:
light:
state-default-color: "#44739E"
state-alarm-armed-color: "#F44336"
state-alarm-arming-color: "#FF9800"
state-alarm-pending-color: "#FF9800"
state-alarm-triggered-color: "#F44336"
state-alert-color: "#F44336"
state-automation-color: "#FFC107"
state-binary-sensor-alerting-color: "#F44336"
state-binary-sensor-color: "#FFC107"
state-calendar-color: "#2196F3"
state-camera-color: "#2196F3"
state-climate-auto-color: "#4CAF50"
state-climate-cool-color: "#2196F3"
state-climate-dry-color: "#FF9800"
state-climate-fan-only-color: "#00BCD4"
state-climate-heat-color: "#FF5722"
state-climate-heat-cool-color: "#FFC107"
state-climate-idle-color: "#BDBDBD"
state-cover-color: "#9C27B0"
state-fan-color: "#00BCD4"
state-group-color: "#FFC107"
state-humidifier-color: "#2196F3"
state-input-boolean-color: "#FFC107"
state-light-color: "#FFC107"
state-lock-jammed-color: "#F44336"
state-lock-locked-color: "#F44336"
state-lock-pending-color: "#FF9800"
state-media-player-color: "#3F51B5"
state-person-home-color: "#4CAF50"
state-person-zone-color: "#2196F3"
state-remote-color: "#2196F3"
state-script-color: "#FFC107"
state-sensor-battery-high-color: "#4CAF50"
state-sensor-battery-low-color: "#F44336"
state-sensor-battery-medium-color: "#FF9800"
state-sensor-battery-unknown-color: "#BDBDBD"
state-siren-color: "#F44336"
state-sun-day-color: "#FFC107"
state-sun-night-color: "#673AB7"
state-switch-color: "#FFC107"
state-timer-color: "#FFC107"
state-update-color: "#4CAF50"
state-update-installing-color: "#FF9800"
state-vacuum-color: "#009688"
dark:
state-default-color: "#44739E"
state-alarm-armed-color: "#F44336"
state-alarm-arming-color: "#FF9800"
state-alarm-pending-color: "#FF9800"
state-alarm-triggered-color: "#F44336"
state-alert-color: "#F44336"
state-automation-color: "#FFC107"
state-binary-sensor-alerting-color: "#F44336"
state-binary-sensor-color: "#FFC107"
state-calendar-color: "#2196F3"
state-camera-color: "#2196F3"
state-climate-auto-color: "#4CAF50"
state-climate-cool-color: "#2196F3"
state-climate-dry-color: "#FF9800"
state-climate-fan-only-color: "#00BCD4"
state-climate-heat-color: "#FF5722"
state-climate-heat-cool-color: "#FFC107"
state-climate-idle-color: "#BDBDBD"
state-cover-color: "#9C27B0"
state-fan-color: "#00BCD4"
state-group-color: "#FFC107"
state-humidifier-color: "#2196F3"
state-input-boolean-color: "#FFC107"
state-light-color: "#FFC107"
state-lock-jammed-color: "#F44336"
state-lock-locked-color: "#F44336"
state-lock-pending-color: "#FF9800"
state-media-player-color: "#3F51B5"
state-person-home-color: "#4CAF50"
state-person-zone-color: "#2196F3"
state-remote-color: "#2196F3"
state-script-color: "#FFC107"
state-sensor-battery-high-color: "#4CAF50"
state-sensor-battery-low-color: "#F44336"
state-sensor-battery-medium-color: "#FF9800"
state-sensor-battery-unknown-color: "#BDBDBD"
state-siren-color: "#F44336"
state-sun-day-color: "#FFC107"
state-sun-night-color: "#673AB7"
state-switch-color: "#FFC107"
state-timer-color: "#FFC107"
state-update-color: "#4CAF50"
state-update-installing-color: "#FF9800"
state-vacuum-color: "#009688"
Iâve changed only state-binary-sensor-color.
You can play around with it and change every state to whatever you like.
13 Likes
But it does send a message!
Hats-off to the devs for taking a chance on an upgrade idea; youâll see no flaming rants from me for an application I use for free! Thank you for all your efforts!
From a feedback perspective, I truly like the concept of being able to define state colors. Like others, the contrast on some of the state colors was poor so I did end up creating a theme so I could set most of them to back to the amber color when displaying in the UI. Itâs just what I prefer.
If possible, it would be great to be able to simply select a color for the state in the UI, by entity, (much like how we have the option of selecting which binary type to use like Battery, Problem, etc.) versus creating a theme. Then weâd have best of both worlds!
10 Likes