🔹 Card-mod - Super-charge your themes!

getting back to the icon changer, I suspect it to be caused by the place in the config. So please let me ask, if you can adapt this working color template, to an icon changer, with the correct path:

        paper-tab[aria-label='Settings dev']  {
            {% if is_state('input_boolean.test','on') %} color: white
            {% else %} color: green
            {% endif %};
          }

?
trying this currently:

        paper-tab[aria-label='Settings dev'] ha-icon $ ha-svg-icon $: |path {
          {% if is_state('input_boolean.test','on') %} d: path("M 20.2 5.9 L 21 5.1 C 19.6 3.7 17.8 3 16 3 C 14.2 3 12.4 3.7 11 5.1 L 11.8 5.9 C 13 4.8 14.5 4.2 16 4.2 C 17.5 4.2 19 4.8 20.2 5.9 M 19.3 6.7 C 18.4 5.8 17.2 5.3 16 5.3 C 14.8 5.3 13.6 5.8 12.7 6.7 L 13.5 7.5 C 14.2 6.8 15.1 6.5 16 6.5 C 16.9 6.5 17.8 6.8 18.5 7.5 L 19.3 6.7 M 19 13 H 17 V 9 H 15 V 13 H 5 A 2 2 0 0 0 3 15 V 19 A 2 2 0 0 0 5 21 H 19 A 2 2 0 0 0 21 19 V 15 A 2 2 0 0 0 19 13 M 8 18 H 6 V 16 H 8 V 18 M 11.5 18 H 9.5 V 16 H 11.5 V 18 M 15 18 H 13 V 16 H 15 V 18 Z") !important;
          {% else %} d: path("M 12 2 A 10 10 0 0 0 2 12 A 10 10 0 0 0 12 22 A 10 10 0 0 0 22 12 A 10 10 0 0 0 12 2 M 16.2 16.2 L 11 13 V 7 H 12.5 V 12.2 L 17 14.9 L 16.2 16.2 Z") !important;
          {% endif %};
        }

which does exactly nothing…

Probably there is a syntax error here.
Try this:

  card-mod-root-yaml: |
    paper-tab[aria-label='12345'] ha-icon $ ha-svg-icon $: |
      path {
        {% if is_state('input_boolean.test_boolean','on') %}
        d: path("M 20.2 5.9 L 21 5.1 C 19.6 3.7 17.8 3 16 3 C 14.2 3 12.4 3.7 11 5.1 L 11.8 5.9 C 13 4.8 14.5 4.2 16 4.2 C 17.5 4.2 19 4.8 20.2 5.9 M 19.3 6.7 C 18.4 5.8 17.2 5.3 16 5.3 C 14.8 5.3 13.6 5.8 12.7 6.7 L 13.5 7.5 C 14.2 6.8 15.1 6.5 16 6.5 C 16.9 6.5 17.8 6.8 18.5 7.5 L 19.3 6.7 M 19 13 H 17 V 9 H 15 V 13 H 5 A 2 2 0 0 0 3 15 V 19 A 2 2 0 0 0 5 21 H 19 A 2 2 0 0 0 21 19 V 15 A 2 2 0 0 0 19 13 M 8 18 H 6 V 16 H 8 V 18 M 11.5 18 H 9.5 V 16 H 11.5 V 18 M 15 18 H 13 V 16 H 15 V 18 Z") !important;
        color: magenta !important;
        {% else %}
        d: path("M 12 2 A 10 10 0 0 0 2 12 A 10 10 0 0 0 12 22 A 10 10 0 0 0 22 12 A 10 10 0 0 0 12 2 M 16.2 16.2 L 11 13 V 7 H 12.5 V 12.2 L 17 14.9 L 16.2 16.2 Z") !important;
        color: cyan !important;
        {% endif %}
      }
    .: |
      paper-tab[aria-label='12345'] {
        {% if is_state('input_boolean.test_boolean','on') %}
        color: red;
        {% else %}
        color: orange;
        {% endif %}
      }

no, really sorry, nothing happening… I think I had that exact syntax before, and thats why I tried to simplify it.

thing is, I have all my tab icon color settings under the .: | so was thinking maybe the icon change also should be set there.

even without coloring:

    card-mod-root-yaml: |

      paper-tab[aria-label='Settings dev'] ha-icon $ ha-svg-icon $: |
        path {
          {% if is_state('input_boolean.test','on') %}
          d: path("M 20.2 5.9 L 21 5.1 C 19.6 3.7 17.8 3 16 3 C 14.2 3 12.4 3.7 11 5.1 L 11.8 5.9 C 13 4.8 14.5 4.2 16 4.2 C 17.5 4.2 19 4.8 20.2 5.9 M 19.3 6.7 C 18.4 5.8 17.2 5.3 16 5.3 C 14.8 5.3 13.6 5.8 12.7 6.7 L 13.5 7.5 C 14.2 6.8 15.1 6.5 16 6.5 C 16.9 6.5 17.8 6.8 18.5 7.5 L 19.3 6.7 M 19 13 H 17 V 9 H 15 V 13 H 5 A 2 2 0 0 0 3 15 V 19 A 2 2 0 0 0 5 21 H 19 A 2 2 0 0 0 21 19 V 15 A 2 2 0 0 0 19 13 M 8 18 H 6 V 16 H 8 V 18 M 11.5 18 H 9.5 V 16 H 11.5 V 18 M 15 18 H 13 V 16 H 15 V 18 Z") !important;
          {% else %}
          d: path("M 12 2 A 10 10 0 0 0 2 12 A 10 10 0 0 0 12 22 A 10 10 0 0 0 22 12 A 10 10 0 0 0 12 2 M 16.2 16.2 L 11 13 V 7 H 12.5 V 12.2 L 17 14.9 L 16.2 16.2 Z") !important;
          {% endif %}
        }

it does nothing

Marius, do you have this structure?

 card-mod-root-yaml: |
    xxxxxxxxxxx: |
      xxxxxxxxxxxx {
        ...
      }
    xxxxxxxxxxx: |
      xxxxxxxxxxxx {
        ...
      }
    xxxxxxxxxxx: |
      xxxxxxxxxxxx {
        ...
      }
    .: |
      xxxxxxxxxxx {
        ...
      }
      xxxxxxxxxxx {
        ...
      }
      xxxxxxxxxxx {
        ...
      }

i.e. with first sections with 100500 DOM levels, then one-level sections.

yes, although I have nothing under the root-yaml itself currently, see

I am a fresh person here))), but I think that this structure is wrong:
изображение
It is wrong even for conventional card-mod

feel free to have your fresh eyes correct my theme… All I can say is everything in there currently works :wink:
but, isnt that exactly what you have found to be working?

Compare these two codes:

    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .badge-container .label-badge .label span {
                color: blue;
                background-color: magenta;
                }
      .: |
        :host {
          color: orange;
          --label-badge-background-color: yellow;
        }

and

    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .badge-container .label-badge .label span {
                color: blue;
                background-color: magenta;
                }
      :host {
        color: orange;
        --label-badge-background-color: yellow;
      }

The 2nd code will not work for the bottom part.
So, move your paper-tabs$: section above the .: | line.

“It works” - not a tenet.
Doctors say: there are 2 kinds of people: sick and not diagnosed yet )))

yeah, but that section is commented in my theme:

        /* Hide chevrons
        paper-tabs$: |
          .not-visible {
            display: none;
          } */

so not valid anyways. And ofc, I did add the icon-changer section to above the .: | as you can see here:

my individual tab colorings start at line 119, and all work

I am the only person in the world with these “/* xxxx */” not working ?))))
I mean - I cannot use these comments inside styles, my styles stop working then.

Had that happen to me as well, never did figure put why sometimes it’d work and others it would not.

I cannot get this to work too:
Classes

red-theme:
  card-mod-theme: red-theme
  ...
    card-mod-row: |
        ...
        :host(.teal) {
          background: teal;
        }
        :host(.purple) {
          background: purple;
        }

Also, I think there is a wrong indentation in the docs - the card-mod-row line has an extra indent.

nope, had that same experience, and put it aside for a moment… there’s not much to go on for the classes, or how they are defined. I believe there’s a nice Day/Night theme that holds some classes. Should be available in this topic above…wrong, its here: Day and Night - #29 by tom_l

Here is my code:

  card-mod-row: |
    :host(.class-row-red) {
      color: red;
      --paper-item-icon-color: red;
    }
  - type: entities
    entities:
      - entity: input_number.test_number
        class: class-row-red

Do not forget to comment your card-mod-row-yaml code if present.

Changed the class manually in Code Inspector:
изображение
And the class works:
изображение

Now the question is - why the class was not specified to the row automatically?

Registered an issue
Update: got it working (see the next post), closed the issue

do notice Tom uses

card_mod:
  class: 

so I tested that too, with -yaml and without, and still no effect…

aaaaaaaaaaaaaaaaaaaaaaaa
I got it working!

  - type: entities
    entities:
      - entity: input_number.test_number
        card_mod:
          class: class-row-cyan

Marius, :stuck_out_tongue_winking_eye:

1 Like

yep, me too:

Dec-30-2021 01-31-21

1 Like

I have a question regarding CPU & RAM usage.
I would like to see @thomasloven & other experts participating in this discussion.

Suppose we have some amount of Entities card, they look like this:

type: entities
entities:
  - entity: xxxxxxxx
  - entity: xxxxxxxx
  - entity: xxxxxxxx
    card_mod:
      style:
        ... style dependently on some conditions
  - entity: xxxxxxxx
  - entity: xxxxxxxx
  - entity: xxxxxxxx
    card_mod:
      style:
        ... style dependently on some conditions
  - entity: xxxxxxxx
    card_mod:
      style:
        ... style dependently on some conditions
  - entity: xxxxxxxx
  - entity: xxxxxxxx

Each card contains rows w/o card-mod & rows with card-mod.

Now let’s imagine that we can cover all these cases by some kind of universal styling:

  card-mod-row-yaml: |
    ... styles for different domains dependently on some conditions

Here we may define styles for each domain using code like
if config.entity.startswith('device_tracker.')
for different states ("home", “not_home”, “on”, “off” etc) + other different conditions.

Question:
Which way needs more HW resources?

Suppose we have a row for “input_boolean” which is not styled (neither by calling card_mod nor by card-mod-row-yaml) - but even this row will have a card-mod element containing our “universal style”:
изображение
That is why I suspect that using card-mod-themes gives a flexibility (+lots other positive things) but needs more resources.

On one of my Lovelace dashboards for a tablet, I want to remove the top blue header that has the microphone and three vertical dots. Doing some searching it appears that card-mod can do this.

I installed card-mod. Verified it is installed by modifying a card with the below example, which worked.
card_mod:
style: |
ha-card {
color: red;
}

I now want to do the below code which I found in the cookbook to remove the top header. When I add it to my lovelace page, right after the title section or at the bottom, nothing happens. Is this the properly place to add it?
no-top-header:
card-mod-theme: no-top-header

card-mod-root: |
app-toolbar {
display: none;
}

This is not the correct place. Check out the help page, it goes in your theme.yaml, like this:

theme-name:
  card-mod-theme: theme-name
  ### HEADER ###
  card-mod-root: |
    app-header {
      display: none;
    }

Make sure you use your actual theme yaml name. Also you need to reload theme service (frontend.reload_themes) and refresh your page after you edit a theme.yaml.