Background's not loading since HA 2022.12

[BadEendt]

The light and dark backgrounds stopped working on my devices (Firefox, MacOS app, iOS), since i updated to HA 2022.12. The problem exists on 2023.01 as well.

Let me know if you need more information

[Zeunas]

For me it's both the backgrounds and the weather icons.

[Zeunas]

Actually, just moved all .png and .svg files too www folder and also amended the " to ' on wave.yaml, as per below:

on the dark theme

      # Place the backgrounds in the folder  config/www/images/backgrounds 
      background-image: center / cover no-repeat url('/local/themes/waves/background.png') fixed

on the light theme

      # Place the backgrounds in the folder  config/www/images/backgrounds 
      background-image: center / cover no-repeat url('/local/themes/waves/background-light.png') fixed

on both dark and light themes

      #Animated icons
      weather-icon-clear-night: url('/local/themes/waves/clear-night.svg')
      weather-icon-cloudy: url('/local/themes/waves/cloudy.svg')
      weather-icon-fog: url('/local/themes/waves/fog.svg')
      weather-icon-lightning: url('/local/themes/waves/lightning.svg')
      weather-icon-lightning-rainy: url('/local/themes/waves/lightning-rainy.svg')
      weather-icon-partlycloudy: url('/local/themes/waves/partlycloudy.svg')
      weather-icon-pouring: url('/local/themes/waves/pouring.svg')
      weather-icon-rainy: url('/local/themes/waves/rainy.svg')
      weather-icon-hail: url('/local/themes/waves/hail.svg')
      weather-icon-snowy: url('/local/themes/waves/snowy.svg')
      weather-icon-snowy-rainy: url('/local/themes/waves/snowy-rainy.svg')
      weather-icon-sunny: url('/local/themes/waves/sunny.svg')
      weather-icon-windy: url('/local/themes/waves/windy.svg')
      weather-icon-windy-variant: url('/local/themes/waves/windy-variant.svg')
      weather-icon-exceptional: url('/local/themes/waves/exceptional.svg')

Also added the below on both dark and light themes to fix the borders

  ha-card-border-radius: 20px
  ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)

And just as an extra, added the below to the wave.yaml (took the idea from the noctis theme, which I find if quite cool when it blurs everything out around a pop up) ;)

  card-mod-theme: waves

  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog .mdc-dialog__scrim {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        background: rgba(0,0,0,.6);
      } 
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        box-shadow: none !important;
        border-radius: var(--ha-card-border-radius);
      }
    .: |
      :host {
        --ha-card-box-shadow: none;
      }

[BadEendt]

Thanks, that's a smart fix!

Got my background working again for now

[tgcowell]

Hi All,

I'm not clear why your backgrounds, images are not working as it would suggest you're not calling g the right directory in your main configuration file.

Can you confirm you're doing this?

[Zeunas]

Apart from the background and weather icons, the theme works fine, in my believe my configuration.yaml is set up correctly:

frontend:
  themes: !include_dir_merge_named themes

and theme is under the correct theme folder (config/themes/wave)

Changing the " to ' as per my comment and changing the current path on your wave.yaml from "/hacsfiles/themes/waves/xxxx" to a folder in "www" folder worked. I basically made the assumption that Home Assistant is restricting the access to /hacsfiles somehow - This is more likely due to the most recent update as it was like this before and it worked.

[gmaslowski]

@tgcowell @Zeunas

Hi both. I'm on HA 2023.1.1 with HACS 1.29.1

I had the same issue, and I followed from where HA was trying to lookup other resources loaded by hacsfiles reference and I actually needed to copy the waves resources into <hass_dir>/www/comunity/....

I have just copied the whole themes/waves directory structure as well, so I didn't need to change the *.yml file.

Not sure what caused the difference in behavior, but I remember I've lost the background somewhere in December (might be the HA update in December or some other configuration.)

https://github.com/tgcowell/waves/commit/e0255829ab091fbc19fa808eac7c09124a652888 - that change in 2.3.1.1 beta didn't work for me as well

[Zeunas]

Ah I see! Ok good shout. Thanks!

[wipatters]

I've noticed the background is gone as well. BadEendt, What did you do to fix yours?

I've validated everything above, even cleared cache and logged on/in.

[tgcowell]

All,

I'm working on this, this week. In short, the hacsfiles have stopped working (at some point) and I think caching backgrounds for some users.

To resolve the issue all the images will need to be moved to www/waves/ folder and I'll remap and test everything. This will only need to be done once and shouldn't impact any future updates.

Apologies for not picking this up sooner, appears there are lots of background themes that are affected like Waves.

Cheers

[tgcowell]

All,

Please read release 2.4 notes and update once complete, this should resolve everyone's issues.

Thanks again

[bachoo786]

All,

Please read release 2.4 notes and update once complete, this should resolve everyone's issues.

Thanks again

Hi there @tgcowell

I have installed the latest 2.4 version and the weather and background icons is not working for me. The weather icons especially doesn't show. Please look at the screenshot below.

Is it possible to please fix this?

Thanks.

[tgcowell]

Hi @bachoo786,

Please confirm you have completed the following

1. Create a folder within the following location

/config/www/waves

2. Download or move ALL the backgrounds and animated images to the above directory

3. Update to the latest 2.4 Waves version

4. Restart/Reload your themes (via Developer Tools -> Services and search for Home Assistant Frontend: Reload Themes)

If you can completed the following and still having issues, can you please take a snapshot of your structure.

Thanks

[gmaslowski]

@tgcowell what about using base64 encoded images for css inside the yml file?

Like that:

background-image: url("data:image/gif;base64,R0lGODdhAQADAPABAP////8AACwAAAAAAQADAAACAgxQADs=")
}

Ref: https://base64.guru/developers/css/background-image

That might solve the problem of manual steps. Not sure it will work for svgs though.