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;
}
