Slate - A New Dark Theme (Updated!)

Share your Projects! Themes
1

Just wanted to share the dark theme I’ve been tweaking. Very satisfied with where it’s at.

ha_1
ha_11920×1080 121 KB

More photos can be found here.

Slate can now be found on HACS! Just make sure you enable the viewing of Themes in your HACS config. There aren’t really any additional updates to this theme for the time being, but you’ll be ready if anything changes.

Simply add these lines under your HACS configuration:

hacs:
  token: !secret hacs_token
  theme: true
  python_script: true

The Slate repository can also be found here: https://github.com/seangreen2/slate_theme

Also, for those of you who use the Simple Thermostat Lovelace Card, here is an easy fix to have you selected HVAC mode show in color again. Simply remove the line in the below image in the ‘simple-thermostat.js’ file. Credit to this post for finding this.

code

36 Likes
2

Looks awesome! Thanks.

3

Wow really nice, it’s my default theme now! Thx for sharing!

4

hello
thank you for the theme
can you tell how can i i put in my HA ??

5

Great, love it! Thank you for sharing!

6

This is now my default theme. Thank you for your contribution!

7

Hi! This is a good source for theming info: https://www.juanmtech.com/themes-in-home-assistant/

1 Like
8

Thank you very much

9

Another comment saying… well, it’s the third theme I’ve added to my HA project, new favorite and probably will become the general default.

tl;dr- good work

1 Like
10

slate

is there any way to make the Dark Sky Summary sensor icon to be white to match the rest?

1 Like
11

It’s great theme, I love it. But i have a problem with zone icons on map. They are based on primary-text-color. Is there a way to set them to another color? Because I use white color and white icons on white map, it’s hard to see them. Or if is there way to set whole map to “night” mode?

12

It’s possible to change color of badge?Icona
Thanks

13

That would be the “accent color” value in the theme.yaml.

14

Accent color change color of sidebar items…

15

Did it also change what you were trying to?

Changing the Accent Color will also change a lot of other things as well, not just one particular item in the YAML above.

16

I really like your theme and have used it as a basis for a few tweaks I’ve made.

I wanted the on/off states to be a little brighter (like the base ui) and just today I realized the accent color is the color used for the notification indicator. So I changed that color to not use the same as the primary color in order to be able to see when it’s notifying.

here is a before and after shot of that:

ex2
ex21314×166 8.1 KB

ex

The one thing I haven’t figured out how to change is the color of URL’s. Unclicked URL’s are dark blue and clicked URL’s are dark purple so as you can imagine they are exceptionally hard to see on a dark background.

ex3

Does anyone know a way to change the colors of those items?

17

I would love to know this as well, it really annoys me that it is different from the rest

18

Theme updated with calendar fixes.

19

what elements did you change to fix it?

20

These elements:

 #Changes to fix history/logbook menus
    lumo-primary-text-color: '#2980b9'
    lumo-secondary-text-color: '#2980b9'
    lumo-primary-color: '#2980b9'
    #Calendar day numbers
    lumo-body-text-color: '#b58e31'
    #Calendar/Date-Picker Background
    lumo-base-color: '#222222'
    #Month/Year header
    lumo-header-text-color: 'var(--lumo-body-text-color)'
    #DayOfWeek Header
    lumo-tertiary-text-color: 'var(--lumo-body-text-color)'
    lumo-shade: '#222222'
    lumo-shade-90pct: 'rgba(34, 34, 34, .9)'
    lumo-shade-80pct: 'rgba(34, 34, 34, .8)'
    lumo-shade-70pct: 'rgba(34, 34, 34, .7)'
    lumo-shade-60pct: 'rgba(34, 34, 34, .6)'
    lumo-shade-50pct: 'rgba(34, 34, 34, .5)'
    lumo-shade-40pct: 'rgba(34, 34, 34, .4)'
    lumo-shade-30pct: 'rgba(34, 34, 34, .3)'
    lumo-shade-20pct: 'rgba(34, 34, 34, .2)'
    lumo-shade-10pct: 'rgba(34, 34, 34, .1)'
    lumo-shade-5pct: 'rgba(34, 34, 34, .05)'
    lumo-tint-5pct: '#222222'
1 Like