🔹 Card-mod - Add css styles to any lovelace card

JvH · December 9, 2022, 1:59pm

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)

Mart1 · December 9, 2022, 4:28pm

hello, with card mode I would like to know if the lamp is on or off
do you have a code to create this?

MrThiemann · December 10, 2022, 5:14pm

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

arlost · December 10, 2022, 5:18pm

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

Mariusthvdb · December 10, 2022, 10:09pm

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?

dolodobendan · December 10, 2022, 10:09pm

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.

Ildar_Gabdullin · December 10, 2022, 10:20pm

@dolodobendan
Solid work.
Added your example in consolidation post:

Ildar_Gabdullin · December 10, 2022, 10:21pm

Have not tried to find a substitution yet, in my TODO list from yesterday.
Will post an update here.

Mariusthvdb · December 10, 2022, 10:25pm

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…

Ildar_Gabdullin · December 10, 2022, 10:31pm

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…

Mariusthvdb · December 10, 2022, 10:38pm

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

Ildar_Gabdullin · December 10, 2022, 10:45pm

and even “–state-icon-active-color” is NOT exposed.
Something dark is happening there… Something evil…

Mariusthvdb · December 10, 2022, 10:46pm

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.

dolodobendan · December 11, 2022, 12:36am

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:

Mariusthvdb · December 11, 2022, 11:18am

nice.

I am a bit worried about the ‘open’ else here though.
We’ve discussed this with Thomas before, and as far as I can remember, the outcome was we only need the if.

  .header .icon {
  {% if is_state('input_boolean.style','on') %}  animation: rotation 1.5s linear infinite;
  {% endif %}  
  }

and the card-mod resource takes care of that in the else case…

please test that if you would, I think it will work without error in the inspector

dolodobendan · December 11, 2022, 12:57pm

I am a bit worried about the ‘open’ else here though.
We’ve discussed this with Thomas before, and as far as I can remember, the outcome was we only need the if .

That’s just a remnant, before I created a bool for this, I just used a random sensor (like weather), with random states and compared it to “test” or whatever. I don’t know why. I’ll correct this.

please test that if you would, I think it will work without error in the inspector

I wouldn’t know how. I’m just guessing things.

Thomas_Prikowitsch · December 11, 2022, 5:38pm

i am struggeling with the same thing… i just wanted to change the width of the time-input-entity.

finally i went the direct way and changed the values in the time-picker-card.js

i thought about changing the custom cards nesting-sceme to make it card-mod-compatible

best regards

Ildar_Gabdullin · December 11, 2022, 7:05pm

For people who is testing their colors for icons & history-graph:
check here for a testing tool: binary_sensor entities with different device_class and a card:

Also:
How to provide alternative values for new variables.

Marin · December 11, 2022, 9:18pm

Hi Ildar,
I just saw this post and found it interesting. Could you help me implementing it to my card as I really don’t have any experience in css. Tried but didn’t work.
I have 2 switches which need to be interlocked. So if one of the two is ON other needs to be disabled until the first one returns to OFF.
How to add your code to this:

type: entities
title: Roletne
show_header_toggle: false
entities:
  - entity: switch.dnevni_roletna_mala_zatvaranje
  - entity: switch.dnevni_roletna_mala_otvaranje

Cheers!

Ildar_Gabdullin · December 11, 2022, 9:20pm

Please write a code for this logic here, then I will show how to add this logic for CSS attributes.
For me, this is not about CSS, this is about a "input_boolean" or a "switch" state first.