Card-mod card backgrounds do not update

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:

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

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

• Have followed the troubleshooting steps of the “Common Problems” section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• 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]

@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.

[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