usecase: Ive modded my main alarm_control_panel in Tile card to use some state colors, but most importantly here, to use my theme primary-color, and not use the stock primary-text-color, which is the harsh black:
it now blends in much better with some surrounding cards:
and it was as simple as:
- type: tile
entity: alarm_control_panel.ha_main_alarm
features:
- type: alarm-modes
modes:
- armed_home
- armed_away
- armed_night
- armed_vacation
- disarmed
card_mod:
style: |
ha-card {
--primary-text-color: var(--primary-color);
}
of course, this does not apply to the more-info, which is still very hard to my eyes:
so Id love to mod the more-info-alarm_control_panel too…
I did try to set things in my card-mod-theme settings, but that would be generic, and not only for this card, which is what I am looking for.
did anyone else do something like that already, please nudge me in the right direction?
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
This is an example of adjusting the state info colors…
card_mod:
style:
ha-tile-info$: |
.primary {
color: red !important;
}
.secondary {
color: grey !important;
}
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)
