Background not working about lovelace-ios-themes

[erugaman]

Will you be so kind to be more specific please. Where did you exacly copied the image files, witch directory? and witch files? Try everything but so far no luck. thx in advanced

You need to copy the jpg files to /config/www/community/themes/ios-themes. Create any folders that don’t already exist. You will have to refresh your browser/app to see any changes I think.

The original files are located in: /config/themes/ios-themes/.

Move them or copy them to: /config/www/community/themes/ios-themes/.

1.- first create the directory structure
2.- be sure to make this change inside the configuration.yaml

     frontend: 
       #themes: !include /config/themes/ios-themes/ios-themes.yaml
       themes: !include_dir_merge_named themes

That's all.

[MikeMitterer]

OK, I'm running home assist in Docker. So - no HACS.
What I did:

Make sure you have this setting in configuration.yaml

frontend:
  themes: !include_dir_merge_named themes

    # cd to the folder where your configuration.yaml is
    mkdir -p www/themes/ios-themes/
 
    # Clones this repo to tmp
    git clone https://github.com/basnijholt/lovelace-ios-themes.git tmp

   # Copy all images to the puplic ios-themes folder
   cp tmp/themes/*.jpg www/themes/ios-themes

   # Replace the hacsfiles-path with local-path and create the themes file
   cat tmp/themes/ios-themes.yaml | sed 's#/hacsfiles#/local#g' > themes/ios-themes.yaml

   # Remove the cloned tmp-Folder
   rm -rf tmp

Restart HA!

Hope this helps

[eilandert]

OK, I'm running home assist in Docker. So - no HACS. What I did:

Make sure you have this setting in configuration.yaml

frontend:
  themes: !include_dir_merge_named themes

    # cd to the folder where your configuration.yaml is
    mkdir -p www/themes/ios-themes/
 
    # Clones this repo to tmp
    git clone https://github.com/basnijholt/lovelace-ios-themes.git tmp

   # Copy all images to the puplic ios-themes folder
   cp tmp/themes/*.jpg www/themes/ios-themes

   # Replace the hacsfiles-path with local-path and create the themes file
   cat tmp/themes/ios-themes.yaml | sed 's#/hacsfiles#/local#g' > themes/ios-themes.yaml

   # Remove the cloned tmp-Folder
   rm -rf tmp

Restart HA!

Hope this helps

This helps, thank you

[jarodwsams]

You need to copy the jpg files to /config/www/community/themes/ios-themes. Create any folders that don’t already exist. You will have to refresh your browser/app to see any changes I think.

The original files are located in: /config/themes/ios-themes/.

Move them or copy them to: /config/www/community/themes/ios-themes/.

1.- first create the directory structure 2.- be sure to make this change inside the configuration.yaml

     frontend: 
       #themes: !include /config/themes/ios-themes/ios-themes.yaml
       themes: !include_dir_merge_named themes

To add a little specificity, because this just worked for me:
Whether you're running HA as the OS or in a Docker, simply run these two commands from the root of your configuration directory (probably /config):

mkdir -p www/community/themes/ios-themes
cp themes/ios-themes/*.jpg www/community/themes/ios-themes

Restart HA using the method appropriate for your deployment, and viola!
(I did not have to modify my configuration.yaml file. It already had the themes: !include_dir_merge_named themes line)

[nalin29]

This can be solved by copying over the image files to the correct location in /config/www/community/themes/ios-themes/ . Not sure why they got deleted after update. Reinstalling via HACS did not remedy this. So I manually copied the background files to the expected locations. This may also have been related to the recent HACS update but I cannot confirm since I updated both Home Assistant and HACS at the same time without reloading.

[sddgit]

Does anyone have any clue yet why this has happened exactly? My themes are all in /config/themes. Within that folder there is, of course, ios-themes, that contains the theme and all the background images. The themes themselves point to /hacsfiles/themes/ios-themes to get the background images. This, in effect, is /config/www/community/themes/ios-themes. Sure enough, creating that folder and copying all the jpg's there fixes the issue (as suggested above). But does that mean that path existed previously, perhaps created during the theme installation, but has now somehow been deleted?

[asemev]

I don't understand why you guys are having issues?

I just uninstalled the themes and reinstalled them, and everything worked just fine.

nope that doesnt fix the issue. only way to make it work is to copy the files to the www folder.... tried so many things before doing this.

[Neonodes]

For me, I didn't need to change much at all. It's just about making sure the ios-themes.yaml is pointing at the jpeg files. My process was this:

1. Make sure you have this entry in your configuration.yaml document:

frontend:
  themes: !include_dir_merge_named themes

2. As described by erugaman above, create this directory structure: /config/www/community/themes/ios-themes/. It doesn't actually have to be this. Anywhere in the www folder will do.
3. Copy only the jpeg files over to the new ios-themes folder but leave the ios-themes.yaml document where it is.
4. Open ios-themes.yaml and change all of the URL's to reflect the new location of your jpeg files. For example I changed mine to:

background-image: "center / cover no-repeat fixed url('/local/community/themes/ios-themes/homekit-bg-dark-green.jpeg')"

Note: "local" is referencing the www folder.

This worked PERFECTLY! glad this was the fix...it was driving me nuts why all of my backgrounds disappeared...

Same here, works like a charm! Thanks a lot for the solution!

[ghzgod]

I agree, uninstall and reinstall did not fix this. I think something persistent hangs even after uninstall. But as mentioned by asemev, copying the files to the www folder fixed it immediately.

[sddgit]

Mine has never had the trailing slash, but still failed before I copied the images around.

[Maximilian118]

For me, I didn't need to change much at all. It's just about making sure the ios-themes.yaml is pointing at the jpeg files. My process was this:

1. Make sure you have this entry in your configuration.yaml document:

frontend:
  themes: !include_dir_merge_named themes

2. As described by erugaman above, create this directory structure: /config/www/community/themes/ios-themes/. It doesn't actually have to be this. Anywhere in the www folder will do.
3. Copy only the jpeg files over to the new ios-themes folder but leave the ios-themes.yaml document where it is.
4. Open ios-themes.yaml and change all of the URL's to reflect the new location of your jpeg files. For example I changed mine to:

background-image: "center / cover no-repeat fixed url('/local/community/themes/ios-themes/homekit-bg-dark-green.jpeg')"

Note: "local" is referencing the www folder.

[t0kn4r]

got the same problem. this helped so far:
adding a background in RAW confing
not so elegant but works ;)
blue/red img and using Dark Theme instead

[Tassel8062]

Same issue here nuc with latest HA. I just have a black back ground, should be dark mode red-blue

[ca1p3]

Same issue here nuc with latest HA. I just have a black back ground, should be dark mode red-blue

Same here love the dark red blue, it seems like the pathway to the image is the problem

[t0kn4r]

Same issue here nuc with latest HA. I just have a black back ground, should be dark mode red-blue

Same issue here nuc with latest HA. I just have a black back ground, should be dark mode red-blue

Same here love the dark red blue, it seems like the pathway to the image is the problem

you can solve it with my unelegant way until its solved :)

[basnijholt]

I am on vacation at the moment, so if anybody can submit a pull request, I’m happy to except it.

[kirush0280]

• for problem
  Home Assistant 2022.12.8
  Supervisor 2022.12.1
  Frontend 20221213.1 - latest
  In console:
  GET http://192.168.100.129:8123/hacsfiles/themes/ios-themes/homekit-bg-blue-red.jpg 404 (Not Found)
  
  
  Tried to move files in www path and change in .yaml - didn't helps :(

[nalin29]

Looking at a diff from last HACS release it looks like changes were made for populating the public endpoints under /hacsfiles to be asynchronous in this commit perhaps this is not working as intended and preventing the files from being copied over.

[kirush0280]

This can be solved by copying over the image files to the correct location in /config/www/community/themes/ios-themes/ . Not sure why they got deleted after update. Reinstalling via HACS did not remedy this. So I manually copied the background files to the expected locations. This may also have been related to the recent HACS update but I cannot confirm since I updated both Home Assistant and HACS at the same time without reloading.

+1 Yes, its helps.

[Daw34]

Cześć, jakie pliki mam skopiować ?

[Daw34]

This can be solved by copying over the image files to the correct location in /config/www/community/themes/ios-themes/ . Not sure why they got deleted after update. Reinstalling via HACS did not remedy this. So I manually copied the background files to the expected locations. This may also have been related to the recent HACS update but I cannot confirm since I updated both Home Assistant and HACS at the same time without reloading.

+1 Yes, its helps.

Hi, what files should I upload?

[sddgit]

I too have run into this problem after installing the latest HACS and HA at the same time. I’ve tried copying the images around to various locations, but haven't got anywhere yet. Any more detailed pointers would be appreciated.

[mjakeseaton]

This can be solved by copying over the image files to the correct location in /config/www/community/themes/ios-themes/ . Not sure why they got deleted after update. Reinstalling via HACS did not remedy this. So I manually copied the background files to the expected locations. This may also have been related to the recent HACS update but I cannot confirm since I updated both Home Assistant and HACS at the same time without reloading.

This did the trick.

[erugaman]

This can be solved by copying over the image files to the correct location in /config/www/community/themes/ios-themes/ . Not sure why they got deleted after update. Reinstalling via HACS did not remedy this. So I manually copied the background files to the expected locations. This may also have been related to the recent HACS update but I cannot confirm since I updated both Home Assistant and HACS at the same time without reloading.

+2 Yes, its helps.

[AFPhome]

This can be solved by copying over the image files to the correct location in /config/www/community/themes/ios-themes/ . Not sure why they got deleted after update. Reinstalling via HACS did not remedy this. So I manually copied the background files to the expected locations. This may also have been related to the recent HACS update but I cannot confirm since I updated both Home Assistant and HACS at the same time without reloading.

+2 Yes, its helps.

Will you be so kind to be more specific please. Where did you exacly copied the image files, witch directory? and witch files?
Try everything but so far no luck.
thx in advanced

[sddgit]

Will you be so kind to be more specific please. Where did you exacly copied the image files, witch directory? and witch files? Try everything but so far no luck. thx in advanced

You need to copy the jpg files to /config/www/community/themes/ios-themes. Create any folders that don’t already exist. You will have to refresh your browser/app to see any changes I think.

[basnijholt]

I don't understand why you guys are having issues?

I just uninstalled the themes and reinstalled them, and everything worked just fine.

[mjakeseaton]

I don't understand why you guys are having issues?

I just uninstalled the themes and reinstalled them, and everything worked just fine.

Maybe the latest Home Assistant update fixed it?

[bcmitri]

I don't understand why you guys are having issues?

I just uninstalled the themes and reinstalled them, and everything worked just fine.

Mine worked fine for a while on some devices, but not on others. When it failed varied from one device to the next, so I assume it was the result of caching.

Implementing the fix above fixed it for all my devices (and other themes that were impacted by the same issue).

[AFPhome]

Will you be so kind to be more specific please. Where did you exacly copied the image files, witch directory? and witch files? Try everything but so far no luck. thx in advanced

You need to copy the jpg files to /config/www/community/themes/ios-themes. Create any folders that don’t already exist. You will have to refresh your browser/app to see any changes I think.

The original files are located in: /config/themes/ios-themes/.

Move them or copy them to: /config/www/community/themes/ios-themes/.

1.- first create the directory structure 2.- be sure to make this change inside the configuration.yaml

     frontend: 
       #themes: !include /config/themes/ios-themes/ios-themes.yaml
       themes: !include_dir_merge_named themes

That's all.

Thx

Every theme works !!!!

[AFPhome]

I don't understand why you guys are having issues?

I just uninstalled the themes and reinstalled them, and everything worked just fine.

Sorry, doesn't work for me
Also after a reboot.

[brucek1642]

I think I found the the fix

Broken config
frontend:
themes: !include_dir_merge_named themes/

Remove the / at the end of the line and now everything works. Something must have change in the last version or two

frontend:
themes: !include_dir_merge_named themes

[Ringo982]

the workaround did not worked for me.
My configuration.yaml contains:
frontend:

your configuration.

themes: !include_dir_merge_named themes

your configuration.

and i moved files to /config/www/community/themes/ios-themes

but nothing changed also after a full restart of HA, and a full browser refresh

Need help...

[dMopp]

Why is the path wrong? Does this theme requires an update ?

[CC-JION]

Will you be so kind to be more specific please. Where did you exacly copied the image files, witch directory? and witch files? Try everything but so far no luck. thx in advanced

You need to copy the jpg files to /config/www/community/themes/ios-themes. Create any folders that don’t already exist. You will have to refresh your browser/app to see any changes I think.

The original files are located in: /config/themes/ios-themes/.

Move them or copy them to: /config/www/community/themes/ios-themes/.

1.- first create the directory structure 2.- be sure to make this change inside the configuration.yaml

     frontend: 
       #themes: !include /config/themes/ios-themes/ios-themes.yaml
       themes: !include_dir_merge_named themes

That's all.

work for me😐

[ScottEKendall]

For me, I didn't need to change much at all. It's just about making sure the ios-themes.yaml is pointing at the jpeg files. My process was this:

1. Make sure you have this entry in your configuration.yaml document:

frontend:
  themes: !include_dir_merge_named themes

2. As described by erugaman above, create this directory structure: /config/www/community/themes/ios-themes/. It doesn't actually have to be this. Anywhere in the www folder will do.
3. Copy only the jpeg files over to the new ios-themes folder but leave the ios-themes.yaml document where it is.
4. Open ios-themes.yaml and change all of the URL's to reflect the new location of your jpeg files. For example I changed mine to:

background-image: "center / cover no-repeat fixed url('/local/community/themes/ios-themes/homekit-bg-dark-green.jpeg')"

Note: "local" is referencing the www folder.

This worked PERFECTLY! glad this was the fix...it was driving me nuts why all of my backgrounds disappeared...

[khalilbeby]

I don't understand why you guys are having issues?

I just uninstalled the themes and reinstalled them, and everything worked just fine.

when i chenge themes background not changed

[markcichy]

For me, I didn't need to change much at all. It's just about making sure the ios-themes.yaml is pointing at the jpeg files. My process was this:

1. Make sure you have this entry in your configuration.yaml document:

frontend:
  themes: !include_dir_merge_named themes

2. As described by erugaman above, create this directory structure: /config/www/community/themes/ios-themes/. It doesn't actually have to be this. Anywhere in the www folder will do.
3. Copy only the jpeg files over to the new ios-themes folder but leave the ios-themes.yaml document where it is.
4. Open ios-themes.yaml and change all of the URL's to reflect the new location of your jpeg files. For example I changed mine to:

background-image: "center / cover no-repeat fixed url('/local/community/themes/ios-themes/homekit-bg-dark-green.jpeg')"

Note: "local" is referencing the www folder.

This worked PERFECTLY! glad this was the fix...it was driving me nuts why all of my backgrounds disappeared...

Same here, works like a charm! Thanks a lot for the solution!

So, this kinda worked. It solved the repointing. However, doesn't matter which theme variant I choose, I always get the homekit-bg-blue-red.jpg as the background JPEG. Even though they are all in the new dir and properly ref'd in the *.yaml config.

**EDIT: I should note that this ONLY occurs on a RASPI imaged HA instance. I have another instance running inside a vSphere VM and it works perfectly fine.

Any ideas?

[broyuken]

I made all the changes to the yaml and moved the images but it still doesn’t work.

[eilandert]

I have a Homeassistant Yellow, I have to do the following to make it work: (after updates too, I guess)

sed -i s/hacsfiles/local/g /homeassistant/themes/ios-themes/ios-themes.yaml

Somehow it takes some time sometimes, probably due to caching (i am behind a public reverse proxy)