Slate - A New Dark Theme (Updated!)

Just a heads up, but 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

1 Like

I know, it’s not possible to change card settings. But 2 conditional card did the trick. Thank you :slight_smile:

Are there any requirements for this? Because mine doesn’t quite look like the screenshots. Sidebar and background is unchanged, and the cards seem darker than they should be.

No requirements. What does your themes.yaml or your theme configuration look like?

Also, try clearing the cache for your HA page and see if it updates.

Nevermind, turns out I didn’t trigger the giant ‘turn on theme’ in my account options…

1 Like

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

2 Likes

Hope you don’t mind if I ask what setting did you use to enable themes in HACS?
I have:

hacs:
  token: !secret hacs_github_token
  sidepanel_title: "HACS" #default: Community
 #sidepanel_icon: #default: "mdi:alpha-c-box"
 #appdaemon: false #default: false
 #python_script: false #default: false
  theme: true #default: false

but I don’t get THEME to show up in HACS.

Here’s how mine looks in my config:

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

Weird, that is exactly how my config looks and I am not seeing themes in the store either

Here is my config and the theme shows up all the way at the bottom of the “store” tab.

hacs:
  token: !secret github_access_token
  appdaemon: True
  theme: True

“slate” is the only theme that shows up there right now so the list is pretty short.

did you restart. changes to custom components typically require a restart of hass

I restarted but what was also needed was to click “reload data” in HACS. Thanks

1 Like

I got mine to finally work but it was a bit random. I restarted several times, did the “reload data”, etc. What I observed was that HACS eventually got around sometime much later to doing a background task, and then THEMEs showed up.

I installed HA 0.99.2 and the unused entities shows a white table. When I change the theme to default it is shown. So i think the theme should be updated. Which lines are needed to add?

@Thuurke

Edited the code in the original post for the 0.99.x fix.

The HACS version was kindly updated by another contributor a few days ago.

1 Like

Hey all, from here on out I will not be maintaining the theme yaml on this thread anymore for new updates.

Please use HACS or you can copy from the Slate respository here: https://github.com/seangreen2/slate_theme

1 Like

Hi. Anyone noticed this theme stopped displaying correctly in the latest HA version?

I’m on 2021.11.0. I haven’t noticed anything not working.

As an FYI for 2022.3, parts of the UI had some of their colors changed. Most noticeable is in the Developer’s tools at places where you input text. Based on suggestions some users made in the 2022.3 release thread, I came up with the following and simply added it to the end of my slate.yaml file (and rebooted HA to pick up the changes):

  # fix for input text boxes in [2022.3]
  input-idle-line-color: 'var(--dark-primary-color)'
  input-hover-line-color: 'var(--primary-text-color)'
  input-disabled-line-color: 'var(--disabled-text-color)'
  input-outlined-idle-border-color: 'var(--disabled-text-color)'
  input-outlined-hover-border-color: 'var(--disabled-text-color)'
  input-outlined-disabled-border-color: 'var(--disabled-text-color)'
  input-fill-color: 'var(--card-background-color)'
  input-disabled-fill-color: 'var(--card-background-color)'
  input-ink-color: 'var(--primary-text-color)'
  input-label-ink-color: 'var(--secondary-text-color)'
  input-disabled-ink-color: 'var(--disabled-text-color)'
  input-dropdown-icon-color: 'var(--primary-text-color)'
5 Likes