Me neither. Looks like a problem since 0.108.
how can I change the background image to this one?https://raw.githubusercontent.com/basnijholt/lovelace-ios-dark-mode-theme/master/backgrounds/homekit-bg-4.jpeg
I can’t get the background to work.
ios-dark-mode:
# Global
background-image: 'center / cover no-repeat fixed url("/local/bluegradient.jpeg")'
I checked and I can view the background image here
https://homeassistant.myserver/local/bluegradient.jpeg
I restarted home assistant and cleared cache ctrl+f5 in chrome.
I still just have the black background.
I also tried
background-image: 'center / cover no-repeat fixed url("https://homeassistant.myserver/local/bluegradient.jpeg")'
and still not working. Is there something else I need. I installed the theme via HACS. The theme is working just I can’t get the background image to show.
Theme version: 8da47fb
HACS Frontend version: 20200422201603
HACS Installed: 0.24.2
Home Assistant 0.108.9 (docker)
I haven’t put
background: var(--background-image)
anywhere. but i’m not sure where that bit would go or if that part is necessary.
Is it required to enable Lovelace YAML mode in order to be able to see the custom background? I have to disable YAML mode and reboot every time I need to use the GUI editor… and switch to YAML mode and reboot again to get the custom background back. I would much more prefer to just use the regular GUI editor and also see the custom background. Maybe I’m doing something wrong?
Hey all. Im a bit new to HA. Still poking around, getting used to the code, locations, UI, etc.
Obviously I want to mess around with themes right out of the gate. I have a few questions.
-
To run a theme like this do I need to move to Lovelace YAML? I’ve read lots about themes, UI, Lovelace, but I cant really figure out if this is required. If it is required, is this something I want to do? Would I lose out on being able to config parts of the UI, within the UI? ie; If I move to Lovelace YML, do I have to do ALL UI configuration via YAML?
-
I used HACS to install this theme. Its enabled in themes under my user. However, I have the same issue as another person in this thread. The UI shows up with a black background and orange headers, with no transparency. How can I fix this?
Edit: Was able to change the color of the headers through ios-theme-darkmode.yml under primary-color. Now just need to figure out the transparency and background images.
Edit 2: Made the changes the user 3-4 posts above me made and that fixed it:
Thanks. This is an amazing product. I cant wait until I understand it well enough to make my own contributions to the community.
Looks like the inactive toggle switch was changed from white to dark gray. How do I change this back? I tired changing every color in the Toggles group and nothing will change it.
EDIT: Figured it out and went with a medium gray
switch-unchecked-color: '#a8a8a8' # Knob Off
switch-unchecked-button-color: '#a8a8a8' # Knob Off
switch-unchecked-track-color: '#171717'
Alternatively this gives just an outline for the track
switch-unchecked-track-color: 'var(--base01)'
@tek0011 - you can still use GUI with a custom background.
You have to do 4 things to enable background:
Edit the ios-dark-mode.yaml and change the background image reference and the restart H.A.
background-image: 'center / cover no-repeat fixed url("/local/bluegradient.jpeg")'
Copy the image into the www folder
/config/www/bluegradient.jpeg
Check you can view the image in a web browser at your home assistant url
visit http://homeassistantserver:8123/local/bluegradient.jpeg
Use raw configuration editior in the GUI (see my above screenshot) and add
background: var(--background-image)
3 Likes
Thank you @kiwijunglist ! Got the background figured out, and you just helped me completely understand using local files. I was trying to figure out where the files in config/www/ are available at /local/ - I was trying to dig into apache settings, trying to figure out how it was pathing it.
Much appreciated. All is working now.
yes it’s confusing, everyone gets stuck there. I think they should change it
http://homeassistantserver:8123/local/bluegradient.jpeg
would be easier if it was
http://homeassistantserver:8123/www/bluegradient.jpeg
Hi,
this is really cool but I have one question: When using the history card for some data the axis text has a font color which more or less no contrast to the back of the card (using the default settings and green background). Could you please point me where to change the font color of axis?
thanks
I added the raw configuration (your step 4), and can see the standard green background.
As you said earlier, everything works except the background.
I added one of the backgrounds from the ios dark theme background instructions (I chose “homekit-bg-4.jpg”), and put it in the www folder. Then I tried viewing it on a browser but it does not display anything: http://homeassistantserver:8123/local/homekit-bg-4.jpg
In my ios dark mode yaml, I have tried changing the background line to things like "background-image: 'center / cover no-repeat fixed url("/local/homekit-bg-4.jpg")'
but nothing ever changes it. I even commented out this line (so there is no background-image line in the theme, and it still shows the green background image.
I’m not sure what to do
Has anyone had an issue with this not working anymore on web since the latest update? I have had this work every other version/time but now the automation and input boolean is not working anymore. Any thoughts?
I recommend to take a look at GitHub - basnijholt/lovelace-ios-themes: ❤️📱🏠🤖 Themes inspired by iOS Dark ⬛️ and Light ◻️ Mode for Lovelace Home Assistant with different backgrounds by @basnijholt where you install the themes with background. In that way you can easily switch!
@basnijholt I’ve just come across your theme and got it installed. It’s brilliant!
I have a set of buttons for my lights and they don’t all show as on when they’re turned on. Have I misconfigured something or is this a bug/expected behaviour?
I recommend taking a look at the https://github.com/basnijholt/lovelace-ios-themes/ themes. There you can easily switch between backgrounds. Also if you select the “alternative” theme, then you will get the behaviour you want.
Perfect, that is exactly what I was after! All working now, Thanks!