Home Assistant Community

Clear Theme Dark

#1

I created a dark theme based on my clear theme: Clear Theme

Preview

Resources (optional)

Background Image:


Button Card: https://github.com/rodrigofragadf/lovelace-cards/tree/master/tiles-card
Animated Weather Card: https://github.com/bramkragten/custom-ui/tree/master/weather-card
Graph Card: https://github.com/kalkih/mini-graph-card
Slim Header: https://github.com/maykar/compact-custom-header/

Install background image (automatic switch when using light theme)

Save the background image to home-assistant/www/night.jpg
Open the lovelace raw editor in the frontend (top right corner) and add this line to every view:

background: var(--background-image)

Thanks to @thomasloven for finding this.

Theme

dark:
  # Background image
  background-image: 'center / cover no-repeat url("/local/night.jpg") fixed'

  # Colors
  text-color: '#DADADB'                                                           # Grey text
  text-medium-light-color: '#A0A2A8'                                              # Medium-light grey text
  text-medium-color: '#80828A'                                                    # Medium grey text
  text-dark-color: '#6A6B74'                                                      # Dark grey text
  accent-color: '#008bef'                                                         # Blue
  accent-medium-color: '#2686c1'                                                  # Decent blue
  background-color: '#3b4049'                                                     # Dark grey background
  background-color-2: '#484E59'                                                   # Light grey background
  background-card-color: '#434952'                                                # Grey background
  border-color: '#383C46'                                                         # Grey border

  # Header
  primary-color: '#363941'                                                        # Background
  text-primary-color: 'var(--text-color)'                                         # Text
  
  # Left Menu
  paper-listbox-background-color: 'var(--background-color)'                       # Background
  sidebar-icon-color: 'var(--text-medium-color)'                                  # icons
  sidebar-selected-icon-color: 'var(--text-medium-light-color)'                   # Selected row icon and background (15%)
  sidebar-selected-text-color: 'var(--text-color)'                                # Selected row label

  # UI
  paper-card-header-color: 'var(--text-color)'                                    # Title in settings
  primary-background-color: 'var(--background-color)'                             # Background (also title background in left menu)
  mdc-theme-primary: 'var(--accent-medium-color)'                                 # Action Buttons (save, restart etc.)
  
  # Card
  paper-card-background-color: 'var(--background-card-color)'                     # Background
  dark-primary-color: 'var(--text-color)'
  primary-text-color: 'var(--text-color)'
  paper-listbox-color: 'var(--text-color)'
  light-primary-color: 'var(--text-dark-color)'
  secondary-text-color: 'var(--text-medium-color)'
  disabled-text-color: 'var(--text-dark-color)'
  paper-dialog-button-color: 'var(--text-color)'
  secondary-background-color: 'var(--background-color-2)'                         # Background more info title

  # Icons
  paper-item-icon-color: 'var(--text-dark-color)'                                 # Off
  paper-item-icon-active-color: 'var(--accent-color)'                             # On
  
  # Switches
  paper-toggle-button-checked-button-color: 'var(--text-medium-light-color)'      # Knob On
  paper-toggle-button-checked-bar-color: '#009FFF'                                # Background On
  paper-toggle-button-unchecked-button-color: 'var(--text-medium-light-color)'    # Knob Off
  paper-toggle-button-unchecked-bar-color: '#767682'                              # Background Off
  
  # Shadows
  shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'
  shadow-elevation-4dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-6dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-8dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-10dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-12dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-14dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-16dp_-_box-shadow: '0px 0px 0px 3px var(--text-dark-color)'
25 Likes

Clear Theme
#2

Thanks for sharing!

0 Likes

#3

Thanks for this! With some new fonts this is making my Home Assistant look very attractive!

0 Likes

#4

Very nice, I do have1 question. when I access my logbook, the clickable text of my sensors is hardly readable. is there a way to overrule this? I tried looking for it myself but couldn’t find it immediately

0 Likes

#5

That’s a problem in home assistant. You have to change primary-color to a brighter one. But that will also change the color of your header. There is no way to set these to colors distinct.

0 Likes

#6

I feared as much. thanks for the quick reply and the great work!

0 Likes

#7

Hi Arne,
what kind of water detector do you use?

Regards, Chris

0 Likes

#8

Hey, I’m using two Xiaomi Aqara Water sensors (10€). The Aqara sensors in general are very reliable and dirt cheap. I also use about 10 window/door sensors from them without any problems. You just need the Xiaomi Mijia bridge.

0 Likes

#9

I also love the xiaomi sensors - unbeatable for the price.

Did you ever have any problems with hub connectivity? Very often when HA restarts (upgrades, config changes, etc) I have an error that the “xiaomi_aqara” hub wasn’t found (though not all the time).

Love the theme btw, it’s my daily driver at the moment :slight_smile:

0 Likes

#11

How do you make the menu horizontally at the top? I must have miss a feature somewhere.

0 Likes

#12

It’s compact custom header

https://github.com/maykar/compact-custom-header

0 Likes

#13

Thanks :slight_smile: . Never had any issues with the bridge. Only when I kill my wifi and some race condition between the HA server and the xiami hub occurs, I might need to restart HA.

0 Likes

#14

Actually that makes sense. Flaky WiFi in my office!!!

0 Likes

#15

hi, awesome theme!
could be possible change the very dark grey color of the text color in the example?i’ve looked in the theme but i can’t find te mapped text color…

1 Like

#16

I also postulate to change this very dark color…

1 Like

#17

The only way is to change the primary-color which also changes the header background :frowning: .
BUT I’m working on a pull request to the calendar component to change this color to the secondary color instead of primary color.

2 Likes

#18

how do you have the menu bar thin?

0 Likes

#19
1 Like

#20

I added instructions how to install theme dependent background images.

0 Likes

#21

Hi naofireblade, first of all, great job on the theme, I really enjoy both this one and the ‘clear’ skin. If you’d like any help on the pull request, just give me a shout.

0 Likes