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
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?
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.
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
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)'
Thanks for sharing this. After adding this to the theme you can call the service frontend.reload_themes and the changes will be visible, so no need to restart HA.
I wanted to share what I have done with slate regarding HA release 2023.2. This is mostly a personal preference, but it should give one an idea of how to make changes themselves if they so desire.
Home Assistant’s “State Color” scheme came out in 2022.12 and after much discussion, it was redone in 2023.2 and with it, more theme variables are now official. These variables are related to coloring icons based on their state (on/off, etc), their domain (light, switch, cover, etc.) and even their device class. The state color scheme applies to Lovelace cards that have their state_color set to true.
However not everyone likes some of the default colors and this is where the personal preferences comes in.
I have found that “covers” which are purple when the covers are on, just don’t look good with the slate theme.
Lights and switches are a “yellow” color when on, which is fine with slate, but I wanted them to look like slate’s “accent” color which is more of a gold color.
To make these changes, I have added the following to the end of the slate.yaml file:
# few fix for 2023.2 State Colors
state-active-color: 'var(--accent-color)'
state-light-on-color: 'var(--accent-color)'
state-light-active-color: 'var(--accent-color)'
state-switch-on-color: 'var(--accent-color)'
state-switch-active-color: 'var(--accent-color)'
state-cover-open-color: '#FFFFFF'
state-cover-active-color: '#FFFFFF'
state-cover-shade-open-color: '#FFFFFF'
state-cover-garage-open-color: '#FFFFFF'
Another thing I wanted to share that is outside the scope of the slate theme, but is related to icon colors…
If you have colored lights, when they are set to white, the HA light bulb icon will also be white. When a non-colored light bulb is on, it is set to state-light-active-color which is not white, it will be either yellow (default), or slate’s accent (if using my changes above). Some people like it this way, but I thought this to be inconsistent. There is not anything that can be done in slate.yaml, but I found a solution I thought I would share. First, you have to use Card Mod for this solution. Card Mod allows one to override the style of a lovelace card, and with a little bit of work, one can set icon colors, and in particular if a colored light is set to white. With my Lovelace Entities Card, for each entity that is a colored light, I have set the style as follows:
type: entities
entities:
- entity: light.my_colored_light
card_mod:
style:
hui-generic-entity-row $ state-badge $: |
ha-state-icon {
{% if is_state(config.entity,'on') and state_attr(config.entity, 'hs_color' )[1] <= 10 %}
color: var(--state-light-active-color) !important;
filter: none !important;
{% endif %}
}
title: TITLE OF ENTITY CARD
state_color: true
Here is another one to consider…
When using a slider with the more-info card say for a light dimmer, the value of the slider when moving the slider up and down is shown to the left of the slider itself in the oval shaped bubble. The slider’s value however can’t be seen in the oval bubble because the value is white (primary-text-color) and is against a white background (clear-background-color).
To fix this, I added to the slate theme the following
clear-background-color: 'var(--primary-background-color)'
And it seems to work fine:
