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

Here is a diff between your code & my code (with trimmed spaces):


I do not know why it does not work in your setup.
Do other card-mod examples work?

Uhh, the problem was withc card-mod… cool, it works now - almost :slight_smile:
for some reason the color display different (darker) as on other icons (state-icon / switch, coloring works perfect without card-mod):

image

Is there a way to style the icons on the tab headers? I would like to change those from outline to filled versions if the room it represents is active (or similar).

Search in card-mod themes thread.

1 Like

Most probably, there is a filter or a transparent or alpha set as well, which you should adjust according to your needs.

See above

How to enable / disable a “fold / unfold” control for fold-entity-row

image

image


More card-mod examples

Why the “mod-card” is here?
190 lines for MWE - and zero appearances of “card-mod” keyword.

1 Like

I cant get card-mod to work, anywhere.
Its installed correctly, but all I get when adding

style: |
  ha-card .entities {
    color: red;
  }

to a card yaml is

Visual editor is not supported for this configuration
Key ‘style’ is not expected or not supported by the visual editor.
You can still edit your config in YAML.

…and text color is not red. Ive tried many other kinds of stylings too, with the same result. What basic thing can I have gotten so laughably wrong?

Its the same if I add “card_mod:”, as in

card_mod:
  style: |
    ha-card {
      color: red;
    }

SOLVED IT!

  • I went through everything twice and found nothing wrong with card-mod, it loaded correctly and everything. Then for some reason I thought of HomeKit Infused which I had downloaded but not configured completely because it is all YAML-based. I deleted everything HKI related and restarted HA and voila! Text is red! :slight_smile:
1 Like

You are right, this should be in Layout-card - Take control of where your cards end up

Deleting post …

hey, just looking for s beginner help

below is a sample my code and image for reference, but all i want to do is round the corners and be able to apply a line colour. Im just unsure where to even add the styling? if someone is able to help me out here, im hoping it will go along way to learning it? cheers

type: custom:stack-in-card
title: Indoor Climate
mode: vertical
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.whole_house_average_humidity
            icon_color: green
          - type: entity
            entity: sensor.whole_house_average_temperature
            icon_color: blue
          - type: template
            entity: climate.ac_controls_interface

How to change card-mod styles for dark & light modes

There are 2 methods of changing a card-mod style dependingly on the current HA theme:

  1. Use a user-defined variable for some CSS property.

Specify some user-defined variable for the light theme & for the dark theme:

### styling
card_mod:
  style: |
    some_element {
      color: var(--my-favourite-color);
    }
...
## defining themes
my_theme:
  modes:
    light:
      ...
      my-favourite-color:  black
      ...
    dark:
      ...
      my-favourite-color:  white
      ...

This method implies that a custom theme (“my_theme”) is defined.
If a default theme is used then the 2nd method may be used.


  1. Use different card-mod styles dependingly on the current mode - light or dark.

A client device has at least the light mode; the dark mode MAY BE provided too.
Switching between modes may be at automatic (dependingly on a current time) or manual.

HA has 3 options for a default theme:

  • automatic selection (if the client device is in light mode then the light theme is selected; same for the dark mode);
  • light & dark themes (set a theme independingly on the client device’s mode).

Here are these options for the default theme:
image

Regarding a custom theme: if both light & dark modes are specified for the theme then these options are same:
image

But if no light or dark modes are specified then there are no options:
image

So, this method implies that:

  • either the default theme is used;
  • or a custom theme with specified light & dark modes is used.

There is one more condition - the “Auto” mode must be selected (if device is in dark mode → use a dark theme, and vise versa).

Now finally about the method itself.
A special CSS media feature is used to determine a current mode:

type: entities
entities:
  - entity: sun.sun
    name: cyan if DARK
    card_mod:
      style:
        hui-generic-entity-row $: |
          @media (prefers-color-scheme: dark) {
            state-badge {color: cyan;}
          }
          @media (prefers-color-scheme: light) {
            state-badge {color: red;}
          }

In the light mode the icon is of red color:
image

If the current option is “dark”:
image
then the icon’s color is still red:
image
because the mode is still light - only the dark theme is selected!

Now set the “auto” option:
image
switch on the dark mode (for Windows 10: Settings → Colors):
image
and the icon’s color is cyan - as it should be:
image

BTW, for testing purpose Chrome has a “dark mode emulation” feature.

7 Likes

Thank you for this! I was banging my head against this for a while, and while I absolutely could not get the @media (prefers-color-scheme.. option working, custom variables in themes did work! I’ll keep playing with the @media option later, as that would be the most theme-agnostic (my gf uses an ios theme whereas I use Mushroom theme, so I’ve had to throw custom vars into both for now, bleh).

This…this is gold for anyone that wants to change up all the default settings and make their own style.

I do have a question though. Can you get to any part of a card by just appending “.header .name” for example to “ha-card” like shown below? I notice you dont do it on all your examples and wanted to confirm if this only works for some cards or all.

style: |
  ha-card .header .name {
    color: green;
  }

Post liked and bookmarked. Thank you.

Not sure if I am getting your point.
Yes, we can get to any part by using a correct path.
In this particular example there is no need to use “ha-card .header .name”, the “.header .name” is enough.
In some my examples I did use the “ha-card” in these cases (I was at the very beginning), but usually it is not obligatory.
Currently I am using “ha-card” only in “style the whole card” cases (i.e. not for some specified element).

Wondering if I can get some help with a template in card mod to turn the card background a certain color based on an entity’s attribute. I’m terrible with templates and just started with Card-mod so I hope this isn’t too stupid of a question…

I have this but it isn’t working.

card_mod:
  style: |
    ha-card {
     background: [[ if (states.climate.z_wave_thermostat_2.attributes.hvac_action == "cooling", "blue",) else if (states.climate.z_wave_thermostat_2.attributes.hvac_action == "heating", "red",) else if (states.climate.z_wave_thermostat_2.atrributes.hvac_action == 'idle', "grey")]];
     }

Thanks!

Use jinjia2 for templates.
Like this:

card_mod:
  style: |
    ha-card {
      {% if ....... %}
      background: cyan;
      {% else %}
      background: red;
      {% endif %}
     }

Awesome, thank you so much. Was able to get it working.

How should the correct entry for “condtional row” look for secondary info to appear?

Zrzut ekranu 2022-04-15 161327

  - entity: input_number.pc_grzejniki_obnizenie_stalej_temp_wody
    secondary_info: true
    card_mod:
      style:
        hui-generic-entity-row$: |
          .secondary::after {
            content: "{{states('sensor.pc_grzejniki_obnizenie_stalej_temp_wody')}}"
            }
  - type: conditional
    conditions:
      - entity: switch.pc_grzejniki_metoda_pogodowa
        state: 'on'
    row:
      entity: input_number.pc_grzejniki_krzywa
      secondary_info: true
      card_mod:
        style:
          hui-generic-entity-row$: |
            .secondary::after {
              content: "{{states('sensor.pc_grzejniki_obnizenie_stalej_temp_wody')}}"
              }

I have tried variants with “hui-conditional-row” but without success. Could you
please help me?

1st post → link at the bottom → post with links → link for conditional

Thank you. I got the expected result after applying.

    style:
        hui-input-number-entity-row$: 
            hui-generic-entity-row$: |
                .secondary::after {
                   content: "{{states('sensor.pc_grzejniki_obnizenie_stalej_temp_wody')}}"
                   }