Styling via card_mod is no longer working

[majkers]

Before submitting a bug

[x ] I updated to the latest version available [x] I cleared the cache of my browser

After updating to latest version (2.7.1) I cant style card with card_mod. In editor it seems to work but when I save it I don't see any changes:

then when I enter editor once again I have to make a single change (adding ; for example) to see my changes again but saving it produces the same result as above. It was OK in 2.6.3 version

[jumpinf00l]

I notice this myself with custom cards installed through HACS, and this doesn't seem to be isolated to vacuum-card and is possibly linked to some front end updates.

I'd suggest it's an update needing to happen to make lovelace-card-mod compatible with newer front end versions and seems to be related to lovelace-card-mod issue 281 and issue 276.

This is not to say that frontend updates are an issue; vacuum-card and lovelace-card-mod are examples of custom add-ons and are out of the scope of testing with all official Home Assistant updates.

[github-actions[bot]]

There hasn't been any activity on this issue recently. This issue has now been marked as stale and will be closed if no further activity occurs. Please, update to the latest version and check if that solves the issue. Thank you for your contributions!

[philipjholm]

This is still a problem as styling that worked before isn't applied anymore. Any updates on this?

[luigisax]

I have the same problem. Any updates?

[sammyh2506]

Same issue for me...

[github-actions[bot]]

There hasn't been any activity on this issue recently. This issue has now been marked as stale and will be closed if no further activity occurs. Please, update to the latest version and check if that solves the issue. Thank you for your contributions!

[MPFGlaser]

Facing the same issue.

[yperetz]

Facing this issue as well

[BoGnY]

Same problem 😢

[rgavril]

Issues is still present.

[hheimbuerger]

Not sure if this I've experiencing the same root cause, but your issue title applies, so I'm adding my findings here:

I'm not using the visual editor, I've used the card exclusively in YAML. Neither any styles applied via the card_mod rules on the card itself applied, nor would setting any CSS variables in the theme have an effect.

Additionally, I've noticed that the <ha-card> element has a class of type-undefined. While other cards I've checked usually have a class that sounds like the card name, e.g. type-custom-mini-graph-card, type-tile, type-map, etc.

What worked for me as a workaround was to set the CSS variables (or other rules) via card-mod-card in the theme:

my-theme:
  card-mod-theme: my-theme

  card-mod-card: |
    ha-card.type-undefined {
      --vc-background: transparent;
      --vc-devider-color: transparent;
      --vc-spacing: 0;
    }

EDIT: I later found that setting --vc-devider-color doesn't actually work. While it does appear in the DOM, when the time comes to render the devider, the CSS variable is somehow back to its old value. I cannot figure out where it inherits the old value from.

[hheimbuerger]

I don't know if this is an expected side-effect of my workaround above, but my styling approach doesn't work the moment the vacuum is started or stopped. That removes all styling changes.

My guess is that the card deletes and recreates its shadow DOM, which also eliminates the card-mod injections.

A page reload of course fixes that, but for a status display, that's supposed to be mostly non-interactive, that's frustrating.

[guimatheus92]

Facing this issue as well

[IGOLz]

Having the same issue

[github-actions[bot]]

There hasn't been any activity on this issue recently. This issue has now been marked as stale and will be closed if no further activity occurs. Please, update to the latest version and check if that solves the issue. Thank you for your contributions!

[SeanPM5]

Not stale, still a long-standing issue.

I had used card_mod so the vacuum card background color was green when vacuum in cleaning state, red when in error state, gray when paused, orange background when overdue (not vacuumed in a while), etc.

Being able to make vacuum card background color dynamic like that was very helpful to see vacuum status at a glance on my wall mount dashboard tablet. Hope the card_mod functionality can be fixed/restored at some point.