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.

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


  slate:
    # Main colors
    primary-color: '#2980b9'
    accent-color: '#b58e31'
    dark-primary-color: '#2980b9'
    light-primary-color: '#2980b9'
    # Text colors
    primary-text-color: '#FFFFFF'
    text-primary-color: 'var(--primary-text-color)'
    secondary-text-color: '#b58e31'
    disabled-text-color: '#777777'
    label-badge-border-color: 'green'
    # Sidebar
    sidebar-icon-color: '#777777'
    # Background colors
    primary-background-color: '#222222'
    secondary-background-color: '#222222'
    divider-color: 'rgba(0, 0, 0, .12)'
    table-row-background-color: '#292929'
    table-row-alternative-background-color: '#292929'
    # Nav Menu
    paper-listbox-color: '#777777'
    paper-listbox-background-color: '#141414'
    paper-grey-50: 'var(--primary-text-color)'
    paper-grey-200: '#222222'
    # Paper card
    paper-card-header-color: '#2980b9'
    paper-card-background-color: '#292929'
    paper-dialog-background-color: '#292929'
    paper-item-icon-color: 'var(--primary-text-color)'
    paper-item-icon-active-color: '#b58e31'
    paper-item-icon_-_color: 'green'
    paper-item-selected_-_background-color: '#292929'
    paper-tabs-selection-bar-color: 'green'
    # Labels
    label-badge-red: 'var(--primary-color)'
    label-badge-text-color: 'var(--primary-text-color)'
    label-badge-background-color: '#222222'
    # Switches
    paper-toggle-button-checked-button-color: '#2980b9'
    paper-toggle-button-checked-bar-color: '#2980b9'
    paper-toggle-button-checked-ink-color: '#2980b9'
    paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
    paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
    paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
    # Sliders
    paper-slider-knob-color: '#2980b9'
    paper-slider-knob-start-color: '#2980b9'
    paper-slider-pin-color: '#2980b9'
    paper-slider-active-color: '#2980b9'
    paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
    paper-slider-secondary-color: 'var(--secondary-background-color)'
    paper-slider-disabled-active-color: 'var(--disabled-text-color)'
    paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
    # Google colors
    google-red-500: '#b58e31'
    google-green-500: '#2980b9'
    #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'

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

30 Likes

Looks awesome! Thanks.

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

hello
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: https://www.juanmtech.com/themes-in-home-assistant/

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

slate

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
Thanks

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:

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?

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