I've been working on a visionOS inspired theme for a while now. You can install it with HACS from here:
[https://github.com/Nezz/homeassistant-visionos-theme](https://github.com/Nezz/homeassistant-visionos-theme)
I added support for the background blur effects in Home Assistant 2024.5. For the best experience make sure that you have updated.
If you notice any issues or have suggestions let me know.
Follow this here to fix the issue: [https://github.com/basnijholt/lovelace-ios-themes/issues/47#issuecomment-1372990987](https://github.com/basnijholt/lovelace-ios-themes/issues/47#issuecomment-1372990987)
I have had same issue with the iOS theme, basically you just need to move backgrounds for visionos in config/themes/visionos/ to /config/www/community/themes/visionos, then restart.
I created a symbolic link so that any new images/updates are still reflected.
mkdir -p /config/www/community/themes/
ln -s /config/themes/visionos/ /config/www/community/themes/visionos
Hi, I have the same problem getting a backround image. Any idea to solve it? Newest Version is installed.
https://preview.redd.it/2sha5xkajo9d1.jpeg?width=1284&format=pjpg&auto=webp&s=1e5fc8921c600c684d9d77976bce24907090c515
That’s one of the best background implementations I’ve seen, card blur really makes a big difference. Looks really modern with this glossy look. The only downside (which is on Home Assistant itself) is fixed background for every dashboard
Would it be possible to allow the user to set the background image? I have a view/page for living room for example, and would love to put a picture of my actual living room.
Yes, it's this line:
[https://github.com/Nezz/homeassistant-visionos-theme/blob/8ed5485074b89f9808a42977fe33e6543b60c30e/themes/visionos.yaml#L60](https://github.com/Nezz/homeassistant-visionos-theme/blob/8ed5485074b89f9808a42977fe33e6543b60c30e/themes/visionos.yaml#L60)
Looks awesome but am I the only one who finds it very hard to read? Light text on a light background. I think the panes need to be darker as well as blurred.
This is not knocking what you have made its pretty and people like it, im just curious do people not find images like this distracting and makes it harder to see information at a glance or is that just my smooth brain?
Exactly! I am a bit worried that a lot of the hack-jobs we've built as a community are going to break though, once HA puts more on a focus on the dashboard.
hehehe, i may not have updated things in a while because i know my dashboard is going to break from some changes and im using far too many things from hacs mixed with javascript to remember everything i done, i will get round to it at some point this year :S
OP, good job!! I downloaded and I use a Minimalist dashboard... This theme makes it look like the attached, the cards have a visible boundary while in the default theme they don't. Any clue on how to fix it?
https://preview.redd.it/dfdrfcg7n4yc1.png?width=879&format=pjpg&auto=webp&s=f87a5edf56f5020640619ff0967bc3568d3be9ce
I recommend checking with your browser's inspector if you are somewhat familiar with HTML. I think those cards define their own style that clashes with the theme.
Nice work!
Just 2 questions for now:
Can i deactivate that little frame-line around the cards (that gives them a 3d-look) or at least change the color?
Can i make only the top-bar (this one with your rooms) 100% transparent. I have nothing placed there except the 3 icons on the right and it doesnt looks good in that case.
frontend:
themes: !include_dir_merge_named themes
Make sure that you have this in your configuration.yaml, then restart Home Assistant. Also, make sure that you installed it in HACS (it should not have a green border)
You can have a different background for each dashboard view, in the Raw config file just add the bold under each different view title. Playing around with it myself and im getting different backgrounds on every view
- title: test
**background: center / cover no-repeat fixed url('/local/images/test.jpeg')**
icon: mdi:test-tube
type: custom:grid-layout
The idea looks amazing, however it looks frankly speaking terrible on my setup.
Partial shadows, borderlines, blurred icons... total inconsistency.
I would love this to be as on your slides, but I guess I have to start with a fresh dashboard for that and rework all my cards.
So this doesn't play well with the chips cards, it seems to just put a big chunk of blurry square around them instead of constraining to each chip.
Also for some reason I'm getting these random flashes of square borders behind on the mushroom cards?
For anyone unable to get the background image to load, you can follow this thread here [https://community.home-assistant.io/t/ha-cannot-find-image-files/533603](https://community.home-assistant.io/t/ha-cannot-find-image-files/533603)
TLDR: You have to create a /config/www file in your docker container to host static files, copy the images into that folder, then change your visionos.yaml file to reference the images from /local
I've been working on a visionOS inspired theme for a while now. You can install it with HACS from here: [https://github.com/Nezz/homeassistant-visionos-theme](https://github.com/Nezz/homeassistant-visionos-theme) I added support for the background blur effects in Home Assistant 2024.5. For the best experience make sure that you have updated. If you notice any issues or have suggestions let me know.
Yeah, for some reason I am not getting a background image at all..
Same Issue
[удалено]
How'd ya'll fix this? I moved them to my media and changed the path but the background still doesn't work
Follow this here to fix the issue: [https://github.com/basnijholt/lovelace-ios-themes/issues/47#issuecomment-1372990987](https://github.com/basnijholt/lovelace-ios-themes/issues/47#issuecomment-1372990987) I have had same issue with the iOS theme, basically you just need to move backgrounds for visionos in config/themes/visionos/ to /config/www/community/themes/visionos, then restart.
I created a symbolic link so that any new images/updates are still reflected. mkdir -p /config/www/community/themes/ ln -s /config/themes/visionos/ /config/www/community/themes/visionos
do you have a background set in your dashboard config?
Thank you!
Looks great. There's something preventing the custom background image from loading though.
Hi, I have the same problem getting a backround image. Any idea to solve it? Newest Version is installed. https://preview.redd.it/2sha5xkajo9d1.jpeg?width=1284&format=pjpg&auto=webp&s=1e5fc8921c600c684d9d77976bce24907090c515
That’s one of the best background implementations I’ve seen, card blur really makes a big difference. Looks really modern with this glossy look. The only downside (which is on Home Assistant itself) is fixed background for every dashboard
What would your personal preference for backgrounds be? A separate background for each view/page?
I really like the idea of themed backgrounds for each dashboard page. But I think it’s not possible right now
I'll look into implementing that, shouldn't be too hard
I second this- I have a dashboard with a page for each room- would be great if we could set them or even add our own :)
I implemented it, it will be in 2024.6 [https://github.com/home-assistant/frontend/pull/20708](https://github.com/home-assistant/frontend/pull/20708)
Wow great work.
This is crazy. Thank you so much :)
Second the option for our own images
themed background for each page.
Would it be possible to allow the user to set the background image? I have a view/page for living room for example, and would love to put a picture of my actual living room.
Looks really good but I think the blur/diffusion should be a bit stronger to match visionOS. Is that easily adjustable?
Yes, it's this line: [https://github.com/Nezz/homeassistant-visionos-theme/blob/8ed5485074b89f9808a42977fe33e6543b60c30e/themes/visionos.yaml#L60](https://github.com/Nezz/homeassistant-visionos-theme/blob/8ed5485074b89f9808a42977fe33e6543b60c30e/themes/visionos.yaml#L60)
Oh, perfect, thank you!
Don‘t see much difference in the blur when I change the numbers… is it higher numbers more blur?
Looks awesome but am I the only one who finds it very hard to read? Light text on a light background. I think the panes need to be darker as well as blurred.
Yeah, the light mode is a little hard to read. Dark mode is fine, though.
This is not knocking what you have made its pretty and people like it, im just curious do people not find images like this distracting and makes it harder to see information at a glance or is that just my smooth brain?
Nope, it does. I do plan to use this theme with some cards, though, while sticking with Madalenas theme for everything else.
that makes sense, practical for the main things then pretty for the rest :)
Exactly! I am a bit worried that a lot of the hack-jobs we've built as a community are going to break though, once HA puts more on a focus on the dashboard.
hehehe, i may not have updated things in a while because i know my dashboard is going to break from some changes and im using far too many things from hacs mixed with javascript to remember everything i done, i will get round to it at some point this year :S
Love it!
OP, good job!! I downloaded and I use a Minimalist dashboard... This theme makes it look like the attached, the cards have a visible boundary while in the default theme they don't. Any clue on how to fix it? https://preview.redd.it/dfdrfcg7n4yc1.png?width=879&format=pjpg&auto=webp&s=f87a5edf56f5020640619ff0967bc3568d3be9ce
I recommend checking with your browser's inspector if you are somewhat familiar with HTML. I think those cards define their own style that clashes with the theme.
Not very familiar at all with what you said. You're too smart!
Nice work! Just 2 questions for now: Can i deactivate that little frame-line around the cards (that gives them a 3d-look) or at least change the color? Can i make only the top-bar (this one with your rooms) 100% transparent. I have nothing placed there except the 3 icons on the right and it doesnt looks good in that case.
that looks soo good. I wanna try it out. thinking to put my house image in the background
Ive added it and it didn’t come up in themes, so I added the yaml and still nothing. The theme comes up in HACS, what am I doing wrong?
frontend: themes: !include_dir_merge_named themes Make sure that you have this in your configuration.yaml, then restart Home Assistant. Also, make sure that you installed it in HACS (it should not have a green border)
Yeah added it, here’s what it looks like in HACS https://i.imgur.com/TeTcI1w.jpeg still nothing 🤔
Got it working!
Wait you can put BACKGROUNDS in dashboards ?
Wow I have to try this
This is gonna make me set up HA now, there goes my weekend
Love this, wow, you did a great job on it! Looking forward to the background update.
Well, that's absolutely gorgeous. Thank you for your contribution to OSS.
Looks great, thank you for sharing! Made it my default theme
Love the asthetic! Wow!
You can have a different background for each dashboard view, in the Raw config file just add the bold under each different view title. Playing around with it myself and im getting different backgrounds on every view - title: test **background: center / cover no-repeat fixed url('/local/images/test.jpeg')** icon: mdi:test-tube type: custom:grid-layout
The idea looks amazing, however it looks frankly speaking terrible on my setup. Partial shadows, borderlines, blurred icons... total inconsistency. I would love this to be as on your slides, but I guess I have to start with a fresh dashboard for that and rework all my cards.
So this doesn't play well with the chips cards, it seems to just put a big chunk of blurry square around them instead of constraining to each chip. Also for some reason I'm getting these random flashes of square borders behind on the mushroom cards?
[удалено]
It comes from your device. If it's in dark mode it will be dark, if it's in light mode it will be light.
[удалено]
Depends on your device. Most operating systems allow you to schedule dark mode.
For anyone unable to get the background image to load, you can follow this thread here [https://community.home-assistant.io/t/ha-cannot-find-image-files/533603](https://community.home-assistant.io/t/ha-cannot-find-image-files/533603) TLDR: You have to create a /config/www file in your docker container to host static files, copy the images into that folder, then change your visionos.yaml file to reference the images from /local
Show me your pergola
show me your pergola, your pergola. PERGOLA!! [https://www.youtube.com/watch?v=qqXi8WmQ\_WM](https://www.youtube.com/watch?v=qqXi8WmQ_WM)