iOS Dark Mode Theme

Tags: #<Tag:0x00007f7806e54928>

@ denver - yes that should be there

1 Like

New to this system, i installed theme. Then I added yo lovelace yaml file:

background: var(--background-image)
cch-background: 'rgba(174, 179, 169, 0.8)'
primary-color: 'rgba(153, 159, 153, 1)'

I have green background but all other things like buttons, headers etc are orange. No idea what i am doing wrong. I have even restarted Home Assistant. Still no change.

@bindujohal, did you install the CCH Lovelace plugin?

nopes is it located in HACS?

Yes, look for “Compact Custom Header” :wink:

FYI, it is now called Custom Header. It was just recently re-written by the developer.

I installed custom header plugin but still shows Orange. Do i need to change something in my YAML file???

ch-background: 'rgba(174, 179, 169, 0.8)' not cch-background: 'rgba(174, 179, 169, 0.8)'

What was the final configuration?

I have installed this theme via HACS but am unable to activate it. I’ve added:

        !include_dir_merge_named themes/

Is the themes.yaml entry still required?

If you added it like that, Home Assistant should throw an error, that is not valid.

if should be:

  themes: !include_dir_merge_named themes

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


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.

  # 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:

1 Like

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

I’ve updated the :tada:

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.