iOS Dark Mode Theme

My bad - that was a copy/paste error into the post. I added it correctly.

Must I still create a themes.yaml file? I thought HACS handled the installation?

themes/ is still not the same as themes

no

it does

to clarify for others who still have no idea on how to make the header transparent.

The “A” in RGBA. Stands for the level of transparency.

Hence : primary-color: rgba(155, 155, 155, 0.25) <-- 0.25 is the level of transparency/opacity. A value of 1 makes the colour solid.

It took me 30 minutes of googling to figure this out.

Hope this helps save that time for someone else still scratching their heads.

I’ve read through this, have the Theme installed, along with Custom Header, but I’m just not figuring out where to change the current Orange header color and the background image.

Where do I modify to change header color?

Do I download the background image or was it already downloaded? ios-dark-mode.yaml line that references the background contains the image, how do we link another background image?

By default the background image is embedded. If you want to reference an external background image, you would do something like this in the ios-dark-mode.yaml where the path “local” is the “config/www” folder in your install.

ios-dark-mode:
  # Global
  background-image: 'center / cover no-repeat fixed url("/local/bluegradient.jpeg")'
  ch-background:  'rgba(174, 179, 169, 0.8)'
  primary-color: rgba(255, 159, 9, 1)  # from Apple systemOrange dark mode

The ch-background line controls the color of the header, overwriting the primary-color line that normally controls it. Note that in the past, it was cch-background, but with new version of custom header, it is ch-background.

1 Like

Code is wrong if you are using new custom header (instead of cch)

Updated is here: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/18

1 Like

@Salty perfect instructions and thank you for the .yaml example! Up and running!

I’ve updated the README.md :tada:

Hi,
I have still the same error when checking config before restart after adding below text to configuration.yaml.

frontend: !include frontend.yaml
  themes: !include_dir_merge_named themes

Have no more idea how to solve it… Should I ignore error message and restart instead?

Please read the HA docs for splitting your config, that is super not valid.

Thanks for source of knowledge. I’m still learning this beautiful system, but it’s not easy :slight_smile:
Trying some more sophisticated gadgets without basics its not a good idea…

Hi! why is the link to background this big?
https://paste.ubuntu.com/p/qfHMPGCMwW/

That is not a link, it is the actual image in binary form. That’s why it’s so long.

1 Like

Is there a particular reason media cards don’t become radius’d cards?

Hi!

Thanks for a great theme. Is it possible however to change the color of the light bulbs? In this picture one of them are on and the other off, but it’s not easy to tell which one :slight_smile:

light

@antonholmstedt, take a look at this line!

  state-icon-active-color: "#FFF"  # or make light icons yellow when active: rgba(255, 214, 10, 1)

Perfect, thank’s a lot!

Hi,

Question: I successfully applied this theme for my laptop. However I notice my Android phone
Is not entirely using this theme. Am I missing something here? My fire tablet is showing similar view. It looks like the default view.

Please disregard my earlier post. In order for my themes to be same for all my devices, I need to go to my profile> Select Themes> Choose the themes under drop down. Did not realize I have to do this for all my devices.

Has anyone a list of colour changes I’ve to do to suit the green background of this theme. I have the background and both primary-color: “rgb(40,200,80)” and accent-color: “rgb(40,200,80)” are there any others i should change