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

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')}}"
                   }

Hello there,

I have some conditional-cards in a horizontal stack and the display is a bit weird because some “flex”.
image

What I would like to do is :
image

But I did not managed to achieve this…

As you can see
image

Anyone for help on this one ? Thx !

Selector gives me :
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > hui-masonry-view").shadowRoot.querySelector("#columns > div > hui-vertical-stack-card").shadowRoot.querySelector("#root > hui-horizontal-stack-card:nth-child(3)").shadowRoot.querySelector("#root > hui-conditional-card:nth-child(2)")

If I go to chrome dev tools, select my conditional card and put in element style : flex: none; I have the correct resulting display…but until now I did not managed to make it with card-mod. Is that even possible ?

hey @SNoof85 , could you provide me with the whole code of the row? then I can reproduce it better

Sure here is a code snippet :slight_smile:

  - cards:
    - cards:
      - card:
          entity: sensor.open_doors
          template: pilule_open_count
          icon: mdi:door-open
          type: 'custom:button-card'
        conditions:
          - entity: sensor.ppl_at_home
            state: '0'
          - entity: sensor.open_doors
            state_not: '0'
        type: conditional
      - card:
          entity: sensor.open_windows
          template: pilule_open_count
          icon: mdi:window-open-variant
          type: 'custom:button-card'
        conditions:
          - entity: sensor.ppl_at_home
            state: '0'
          - entity: sensor.open_windows
            state_not: '0'
        type: conditional
      type: horizontal-stack
    type: vertical-stack

Button card templates :

  pilule_open_count:
    template: pilule_icon
    tap_action:
      action: more-info
    label: |
      [[[
        var open = entity.state;
        return open;
      ]]]
  pilule_icon:
    template: pilule
    show_icon: true
    size: 80%
    show_state: false
    variables:
      icon: "mdi:arrow-left"
    icon: '[[[ return variables.icon ]]]'
    styles:
      grid:
        - grid-template-areas: '"i l"'
      label:
        - justify-self: center
        - padding: 0px 6px
        - font-weight: bold
        - font-size: 14px
  pilule:
    tap_action:
      action: more-info
    show_icon: false
    show_name: false
    show_state: false
    show_label: true
    size: 80%
    styles:
      img_cell:
        - width: 24px
      card:
        - border-radius: 30px
        - box-shadow: var(--box-shadow)
        - height: 36px
        - width: auto
        - padding-left: 6px
        - padding-right: 6px
      grid:
        - grid-template-areas: '"l"'
      label:
        - justify-self: center
        - padding: 0px 6px
        - font-weight: bold
        - font-size: 14px

Thx for you help !

Edit : added templates for button cards…

Maybe you can solved this with “placeholder” ?
I think the problem with the horizontal stack is that they are trying to be divided symmetrically.
but if we install 6 pieces there, then we can get the same thing.

type: horizontal-stack
cards:
  - type: custom:button-card
    entity: sensor.door_count
    template: pilule_open_count
    icon: mdi:window-open-variant
  - type: custom:button-card
    entity: sensor.door_count
    template: pilule_open_count
    icon: mdi:window-open-variant
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card