šŸ”¹ Card-mod - Add css styles to any lovelace card

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.

ha

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.

2 Likes

@dolodobendan
Solid work.
Added your example in consolidation post:
ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

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 :wink:
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:

image

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

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. :smirk_cat:

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

1 Like

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.

1 Like

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!

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.