iOS Dark Mode Theme

Tags: #<Tag:0x00007f78021d9b98>

@mshrem, it seems like you made --ha-card-background completely transparent.

So you must have changed ha-card-background: rgba(10, 10, 10, 0.4) to ha-card-background: rgba(?, ?, ?, 0).

@bachoo786, the color you quoted, corresponds to rgb(35, 35, 46) in RGB.

To make it transparent you edit (add) a fourth entry, like: rgba(35, 35, 46, 0.5), where the last entry is the transparency.

1 Like

He Bas,

Is there a way to also use the background on the rest of the HA pages (config etc.). Love the dashboard, but in config and such it’s sometimes hard to read stuff.

@RvdHNL, unfortunately, that is not possible as far as I know.

What do you find hard to read? Could you perhaps post a screenshot? Maybe I can improve it :smile:

Seems to mostly be in hacs add-ons:

Oh, that is indeed quite terrible. I will see what I can do about it when I find some time!

Geen stress! Will also check if I can find something (not completely code agnostic :laughing:)

This looks like an excellent theme that I’d love in install, but need some help.

I already have:

frontend:
  themes: !include themes.yaml

in my config file.

The instructions say to add:

themes: !include_dir_merge_named themes

So do I edit mine to be:

frontend:
themes: !inlcude themes.yaml
        !include_dir_merge_named themes

and then create a ‘themes’ directory?

Then, with regard to cloning git, which I’ve never done before, I just use terminal and enter

cd themes/
git clone https://github.com/basnijholt/lovelace-ios-dark-mode-theme.git

Have I got all of that correct?

I’ve installed using HACS.

It’s all there now, just working through getting the transparency to show now.

The ‘background-image:’ line 7 has a load of code after url('data:image/jpeg;base64, is this correct?

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

https://community.home-assistant.io/t/custom-header/155399

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

https://maykar.github.io/custom-header/#styling/advanced

What was the final configuration?

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

frontend:
themes:
        !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:

frontend:
  themes: !include_dir_merge_named themes