Intermittently fails to apply custom style

[jtc42]

My Home Assistant version: 2024.5.3

My lovelace configuration method (GUI or yaml): yaml

What I am doing: Applying custom CSS to cards using either per-card style or theme-level style (same outcome on both), then periodically refreshing the dashboard and taking a screenshot to be shown for the next hour on an in-home e-ink display.

What I expected to happen: Custom style to apply on every refresh.

What happened instead: Custom style applies maybe 4 in every 5 tries. In other cases the normal theme style (defined in YAML) applies, but anything handled by card-mod fails to apply. Refreshing usually resolves the issue.

Minimal steps to reproduce:

[... rest of the theme yaml]
 card-mod-card: |
    ha-card {
      color: black !important;
      font-weight: 500 !important;
    }

Issue only happens intermittently so difficult to reliably reproduce.

Error messages from the browser console: None

---

By putting an X in the boxes ([]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [x] Have made sure I am using the latest version of the plugin.

• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[ildar170975]

Minimal steps to reproduce:

Hmm, how it can be called "minimal" if you are using a theme for PARTICULAR cards (custom, seemingly)?

This minimal theme works fine:

test_minimal:
  card-mod-theme: test_minimal
  card-mod-card: |
    ha-card {
      color: red !important;
    }

.horizon-card {

There is no sense to define a theme style for a particular custom card (which is probably is not present in your setup in MANY places). Define only values for "--hc-xxxxx" variables if these variables are only this card-specific.

[jtc42]

Good point, example amended to remove the custom card section. Confirmed the same thing happens regardless. Intermittently doesn't load the card-mod style.

Moving the custom card style into the theme was a debugging measure while trying to figure out if that would help with the intermittent issue when they were applied per-card, and has now been corrected. Issue persists.

[ildar170975]

Could you confirm that with my super minimal theme you still get the issue? Also, it would be helpful to know which OS/browser you use.

[jtc42]

Could you confirm that with my super minimal theme you still get the issue? Also, it would be helpful to know which OS/browser you use.

Confirmed issue persists with the minimal theme you posted. Verified on Safari, Chrome and Firefox on MacOS, and Chrome and Firefox on Windows.

[jtc42]

Installing it as a frontend module as in https://github.com/thomasloven/lovelace-card-mod?tab=readme-ov-file#performance-improvements seems to have resolved the issue. I'm sure it's just an interaction with something else but interesting to me that, without that performance improvement, it fails entirely sometimes.

[ildar170975]

it as a frontend module

This is a required additional step.

[jtc42]

From the README

While card-mod can be installed as a lovelace resource, some functionality will benefit greatly from it being installed as a frontend module instead.

If this is a required step as you suggest, it might be worth updating the README to make this clearer. The current wording makes it sound an optional performance improvement.

[ildar170975]

If this is a required step as you suggest, it might be worth updating the README to make this clearer. The current wording makes it sound an optional performance improvement.

I would agree with you.

[jtc42]

Shall I close this issue and raise that separately, or just leave this open? Happy to do whatever you think is best.

[ildar170975]

I am not this Repo's owner - just a user like you.

If registering a frontend module helped you - I would suggest you to close the issue. If you think that registering a frontend module is a mandatory step - I would suggest you to create a PR for editing the Readme.

Based on my own experience, I consider this step rather required.