this is more generic than the alarm_control_panel, I just found the same for the climate Tile card
type: tile
entity: climate.voorkamer
card_mod:
style: |
.option selected {
color: red;
}
ha-card {
--primary-text-color: var(--primary-color);
}
which makes the main card blend in, but again, the more-info-climate is using primary-text-color default,
so need to modify that too.
changed Topic title to reflect the wider impact
while I was at it, I had to change the card_mod for the Tile fan card…as it stopped coloring accordingly, and the icon didnt animate anymore somehow
maybe its not as optimal as it could be, but it is robust and I include it on all of my fan tiles:
type: tile
entity: fan.woonkamer
card_mod: !include /config/dashboard/card_mods/tile_fan_animate.yaml
and this include (note the required card_mod: is already in the main cards config…)
# tile_fan_animate
style:
hui-card-features$:
hui-fan-speed-card-feature$: |
ha-control-slider {
--control-slider-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{%- endif %}
{%- else %} var(--state-inactive-color)
{%- endif %} !important;
--control-slider-background:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{%- endif %}
{%- else %} var(--state-inactive-color)
{%- endif %} !important;
}
.: |
ha-tile-icon {
--tile-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{% endif %}
{% else %} var(--state-inactive-color)
{% endif %};
}
ha-state-icon {
animation:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set base =
'rotation infinite linear' %}
{% if perc <= 15 %} 4s {{base}}
{%- elif perc <= 33 %} 3s {{base}}
{%- elif perc <= 67 %} 1.5s {{ base}}
{%- else %} 0.75s {{base}}
{% endif %}
{% else %} none
{% endif %};
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
Ofc, and thats why I post it here, this also need a more-info mod yet, aas it now only colors the main tile
1 Like
This is an example of adjusting the state info colors…
card_mod:
style:
ha-tile-info$: |
.primary {
color: red !important;
}
.secondary {
color: grey !important;
}
1 Like
jeells102
March 5, 2024, 2:03pm
5
So I’m trying to do something very similar, but change the color of the selected tile option for the alarm panel, and I can’t get the .option selected parameter updated with any new colors.
I’m using the rounded theme but unsure why it’s not changing the colour. Any ideas?
card:
type: tile
entity: '[[[ return entity.entity_id; ]]]'
color: red
features:
- type: alarm-modes
modes:
- armed_away
- armed_night
- disarmed
card_mod:
style: |
ha-card .content {
display: none;
} ha-card {
width: 200px;
background: transparent;
border-radius: 0px;
} ha-card.active {
height: 40px;
}
.option selected {
color: red;
}
tile does not support that javascript syntax on the entity…
There are several ways, but this is one for multiple colors.
card_mod:
style:
hui-card-features $:
hui-alarm-modes-card-feature $:
ha-control-select $: |
.option:nth-child(1)::before {
background-color:red !important;
}
.option:nth-child(2)::before {
background-color: green !important;
}
.option:nth-child(3)::before {
background-color: yellow !important;
}
this is another way for a single color
card_mod:
style:
hui-card-features $:
hui-alarm-modes-card-feature $:
ha-control-select$: |
.container {
color: grey !important;
--control-select-color: red !important;
}
for the climate tile:
card_mod:
style:
hui-card-features $:
hui-climate-preset-modes-card-feature $:
ha-control-select$: |
.container {
--control-select-color: red;
/*--control-select-selected-opacity: 0.5; # sets full button opacity */
/*color: green; #for non selected control icons*/
}
.: |
ha-card {
--primary-text-color: var(--primary-color);
}
!important seems no required
I do want the icon to have opacity .5 or so, and not 1. Need to find the correct element though. Or maybe even set it to another color, because no need for the white when the button has a background like that
note that we can use--control-select-selected-opacity: 0.5;
but that filters the full button, and not only the icon, so is not very nice
This uses the nth child method, but you can ignore that. It also get so the temperature settings and the primary/secondary tile info. There may a more direct ways for some of these, just haven’t played with the mod enough.
features:
- type: target-temperature
- type: climate-hvac-modes
hvac_modes:
- heat
- cool
- heat_cool
- 'off'
type: tile
entity: climate.living_room
hide_state: false
show_entity_picture: false
tap_action:
action: toggle
card_mod:
style:
hui-card-features$:
hui-target-temperature-card-feature$:
ha-control-number-buttons$: |
.value {
font-size: 13px !important;
font-weight: 400;
background: hsl(0, 3%, 12%) !important;
width: 100px !important;
{% set d = states('climate.living_room') %}
{% if (d == 'heat') %}
color: orange !important;
{% elif (d == 'cool') %}
color: deepskyblue !important;
{% elif (d == 'heat_cool') %}
color: cyan !important;
{% else %}
color: red !important;
{% endif %}
}
.minus {
padding-right: 0;
color: deepskyblue !important;
left:0px !important;
}
.plus {
color: red !important;
height: 40px !important;
left:70px !important;
}
hui-climate-hvac-modes-card-feature$:
ha-control-select $: |
.option:nth-child(1)::before {
background-color:yellow !important;
}
.option:nth-child(2)::before {
background-color: darkorange !important;
}
.option:nth-child(3)::before {
background-color: deepskyblue !important;
}
.option:nth-child(4)::before {
background-color: gray !important;
}
.container {
color: grey !important;
background: hsl(0, 3%, 12%) !important;
opacity: 100% !important;
}
.option.selected {
color: black !important;
}
ha-tile-info$: |
.primary {
font-size: 15px !important;
font-weight: 300 !important;
color: orange !important;
padding-bottom: 4px;
}
.secondary {
font-size: 12px !important;
color: grey !important;
}
.: |
ha-card {
--tile-color: orange !important;
--mdc-ripple-color: grey !important;
background: #292727 !important;
}
1 Like
having some trouble to find the best thread for this question, but here goes:
how can I set a border radius from my theme to the select buttons in Tile…
I want it to be like this top temp setter:
but cant find the correct card_mod… on div#input.
I’d love to also set it on the other buttons of course.
Given the fact I need the same style throughout my config, I had hoped to find a theme variable somewhere , and set it there, and be done with it. No such luck yet…
seems hard-coded at 8px, and not follow any theme variable at all?
or is it the 10px we see here:
edit
this works for the temp setter and the container for the buttons:
card_mod:
style:
hui-card-features $ hui-target-temperature-card-feature $: |
ha-control-number-buttons {
/*color: green;*/
--control-number-buttons-background-color: skyblue;
--control-number-buttons-border-radius: var(--ha-card-border-radius);
}
hui-card-features $ hui-climate-preset-modes-card-feature $: |
ha-control-select {
--control-select-background: skyblue;
/*background: skyblue;*/
}
hui-card-features $:
hui-climate-preset-modes-card-feature $:
ha-control-select$: |
.container {
/*background: green;*/
/*--control-select-background: green;*/
--control-select-border-radius: var(--ha-card-border-radius);
--control-select-button-border-radius: var(--ha-card-border-radius);
/*--control-select-color: red;*/
/*--control-select-selected-opacity: 0.5; # sets full button opacity */
/*color: green; #for non selected control icons*/
}
or:
--control-select-border-radius: var(--ha-card-border-radius);
for that matter, and shows as:
next to find the same for the selector buttons themselves
opened a FR for this: have Tile card containers and buttons follow HA border-radius theme variable · home-assistant/frontend · Discussion #21357 · GitHub
so there is some progress on the above alarm and climate tiles,
but my fan control is really troublesome…
style:
hui-card-features $:
hui-fan-speed-card-feature $:
ha-control-slider$: |
.container {
--control-slider-border-radius: var(--ha-card-border-radius);
}
hui-card-features$:
hui-fan-speed-card-feature$: |
ha-control-slider {
--control-slider-color: red !important;
--control-slider-background: green !important;
}
sets the border-radius on the container but this using the same Dom path in them seems wrong, and I dont know how to write this in a better way. Makes it very wobbly:
more-over, I still need the border-radius on the slider itself, and I can find the correct element, or path to the slider-track-bar.start …
this works:
style:
hui-card-features $:
hui-fan-speed-card-feature $:
ha-control-slider$: |
.container {
--control-slider-border-radius: var(--ha-card-border-radius);
}
.slider .slider-track-bar {
border-radius: 0px !important;
}
.slider {
--control-slider-color: <template> !important;
--control-slider-background: <template> !important;
}
and doesnt whobble…
pff how complex this is without a sane variable, or without Tile card follow main theme settings…
is there anyway to add styling to the tile card using Themes? i cant find any examples of what to add to my themes folder, just want to change font size really?
I also would very much like the theme option added to the Tile Card.
there are several theme variables used in the tile card, so yes you can use those.
for other/more Feature requests, please keep this topic clean and post those in the correct discussions thread in the Frontend repo (where Frontend FR’s go, opposed to the FR section here in the community)
related:
separate post for clarity, and because it is unexpectedly difficult…
trying to set a border-radius of my theme to the buttons on the humidifier, I can not immediately find a way to do so:
- type: tile
entity: humidifier.badkamer
card_mod:
style:
hui-card-features $:
hui-humidifier-toggle-card-feature $:
ha-control-select$: |
.container {
border-radius: var(--ha-card-border-radius);
}
.opti…
Mar1us
January 20, 2025, 12:10pm
15
thank you for the card-mod config. For me only the animation is needed. So i used this:
card_mod:
style:
.: |
ha-state-icon {
animation:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set base =
'rotation infinite linear' %}
{% if perc <= 15 %} 4s {{base}}
{%- elif perc <= 33 %} 3s {{base}}
{%- elif perc <= 67 %} 1.5s {{ base}}
{%- else %} 0.75s {{base}}
{% endif %}
{% else %} none
{% endif %};
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
what is working except one thing if the fan is set to auto the animation is not working but if i set a speed and change it back to auto the animation is working.
Does changing this line help?From: {% if is_state(config.entity,'on') %}
To {% if states(config.entity) != 'off' %}
When you set the fan to Auto what do you see in Developer Tools for the fan entity?
so its not working in auto, but it is…?
cant say I have any issues with it ar any speed. I havent touched since posting here (only changed thing was card_mod)
my other card for the same device, with more detail in the secondary:
Mar1us
January 20, 2025, 2:17pm
20
found the issue if the fan is set to auto the percentage is going to null
this helped:
ha-state-icon {
animation:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity, 'percentage') | int(0) %}
{% set base = 'rotation infinite linear' %}
{% if perc == 0 %} 6s {{ base }} {# Fallback for null or 0 percentage #}
{% elif perc <= 15 %} 4s {{ base }}
{% elif perc <= 33 %} 3s {{ base }}
{% elif perc <= 67 %} 1.5s {{ base }}
{% else %} 0.75s {{ base }}
{% endif %}
{% else %}
{% endif %};
}
Right, could be a thing implemented differently per device
1 Like
