Clear Theme Dark

Share your Projects! Themes
1

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

Preview

grafik
grafik1686×734 106 KB

Install via HACS

The theme can now be installed via HACS. The background image will be added automatically

Install manually

Background

Save the background image to home-assistant/www/night.jpg

dark
dark1366×768 86.6 KB

Theme

dark:
  # Background image
  lovelace-background: '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: '#2484C9'                                                  # 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
  app-header-background-color: '#363941'                                          # Background color

  # Text
  primary-color: 'var(--text-color)'
  text-primary-color: 'var(--text-color)'

  # 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-background-color: 'var(--background-card-color)'                           # Entity Registry Background

  # 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
  switch-checked-button-color: 'var(--text-medium-light-color)'                   # Knob On
  switch-unchecked-button-color: 'var(--text-medium-light-color)'                 # Knob Off
  switch-checked-track-color: '#009FFF'                                           # Background On
  switch-unchecked-track-color: '#767682'                                         # Background Off

  # Slider
  paper-slider-active-color: 'var(--accent-color)'                                # Line On
  paper-slider-knob-color: 'var(--text-medium-light-color)'                       # Knob On
  paper-slider-container-color: 'var(--text-dark-color)'                          # Line Off
  paper-slider-knob-start-color: 'var(--text-medium-light-color)'                 # Knob Off

  # Badges
  label-badge-text-color: 'var(--text-color)'
  label-badge-background-color: 'rgba(54, 57, 65, 0.6)'

  # Shadows
  ha-card-box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'

  # HACS
  hacs-badge-color: 'var(--accent-color)'                                         # New Badge
  hacs-status-installed: 'var(--text-color)'                                      # Installed Icon
  hacs-status-pending-restart: 'var(--text-dark-color)'                           # Restart Icon
  hacs-status-pending-update: 'var(--accent-color)'                               # Update Icon

Resources (optional)

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/

41 Likes
2

Thanks for sharing!

1 Like
3

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

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

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.

6

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

7

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

Regards, Chris

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.

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:

11

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

12

It’s compact custom header

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

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.

14

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

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…

43
43753×478 27.9 KB

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?

19
1 Like
20

I added instructions how to install theme dependent background images.

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.