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

dcapslock · January 7, 2026, 10:13pm

The energy-period-selector can’t be targeted by card-mod as it’s a sibling of hui-root and not in hui-root shadow which is where card-mod is applied, meaning card-mod can only target hui-root itself (:host) and what is in shadowRoot.

A few workarounds I have tested:

Define ha-space-4 as your override in theme, also then setting back to standard for root, config, custom-panel and developer-tools via card-mod theme.

Theme

Card Mod Test:

  card-mod-theme: Card Mod Test

  ha-space-4: 64px

  card-mod-root: |
    :host {
      --ha-space-4: 16px;
    }

  card-mod-config: |
    :host {
      --ha-space-4: 16px;
    }

  card-mod-panel-custom: |
    :host {
      --ha-space-4: 16px;
    }

  card-mod-developer-tools: |
    :host {
      --ha-space-4: 16px;
    }

Set safe-area-inset-bottom though this will have other impacts.

Even though energy-period-selector uses ha-card, as it does not have ‘config’ card-mod ignores it. v4.0.0 did not change this though hui-card patch will apply card-mod without config, so a possible card-mod improvement would be to do the same for ha-card allowing themes to target ha-card which has no config, like the case is here,

Hmmbob · January 8, 2026, 7:26am

Whoa, thanks for the detailed answer! Option 1 works on my desktop - not yet on mobile HA app but that could be a caching issue.

Thanks, this is great!

Hmmbob · January 8, 2026, 8:14pm

Mobile doesn’t seem to be a caching issue, but css. I see this in the frontend source code:

github.com/home-assistant/frontend

src/panels/energy/ha-panel-energy.ts

6d3a1b93e


      
          @media all and (max-width: 450px), all and (max-height: 500px) {
            hui-root.has-period-selector {
              --view-container-padding-bottom: var(--ha-space-14);
            }
            .period-selector {
              bottom: max(var(--ha-space-2), var(--safe-area-inset-bottom, 0px));
            }
          }

Should I follow the same approach as above, but now for --ha-space-2?

dcapslock · January 8, 2026, 8:27pm

Yes, that should work. Default ha-space-2 is 8px.

fusterclucker · January 9, 2026, 3:29am

Oh the color change on the card itself when the scene is static looks pretty good - the issue I have is when selecting a new scene, the color change from one scene to the next is kinda janky on the bedroom card. It looks fine once the colors settle in.

Mariusthvdb · January 9, 2026, 8:29am

we can set an entity to a markdown card. most cards btw (if not all). And use config.entity in the templates.

It’s an undocumented ‘feature’…

    type: markdown
    entity: binary_sensor.wekker_voor_morgen
#     text_only: true
    card_mod:
      style:
        ha-markdown:
          $: |
            ha-alert {
              margin: 0 !important;
            }
        .: |
          ha-card {
            color: {{'var(--success-color)'
                      if is_state(config.entity,'off') else
                    'var(--error-color)'}};
            box-shadow: var(--box-shadow);
          }
          ha-markdown {
            padding: 0 !important;
          }
    content: >
        {% set type = 'success' if is_state(config.entity,'off') else 'error' %}
        <h3><ha-alert alert-type={{type}}>{{states('sensor.komende_wekker_text')}}
        </ha-alert></h3>

Hmmbob · January 9, 2026, 10:50am

I think i’ll be reverting the changes though. I see various side effects that are hard to keep compensating.

Also had to apply some additional styling to my kiosk dashboards.

Mariusthvdb · January 9, 2026, 2:42pm

that would seem best yes, as they are still working on that selector, and developing the looks, and hopefully availability in manual cards too.

modifying now will be a burden for maintenance…

always2535 · January 9, 2026, 7:57pm

The latest updates this week to custom:lovelace-multiline-text-input-card break the card-mod formatting. None of my styles work anymore. (We now have built-in options to change the number of lines in the textbox and to hide the card title, but my most important card-mod styles were to do with other parts of the card). Any ideas? Thanks in advance!

Here was my config:

              - type: custom:lovelace-multiline-text-input-card
                entity: input_text.seventeentrack_stop_tracking_number
                title: Stop Tracking Number
                autosave: true
                buttons: false
                show_success_messages: false
                card_mod:
                  style:
                    .: |
                      ha-card {
                        margin-bottom: -75px;
                        padding-bottom: 0px;
                        margin-right: -8px;
                      }
                      ha-card h1,
                      ha-card .card-header {
                        font-size: 12px !important;
                        font-weight: bold !important;
                        color: #ff6600;
                        padding-bottom: 0px;
                        margin-top: -15px;
                        margin-bottom: -35px;
                      }
                      textarea {
                        min-height: 24px !important;
                        height: auto !important;
                        padding: 4px !important;
                        font-size: 14px !important;
                        overflow-y: scroll !important;
                        margin-bottom: -5px;
                      }
                      .card-content {
                        margin: 0px 0px -30px 0px;
                        padding: 10px 15px 20px 5px;
                        }
                      textarea:placeholder-shown {
                        min-height: 24px !important;
                      }

Ildar_Gabdullin · January 9, 2026, 8:14pm

Update the card, read the updated Docs.
Hint - “prepend” should be used in case of card-mod 4.x. Meanwhile, the card works fine with card-mod 3.x.
(have not checked your code in details)

always2535 · January 9, 2026, 10:29pm

Thanks for replying, though it’s still not working on my end. I’m on card-mod v4.2.0-beta.6, multiline card 1.0.7, and Home Assistant core/OS 2026.1.0. ( I saw they’re still working through some glitches on card-mod’s “issues” page, which is why I eventually installed the beta.)

I’ve also cleared cache multiple times. I checked card-mod’s update notes but didn’t notice anything relevant aside from “prepend”. I tried adding the link for card-mod’s extra_module_url in my config in case that would somehow help, but it didn’t

And it’s a little difficult to interpret the multiline card’s update notes since they include vague comments like “Improved code, refactored a bit, some better error handling” and “Smaller refactorings and improved code”. There’s at least one specific note that may be relevant – “Removed textarea margin-top and replaced the JS resizing by flex CSS” – but I’m not sure.

I can open an issue on card-mod’s github if that’d be a better place for this. In the meantime, here’s my “prepend” YAML:

                card_mod:
                  prepend: true
                  style: |
                      ha-card {
                        margin-bottom: -75px;
                        padding-bottom: 0px;
                        margin-right: -8px;
                      }
                      ha-card h1,
                      ha-card .card-header {
                        font-size: 12px !important;
                        font-weight: bold !important;
                        color: #ff6600;
                        padding-bottom: 0px;
                        margin-top: -15px;
                        margin-bottom: -35px;
                      }
                      textarea {
                        min-height: 24px !important;
                        height: auto !important;
                        padding: 4px !important;
                        font-size: 14px !important;
                        overflow-y: scroll !important;
                        margin-bottom: -5px;
                      }
                      .card-content {
                        margin: 0px 0px -30px 0px;
                        padding: 10px 15px 20px 5px;
                        }
                      textarea:placeholder-shown {
                        min-height: 24px !important;
                      }

Ildar_Gabdullin · January 9, 2026, 11:37pm

Honestly no idea.
This simple code works in card-mod 3.x, and works in 4.x with “prepend=true”:

type: entities
entities:
  - type: custom:lovelace-multiline-text-input-card
    entity: input_text.test_text
    title: xxxx
    card_mod:
      prepend: true
      style: |
        ha-card {
          background: yellow;
        }
        .card-header {
          color: red;
        }
        textarea {
          background: cyan !important;
        }
        .card-content {
          background: lightgreen;
        }

Also, note that the card does have own ha-card - but it does not accept styles when not placed inside Entities card (at least in card-mod 4.x; could not test with 3.x, already shutdown a server). Perhaps this should be reported somewhere.

dcapslock · January 10, 2026, 12:14am

I checked out the card’s code and it rebuilds it config and does not store card_mod in config so when used as a plain card there is no config for card_mod to read. When used as a row in etities the row has the config for card_mod to read.

A workaround to use as card is to wrap with mod_card or customhui-element and then style via lovelace-multiline-text-input-card $ selector if using mod-card or direct style if using custom:hui-element where card-mod styling is transparent.

mod-card example

type: custom:mod-card
card:
  type: custom:lovelace-multiline-text-input-card
  entity: input_text.test_text
  title: xxxx
card_mod:
  style:
    lovelace-multiline-text-input-card $: |
      ha-card {
        background: yellow;
      }
      .card-header {
        color: red;
      }
      textarea {
        background: cyan !important;
      }
      .card-content {
        background: lightgreen;
      }

custom:hui-element example

type: custom:hui-element
card_type: custom:lovelace-multiline-text-input-card
entity: input_text.test_text
title: xxxx
card_mod:
  style: |
      ha-card {
        background: yellow;
      }
      .card-header {
        color: red;
      }
      textarea {
        background: cyan !important;
      }
      .card-content {
        background: lightgreen;
      }

EDIT: 1.0.6 of lovelace-multiline-text-input-card removed storing all original config in _config to storing rebuilt config in config. So to now be compatible with card_mod it should store card_mod config in is config.

always2535 · January 10, 2026, 6:12pm

Thank you, I used mod-card and it solved my problem!

Ideefiks · January 10, 2026, 10:53pm

What would I look at to make the color change smoother? Right now, it’s kind of janky as it jumps between colors.

Linear gradients are janky, so you need to add more stops

fusterclucker · January 11, 2026, 2:22am

Like I said above, I’m actually happy with the linear gradient on a static scene - the area is small enough that the kind of jank that the blog author discusses isn’t really an issue. It’s when I switch colors on the bulbs that the card can’t decide what to do so it flips between two states until it settles and that can look SUPER janky when it’s dramatic differences between scenes or long transition times (>10sec).

dcapslock · January 11, 2026, 2:43am

@fusterclucker do you have a simple example config to show what you are describing?

fusterclucker · January 11, 2026, 2:52am

I don’t. card-mod is the first time I’ve looked at CSS in 20 years - it’s gotten a fair bit more complicated.

EDIT: I was able to capture a short recording of this. These are 5 second transitions via the dashboard buttons I have for the scenes - I have tried longer, and the hesitation for the transition is greater but the initial “lurch” towards the end result is the same.
janky_gradient_button_1

dcapslock · January 11, 2026, 3:21am

If I am understanding you correctly, its scene transition that is giving you ‘jankiness’. So I would assume that your template is getting some quick updates due to this, hence what you see as changes in the output.

To assist in seeing what is going on, you can add {# card_mod.debug #} to your template and you will see console logs when the template updates, and what the result is.

Thoughts on managing would be:

Use a helper which debounces your light colors so your card_mod template does not get so rapid updates.
Look to using CSS transition to assist with how the output responds to template updates. Not sure if this will help.

fusterclucker · January 11, 2026, 4:01am

I was thinking more the second. Got some resources for me to dig into?

The terminal output - is that going to be visible in Proxmox (where my HA VM is running) or somewhere within HA?