iOS Dark Mode Theme

basesnow · March 31, 2020, 6:52pm

To make the heading transparent, you just use and RGBA code in the theme’s .yaml file. here is the code for my exact header. This assumes that you are now using customer header instead of compact custom header.

ch-background: rgba(137, 156, 170, 0.8)

In order to get time and date instead of the menu button in top right, you need to have custom header installed. Then click on the top right ellipsis>configure IU>raw configuration editor. Then under customer header add this code (I have since changed up my date and time display a little):

custom_header:
  button_text:
    options: >-
      {{ hours12 }}:{{ minutesLZ }} {{ ampm }} <br> {{ dayNameShort }}, {{
      monthNameShort }} {{ dayNum }}

simposium · March 31, 2020, 6:55pm

It´s work!! thanks apreciated

DEEWAD · April 12, 2020, 8:44am

Hello everyone!

Thank you for this very successful theme.
I have a question, I can’t get the dark sidebar… Should it be automatic?
On the other hand, how to make the other pages of HA be modified too (map, history…)

Thanks to you and take care of yourself !

heartkingz · April 12, 2020, 9:31am

Me neither. Looks like a problem since 0.108.

henry8866 · April 26, 2020, 2:35am

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

kiwijunglist · April 27, 2020, 6:21am

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)

kiwijunglist · April 27, 2020, 7:07am

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.

kiwijunglist · April 27, 2020, 7:14am

OK figured it out after over an hour.

mkanet · April 30, 2020, 2:56am

Thanks so much for this great theme. Here’s mine:

mkanet · May 2, 2020, 6:46pm

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?

tek0011 · May 4, 2020, 2:30pm

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.

koconut · May 4, 2020, 10:30pm

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)'

kiwijunglist · May 4, 2020, 10:34pm

@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)

tek0011 · May 5, 2020, 1:36am

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.

kiwijunglist · May 5, 2020, 1:51am

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

Chompas · May 11, 2020, 9:45am

Hi @basnijholt. Which weather card are you using?

shimpler · May 18, 2020, 2:19pm

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

elgrayso · May 23, 2020, 10:40pm

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

Matchmee · May 24, 2020, 4:59pm

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?

basnijholt · June 12, 2020, 9:45am

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!