Card-mod card backgrounds do not update

[tomlut]

My Home Assistant version: 2021.11.5

My lovelace configuration method (GUI or yaml): GUI

What I am doing: Changing card-mod themes with an automation.

What I expected to happen: Card backgrounds to change.

What happened instead: Card backgrounds do not update until the page is refreshed. Behaviour was introduced in card-mod v3.1.1 and has been absent since this issue was previously resolved here: https://github.com/thomasloven/lovelace-card-mod/issues/66#issuecomment-788791065

Day theme:

Night theme selected but card backgrounds do not update:

After a page refresh the backgrounds are displayed correctly:

Minimal steps to reproduce: See config below

The issue occurs when changing the theme with an automation. Only the card backgrounds fail to update.

automation

- alias: 'Select Theme'
  trigger:
  - platform: state
    entity_id: input_select.select_theme
  action:
    service: frontend.set_theme
    data:
      name: "{{ states('input_select.select_theme')|lower }}"

input select

select_theme:
  name: Select Theme
  options:
  - Day
  - Night

themes

day:
  card-mod-theme: day
  card-mod-card: |
    ha-card.top-level-card {
      border: solid 1px var(--primary-text-color);
      background: linear-gradient(rgba(147, 171, 202, 1), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%); #url("/local/background/card_bg_Day.png");
    }

night:
  card-mod-theme: night
  card-mod-card: |
    ha-card.top-level-card {
      border: solid 1px var(--secondary-text-color);
      background: linear-gradient(rgba(57, 103, 158, 1), rgba(0, 0, 0, 0.6) 56px, rgba(0, 0, 0, 0.6) 100%); #url("/local/background/card_bg_Night.png");
    }

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.

[tomlut]

This only appears to be an issue in Firefox. Safari and Chrome load the theme as expected.

[gurbyz]

Hi. I got the same behavior, but for view backgrounds (not updating the background when theme is changed by automation). This is since 2021.11.5 but since that upgrade I also upgraded to card-mod 3.1.1 and I switched from a lovelace.resources.module to the recommended frontend.extra_module_url. I use Chrome. Same behavior on IOS app.

day:
  card-mod-theme: day
  card-mod-root: |
    hui-view {
      background: none !important;
    }
    ha-app-layout {
      background-position: center !important;
      background-size: cover !important;
      background-repeat: no-repeat !important;
      background-image: url("/local/images/wallpaper_triangles.jpg") !important;
      background-attachment: fixed !important;
    }
   ... etc ...

Night theme is same, but with other image. I update via service: frontend.set_theme.

[gurbyz]

I did find a clue here. Someone had background issue when only having the frontend.extra_module_url and not the lovelace.resources.module. But having the module loaded by lovelace.resources.module as well as frontend.extra_module_url didn't help for me.

[tomlut]

@thomasloven I hate to be a pest but can anything be done about this?

Like gurbyz above using both loading methods does not fix this for me.

[tomlut]

Turning on "Automatically close connection" in my profile negates this issue as the page reloads when I switch to the tab showing home assistant.

[gurbyz]

Turning on "Automatically close connection" in my profile negates this issue as the page reloads when I switch to the tab showing home assistant.

I personally can't use this solution because I get the issue on a dashboard monitor that is in kiosk mode (no use of browser tabs there). But, inspired by your reload, I found another solution. Not so elegant to look at, because the dashboard just refreshes its complete browser. I'm using another integration of @thomasloven for this: browser_mod

I added this service call to the 'select theme' automations action:

      - service: browser_mod.window_reload
        data:
          deviceID:
            - browser_dashboard

[thomasloven]

Can you please check if this is still a problem in 3.4.0?

[tomlut]

It is indeed fixed. Thank you Thomas. 👍