Applying theme backgrounds

Configuration Frontend
1

Hi all.

Trying to deploy a theme from HACS for the first time. Successfully deployed but the background isn’t showing at all. I’m using this theme:

The above repo states I need to add:

background: var(–background-image)

To lovelace-ui.yaml “or use the RAW editor”.

However I can’t find the lovelace-ui.yaml file anywhere using Studio Code Server add-on which is what I use for editing my configuration.yaml file.

I’m trying to have this theme apply globally to the whole system which I’ve done, but I just can’t get any background to work with it due to the lack of the mentioned lovelace-ui.yaml file!

Any ideas?

Thanks - Steve

2

It’s on top ya screen right side… .
The 3 dots…
There it is

3

Thanks Tadies but I’m really confused still.

I downloaded the theme from HACS and applied to after making the configuration.yaml file changes as stated. (They were already in place).

After applying the theme to my user profile the small theme changes where applied, but no wallpaper. The wallpaper was the main driver.

I’m not familiar with this at all and have limited knowledge and skills with HASS.

I wasn’t tying to assign a wallpaper per view/dashboard, which is what the “RAW configuration” seems to imply.

Under my default dashboard page, under the first page I’ve set:

Blockquote
background-image: >-
center / cover no-repeat fixed
url(‘/hacsfiles/themes/ios-themes/homekit-bg-blue-red.jpg’)
lovelace-background: var(–background-image)

Whilst YAML is good, it’s made no difference at all.

Even if this did work, I don’t want a set this up on each and very dashboard. I was hoping to assign a universal theme across my whole HASS, not just per dashboard or view.

The theme YAML file has:

ios-light-mode-blue-red-alternative:

Global

background-image: “center / cover no-repeat fixed url(‘/hacsfiles/themes/ios-themes/homekit-bg-blue-red.jpg’)”
lovelace-background: var(–background-image)

And in the theme folder I can clearly see the JPG files for the wallaper. For example, under themes/ios-theme/ there is homekit-bg-blue-red.jpg file. When downloaded it’s the wallpaper I want.

This seems incredibly complex for something so simple… Why on earth is it so complicated to have the included wallpaper in a theme set across the whole HASS platform?!

Editing the RAW config in each dashboard seems far too difficult unless someone can help me further, but really what I want is for the file stored here: config/themes/ios-theme/homekit-bg-blue-red.jpg to be the default wallpaper for each and very Lovelace screen.

Is this possible? How can I do this? The documentation on this seems really very poor.

Any help greatly appreciated.

Thanks - Steve

4

It’s not as complicated as it seems. That theme mod is not exactly up to date.

For example if you create your own theme, you’ll see the file structure has changed

Your Theme:
  modes:
    dark:
      lovelace-background: center / cover no-repeat fixed url('/local/pics/space.png')
       
    light:
      lovelace-background: center / cover no-repeat fixed url('/local/pics/bluespace.jpg')

edit the file locations to match your system.

5

Thanks all, appreciate it.

For anyone in my situation, I ended up copying the PNG file I wanted to use from the theme to the www folder. Then for each one of my dashboards I added in the following line:

  • background: center / cover no-repeat url(“/local/homekit-bg-blue-red.jpg”) fixed

(Note there’s a hyphen / dash rather than a bullet point at the start!)

From what I understand you can’t apply this universally which I find bizzare and disapointing. Thought Lovelace would allow for that to be honest with you - be nice to have it on dashboards which you can’t edit the raw config from…

Good luck and thanks again for the community help