Desperate attempts of dealing with new theme variables
In 2022.12.0 the "--paper-item-icon-active-color" was removed w/o any warnings like “this variable is deprecated and will be removed on 2022.12”.
And new variables are defined like “255,255,255” instead of “rgb(255,255,255)” or “#ffffff” or “red”.
Funny that some old variables are still defined in a “traditional” way:
and new ones are like:
According to some tests, users may specify a “non-rgb” variable (kind of “proxy” for newly added variable) - see this example:
test_new_colors_theme:
# rgb-state-binary-sensor-alerting-color: 0,255,0 # OK
# rgb-state-binary-sensor-alerting-color: rgb(0,255,0) # failed
# state-binary-sensor-alerting-color: rgb(0,255,0) # failed
# state-binary-sensor-alerting-color: 'rgb(0,255,0)' # failed
state-binary-sensor-alerting-color: '#00ff00' # OK
# state-binary-sensor-alerting-color: green # failed
# state-binary-sensor-alerting-color: 'green' # failed
i.e. the "state-binary-sensor-alerting-color" is a “proxy” to set a “traditional” color for "rgb-state-binary-sensor-alerting-color" variable - although these proxies are not mentioned in the default theme file - not to mention a fact that theme’s variables are NOT documented.
Since ANY variable may be simply removed from a default theme by a decision of “UX team”, it is advised to specify alternative ways - for safety.
What is an “alternative definition”?
For many UI elements some CSS properties are specified like
some_property: var(--some-theme-variable, some_default_value)
i.e. if some "--some-theme-variable" does not exist - the "some_default_value" is used.
Some fictional examples:
color: var(--accent-color,rgb(0,0,255))
color: var(--accent-color,red)
color: var(--accent-color,#ff0000)
Now let’s try to define alternative values when using newly added variables:
a) w/o alternative - need to place a variable inside “rgb()” function:
- type: entities
entities:
- sun.sun
card_mod:
style: |
ha-card {
color: rgb(var(--rgb-state-sensor-battery-medium-color));
}
This works:
b) Trying to use a non-rgb “proxy” for a variable:
- type: entities
entities:
- sun.sun
card_mod:
style: |
ha-card {
color: var(--state-sensor-battery-medium-color));
}
Failed - these “proxies” are NOT exposed for external use.
c) Trying to define alternatives:
- type: entities
entities:
- sun.sun
card_mod:
style: |
ha-card {
color: rgb(var(--rgb-stte-sensor-battery-medium-color,255,0,255));
}
i.e. w/o any quotes (read here).
This works too.
And this seems to be the only way - the “var()” function seems not to accept these values:
"255,0,255"
'255,0,255'
(255,0,255)
Note that "--rgb-stte" typo - this is a way to use an alternative value (like this variable does not exist).
Conclusion - the latest shift to “255,255,255” format is a decision which makes a life a bit more complex for “card-mod” users.
Possibilities are:
– do not use these newly added variables - use only explicitly defined colors;
– use these newly added variables - but be ready to replace them “one lucky day” - unless you provide an alternative definition (described above);
– use only own variables in a custom theme.
Users are welcome to join in this issue (was created w/o any hope that it will change smth):
Bonus: card for testing
Code & Screenshot
type: entities
title: var()
entities:
- type: section
label: "var(--accent-color)"
- entity: sun.sun
card_mod:
style: |
:host {
color: var(--accent-color);
}
- type: section
label: "var(--accent-color,green)"
- entity: sun.sun
card_mod:
style: |
:host {
color: var(--accentcolor,green);
}
- type: section
label: "var(--accent-color,rgb(0,255,0))"
- entity: sun.sun
card_mod:
style: |
:host {
color: var(--accentcolor,rgb(0,255,0));
}
- type: section
label: "var(--accent-color,#00ff00)"
- entity: sun.sun
card_mod:
style: |
:host {
color: var(--accentcolor,#00ff00);
}
- type: section
label: "rgb(var(--rgb-state-sensor-battery-medium-color))"
- entity: sun.sun
card_mod:
style: |
:host {
color: rgb(var(--rgb-state-sensor-battery-medium-color));
}
- type: section
label: "var(--state-sensor-battery-medium-color)"
- entity: sun.sun
card_mod:
style: |
:host {
color: var(--state-sensor-battery-medium-color);
}
- type: section
label: "rgb(var(--rgb-state-sensor-battery-medium-color,var(--rgb-green-color)))"
- entity: sun.sun
card_mod:
style: |
:host {
color: rgb(var(--rgb-state-sensor-battery-mediumcolor,var(--rgb-green-color)));
}
- type: section
label: "rgb(var(--rgb-state-sensor-battery-mediumcolor,0,255,0))"
- entity: sun.sun
card_mod:
style: |
:host {
color: rgb(var(--rgb-state-sensor-battery-mediumcolor,0,255,0));
}
