🔹 Card-mod - Super-charge your themes!

[dcapslock (Darryn Capes-Davis)]

@Protoncek

So that “extra” is no longer needed?

There is no change to the need for extra_module_url. This warning is to warn if your config is giving rise to duplicate patching.

Why to use extra_module_url? Per readme…

Installing card-mod as a Frontend module via extra_module_url will provide performance improvements to non-CAST devices e.g. enhanced speed in applying card-mod to cards, especially when using card-mod themes. Installing card-mod as a Frontend module is also required if you are using card-mod to style panels of Home Assistant which are not Lovelace dashboards, as Dashboard resources are not loaded for those panels. This includes styling the sidebar in your theme for these panels.

Why to keep Dashboard resource url? Per readme…

NOTE : If you manage your resource URLs in YAML and do not use CAST, you do not need a resource URL at all. In this case you can just use extra_module_url . It is recommended that you use a cache busting technique to assist with caching of old files on update. e.g. ...\card-mod.js?v4.0.0 updating the version when you update card-mod.

As most users use HACS to manage their resources, which will always update the Dashboard resource url, the readme guides users to manage having both, making sure to keep them in sync. However there is no need to have a Dashboard resource URL if you are not using CAST. Keep in mind though if you do use HACS that it will always add a Dashboard resource url, even if you remove it.

Also, some themes have the option to install card-mod, so the duplicate patch check also covers such a scenario.

I hope this helps with understand your options.

[Protoncek]

Huh… a lot of explanation… i don’t understand 100%, but i understand basics … i’ll do some checking and testing… thanks!

So, if i understand correctly: extra_url… didn’t cause my error message? Funny thing: when i saw that message i immediately did clear cache and restarterd HA but error popped up again. It went away after i removed extra_url, restarted HA and cleared cache again.
Why then it popped up in the first place? And there were 6 of them (for each of my wall tablets).

[dcapslock (Darryn Capes-Davis)]

Two things here.

1. Did extra_module_url cause the warning?

Yes.

2. Is extra_modue_url is needed?

As per earlier response.

Tip: As per readme if you use extra_module_url and dashboard resource url then make sure to update extra_module_url when you update card_mod, then restart Home Assistant.

[Protoncek]

Well, since i’m not a “real” programmer i admit that i’m a bit lost here now with all these new terms… i guess i don’t use CAST devices (don’t have google cast or similar)… all my dashboards are standard “lovelace dashboards”, created via UI, and i do use HACS, i always install all from HACS, never manually, so resources are definitely stated there.
So i guess i’ll leave as is at this point, since at this moment it appears that all is working. if i find something not working i’ll deal with that…

Thanks for your time and work!!!

[Protoncek]

Hey…i see there’s new “Clear Home Assistant Frontend application cache” function available in this version! Great work, thanks, it will come extremely handy!

A (not so important) question, though: can this action be triggered from one device for another device, or for more of them at once (say with a script) or it’s doable just on device i tap on the button?

What I mean: i have multiple tablets across my home, which are pretty much locked (for convenience, not against users). I use fully kiosk on them and when i want to CC i use rest commands to remotely clear cache on all of them with a single script. This way i don’t have to wonder around a house and do CC on one-by-one. Would a similar be possible with this new function?

[dcapslock (Darryn Capes-Davis)]

@Protoncek

A (not so important) question, though: can this action be triggered from one device for another device, or for more of them at once (say with a script) or it’s doable just on device i tap on the button?

No, card-mod action can only be run by fire-dom-event as card-mod is all Frontend with no service integreations. However, Browser Mod refresh service can do what you wish.

[HappyCadaver (Rick Furtado)]

Pre 2026.2.0 I was setting summery and area cards borders separately using the below configuration and then assigning the classes to their respective card types.

  card-mod-card-yaml: |
    .: |
      :host(.summary-card-style) div.background {
        border-radius: 50%;
      }
      :host(.area-card-style) div.background {
        border-radius: 30px 30px 30px 15px;
        border-color: rgba(255, 255, 255, 0.1);
        border-style: solid;
      }

As of 2026.2.0 this no longer works due to the background of tile cards getting nested inside a <ha-tile-container> > #shadow-root. I figured out how to access the background with the below configuration, but I can not for the life of me figure out how to assign a class to it… is it even possible? The card mod theme wiki doesn’t seem to cover class assignments to shadowDOM navigation.

  card-mod-card-yaml: |
    ha-tile-container $: |
      div.background {
        border-radius: 30px 30px 30px 15px;
        border-color: rgba(255, 255, 255, 0.1);
        border-style: solid;
      }

I appreciate any insight into this, thanks.

[dcapslock (Darryn Capes-Davis)]

@HappyCadaver

but I can not for the life of me figure out how to assign a class to it… is it even possible?

It’s not possible to assign a class with a style. This is only possible for config of the card.

What you can try is to assign CSS vars in your :host(.summary-card-style) rule and then use those vars in div.background in your config for ha-tile-container $:.

[HappyCadaver (Rick Furtado)]

@dcapslock

It’s not possible to assign a class with a style. This is only possible for config of the card.

I’m confused by this as it seems to suggest that my first example wouldn’t work, yet it does. Am I misunderstanding you? Elsewise I’ll play around with your suggestion… if I understand it correctly that is.

[HappyCadaver (Rick Furtado)]

Eureka! Thanks @dcapslock for the pointers. The tricky part with these 2 cards is that they are for the most part identical, so how do you get 2 different borders into a shadowroot where the navigation is identical? Variable fallbacks.

  card-mod-card-yaml: |
    ha-tile-container $: |
      div.background {
        border-style: var(--summary-border-style, var(--area-border-style));
        border-color: var(--summary-border-color, var(--area-border-color));
        border-radius: var(--summary-border-radius, var(--area-border-radius));
      }
    .: |
      :host(.area-card-style) {
        --area-border-color: rgba(255, 255, 255, 0.1);
        --area-border-style: solid;
        --area-border-radius: 30px 30px 30px 15px;
      }
      :host(.summary-card-style) {
        --summary-border-color: rgb(0, 0, 255);
        --summary-border-style: solid;
        --summary-border-radius: 50%;
      }

[Mariusthvdb (Marius)]

somehow the backdrop filter is behaving erratically recently, suspect it was introduced in the new HA 2026.x release, but not sure

Could anyone here using Safari on a Mac confirm?

  card-mod-more-info-yaml: |

    $: |
      .mdc-dialog {
        backdrop-filter: blur(17px) !important;
        -webkit-backdrop-filter: blur(17px) !important;
      }

It seems to not happen in Chrome, and its a bit hard to see in the sceenvid (real view is way more expressive), but there’s a certain kaleidoscopic effect on the elements, where before, a calm and clean blur was rendered only

[Mariusthvdb (Marius)]

as a fyi for this thread, we can now use a theme variable directly to make the backdrop happen,
so I commented this

# don't use this, (kaleidoscope effect!) but use
# ha-dialog-scrim-backdrop-filter: blur(17px) in regular theme
#     $: |
#       .mdc-dialog {
#         /*backdrop-filter: blur(17px) !important;
#         -webkit-backdrop-filter: blur(17px) !important;*/
#       }

and use a straightforward regular theme setting.
All kaleidoscoping is gone.

new feature was introduced in the latest 2026.2 change

A ::before element was introduced so we now can just use --ha-dialog-scrim-backdrop-filter, so either ha-dialog-scrim-backdrop-filter in theme or --ha-dialog-scrim-backdrop-filter in specific card-mod via theme.

thanks @dcapslock for pointing me to the PR

[HappyCadaver (Rick Furtado)]

From your description I assumed you meant something like this:

my-theme:
  --ha-dialog-scrim-backdrop-filter: blur(50px)

But that is now working for me, does it still need to be under a card-mod-theme key then?

Disclaimer: blur(50px) is extreme and only used to ensure I’m seeing a difference.

[Mariusthvdb (Marius)]

Take out those 2 — in front of the ha for use in a regular theme.

[maisun]

I have noticed some errors in Chrome console:

You are doing it wrong!
card-mod.js?v4.0.0:1 mod-card should NEVER be used with a card that already has a ha-card element, such as tile

Looking at my code base, I use mod-card with picture element card, vertical-stack and tile card. Am I in trouble? I’m not very good at UI customization and I’m just afraid of changing things that are already working.