1st post → link at the bottom → styles for media player
Thanks! Sorry I hadn’t found it.
Have you found it now?
Yes, Thank you! I do have one more quick one. I can’t seem to edit the ‘overflow: hidden’ of the ‘marquee-inner’ under ‘hui-marquee’ resulting in the text being cut off as pictured.
Would you know how I can get that to stop?
Thanks for your help getting me started! Was able to get everything working 100% with some alterations. Really nice way to use the Tile card with any light and visualize status and brightness. Tapping the icon toggles the light and tapping the rest of the card brings up the HomeKit light popup slider.
Here is my code for anyone that is curious:
type: tile
entity: light.table_lamp
icon_tap_action:
action: toggle
color: orange
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: ' '
size: fullscreen
content:
type: custom:light-popup-card
entity: light.table_lamp
settings: true
settingsCard:
type: custom:more-info-card
cardOptions:
entity: light.table_lamp
card_mod:
style: >
{% if states('light.table_lamp') == "on" and state_attr('light.table_lamp',
'brightness') != None %}
{% set temp = (state_attr('light.table_lamp', 'brightness') / 255 * 100) | round(0) %}
ha-card {
background-image: linear-gradient(to right, rgb(250, 225, 140) {{temp}}%, rgb(252, 239, 205) {{temp}}%);
{{ '--primary-text-color: black;' if is_state('light.table_lamp', 'on') }}
--secondary-text-color: gray;
}
{% else %}
ha-card {
{{ 'background: rgb(250, 225, 140);' if is_state('light.table_lamp', 'on') }}
{{ '--primary-text-color: black;' if is_state('light.table_lamp', 'on') }}
--secondary-text-color: gray;
}
{% endif %}
I am using it in a decluttering card with all my lights to keep things clean and easy.
3 Likes
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));
}
2 Likes
Struggling through adapting my card-mods to the new state colors / theme variables, I’m trying to regain control over the color of an automation button.
show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: automation.trigger
service_data:
entity_id: automation.bedtime_home
entity: automation.bedtime_home
name: Bedtijd
icon_height: 50px
theme: icons_red
I used to be able to control the color without card-mod, through a simple theme application:
frontend:
themes:
icons_red:
state-icon-color: '#800000'
state-icon-active-color: '#800000'
Anyone any ideas how to make this work again? (either by adapting my custom theme for red buttons, or by using card-mod)
hello, with card mode I would like to know if the lamp is on or off
do you have a code to create this?
hey, how is it possible to change the background-color?
for example “no warning”, blue
and otherwise red?
type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card {
box-shadow: none;
background-size: 100%;
}
content: >2
{% set current_count = state_attr("sensor.dwd_weather_warnings_current_warning_level", "warning_count") %}
{% set advance_count = state_attr("sensor.dwd_weather_warnings_advance_warning_level", "warning_count") %}
{% if ((current_count == 0 or current_count == None) and (advance_count == 0 or advance_count == None)) %}
**<font color=#44739e>Keine Warnungen</font>**
{% else %}
{% for i in range(current_count) %}
{% set headline = state_attr("sensor.dwd_weather_warnings_current_warning_level", "warning_" ~ loop.index ~ "_headline") %}
{% set description = state_attr("sensor.dwd_weather_warnings_current_warning_level", "warning_" ~ loop.index ~ "_description") %}
{% set level = state_attr("sensor.dwd_weather_warnings_current_warning_level", "warning_" ~ loop.index ~ "_level") %}
{% set time_start = state_attr("sensor.dwd_weather_warnings_current_warning_level", "warning_" ~ loop.index ~ "_start") | as_timestamp %}
{% set weekday_start = time_start | timestamp_custom("%w", True) | int %}
{% set time_end = state_attr("sensor.dwd_weather_warnings_current_warning_level", "warning_" ~ loop.index ~ "_end") | as_timestamp %}
{% set weekday_end = time_end | timestamp_custom("%w", True) | int %}
**<font color=#fdd835>{{ headline }}</font>**
*<font color=gray>{{
['Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'][weekday_start-1]
~ ", " ~ time_start | timestamp_custom("%H:%M") ~ " - " ~
['Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'][weekday_end-1]
~ ", " ~ time_end | timestamp_custom("%H:%M") }}</font>*
{{ description|trim }}
{% if not loop.last %}
***
{% endif %}
{% endfor %}
{% if ((current_count != 0) and (advance_count != 0)) %}{% endif %}
{% for i in range(advance_count) %}
{% set headline = state_attr("sensor.dwd_weather_warnings_advance_warning_level", "warning_" ~ loop.index ~ "_headline") %}
{% set description = state_attr("sensor.dwd_weather_warnings_advance_warning_level", "warning_" ~ loop.index ~ "_description") %}
{% set level = state_attr("sensor.sensor.dwd_weather_warnings_advance_warning_level", "warning_" ~ loop.index ~ "_level") %}
{% set time_start = state_attr("sensor.dwd_weather_warnings_advance_warning_level", "warning_" ~ loop.index ~ "_start") | as_timestamp%}
{% set weekday_start = time_start | timestamp_custom("%w", True) | int %}
{% set time_end = state_attr("sensor.dwd_weather_warnings_advance_warning_level", "warning_" ~ loop.index ~ "_end") | as_timestamp %}
{% set weekday_end = time_end | timestamp_custom("%w", True) | int %}
**<font color=#fdd835>{{ headline }}</font>**
*<font color=gray>{{
['Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'][weekday_start-1]
~ ", " ~ time_start | timestamp_custom("%H:%M") ~ " - " ~
['Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'][weekday_end-1]
~ ", " ~ time_end | timestamp_custom("%H:%M") }}</font>*
{{ description|trim }}
{% if not loop.last %}
***
{% endif %}
{% endfor %}
{% endif %}
Im at a loss trying to get these two icons to stay the same color regardless of which one is active.
I tried this but it didnt work
card_mod:
style: |
ha-icon-button.state-active {
color: white !important;
}
hey Ildar,
testing locally too…
did we already find the subsitute for paper-icon-active-color?
card_mod:
style:
hui-buttons-header-footer $ hui-buttons-base $: |
.ha-scrollbar {
justify-content: space-evenly;
height: 50px;
align-content: center;
margin: -8px 0px 0px 0px;
--ha-chip-background-color: var(--primary-color);
--ha-chip-text-color: var(--card-background-color);
--paper-item-icon-active-color: red;
--secondary-text-color: var(--card-background-color);
}
posting a footer mod here, but I believe other card mods also use this variable?
It works like this:
type: entity
entity: input_boolean.style
style: |
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); } }
.header .icon {
{% if is_state('input_boolean.style','on') %}
animation: rotation 1.5s linear infinite;
{% endif %}
}
You’re welcome.
1 Like
Have not tried to find a substitution yet, in my TODO list from yesterday.
Will post an update here.
sure.
in my themes I think I managed t replace that variable with state-icon-color:
didnt check that yet in the above card-mod, as I couldn’t find it listed in inspector. will test anyway 
update: nope, doest work… in several variants…
I have a strange feeling that it is meaningless to remake HA setups now since some current decisions in HA themeing seem to look a bit unstable & not thoughtful…
its a bit odd, yes.
also odd, is that it is still listed here: frontend/styles.ts at 1dbe8c9b64b3094745ffedc441f002acb4da1b8f · home-assistant/frontend · GitHub
and yet, it doesn’t work anymore in the card-mod
found it:
state-script-color: '#f00000'
to themes added fixes it
edit
ofc this is the case only because my entity is a script. Forgot to mention that
and even “–state-icon-active-color” is NOT exposed.
Something dark is happening there… Something evil…
I could see it popup in inspector upon running the script, is only visible for a short period of the script, so had to be quick.
Adding anything like that in the card-mod wouldn’t work though. So we need to theme those colors depending on the domain.
I made a flashing tile card icon:
type: tile
entity: input_boolean.style
style: |
@keyframes blinker { 50% { opacity: 0; } }
ha-tile-icon {
{% if is_state('input_boolean.style', 'on') %}
animation: blinker 2s linear infinite;
{% else %}
{% endif %}
}
I couldn’t make it spin, though.
Edit: But it doesn’t flash on my phone.
Well, at least the flashing works in the browser:
