Slate - A New Dark Theme (Updated!)

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

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:

  token: !secret hacs_token
  theme: true
  python_script: true

The Slate repository can also be found here:

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.



Looks awesome! Thanks.

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

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

Great, love it! Thank you for sharing!

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

Hi! This is a good source for theming info:

1 Like

Thank you very much

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


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

1 Like

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?

It’s possible to change color of badge?Icona

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

Accent color change color of sidebar items…

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.

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:


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.


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

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

Theme updated with calendar fixes.

what elements did you change to fix it?

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