iOS Dark Mode Theme

basnijholt · December 4, 2019, 10:39am

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

basnijholt · December 4, 2019, 10:42am

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

RvdHNL · December 9, 2019, 12:56pm

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.

basnijholt · December 9, 2019, 10:12pm

@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

RvdHNL · December 10, 2019, 7:09am

Seems to mostly be in hacs add-ons:

basnijholt · December 10, 2019, 7:41am

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

RvdHNL · December 10, 2019, 8:05am

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

ashscott · December 13, 2019, 5:05pm

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?

ashscott · December 13, 2019, 8:21pm

I’ve installed using HACS.

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

denver · December 19, 2019, 2:58pm

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

AP05TLE · December 19, 2019, 3:00pm

@ denver - yes that should be there

bindujohal · December 20, 2019, 1:06pm

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.

basnijholt · December 20, 2019, 1:34pm

@bindujohal, did you install the CCH Lovelace plugin?

bindujohal · December 20, 2019, 2:33pm

nopes is it located in HACS?

basnijholt · December 20, 2019, 2:44pm

Yes, look for “Compact Custom Header”

Salty · December 20, 2019, 2:47pm

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

bindujohal · December 20, 2019, 5:00pm

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

mayker · December 20, 2019, 10:22pm

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

gadgetboy · December 31, 2019, 8:45pm

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?

ludeeus · December 31, 2019, 8:50pm

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