primary-color: is setting the color to paper-toggle-button-checked-button-color
dark:
# Background image
background-image: 'center / cover no-repeat url("/local/background1.jpg") fixed'
# Colors
text-color: '#DADADB' # Grey text #DADADB
text-medium-light-color: '#A0A2A8' # Medium-light grey text #A0A2A8'
text-medium-color: '#80828A' # Medium grey text #80828A
text-dark-color: '#6A6B74' # Dark grey text#6A6B74
accent-color: '#008bef' # Blue
accent-medium-color: '#2686c1' # Decent blue
background-color: '#3b4049' # Dark grey background'#3b4049'
background-color-2: '#484E59' # Light grey background'#484E59'
background-card-color: '#434952' # Grey background'#434952'
border-color: '#383C46' # Grey border #383C46
# Header
primary-color: '#363941' # Background'#363941'
text-primary-color: 'var(--text-color)' # Text
# Left Menu
paper-listbox-background-color: 'var(--background-color)' # Background
sidebar-icon-color: 'var(--text-medium-color)' # icons
sidebar-selected-icon-color: 'var(--text-medium-light-color)' # Selected row icon and background (15%)
sidebar-selected-text-color: 'var(--text-color)' # Selected row label
# UI
paper-card-header-color: 'var(--text-color)' # Title in settings
primary-background-color: 'var(--background-color)' # Background (also title background in left menu)
mdc-theme-primary: 'var(--accent-medium-color)' # Action Buttons (save, restart etc.)
# Card
ha-card-border-radius: '10px'
paper-card-background-color: 'var(--background-card-color)' # Background
dark-primary-color: 'var(--text-color)'
primary-text-color: 'var(--text-color)'
paper-listbox-color: 'var(--text-color)'
light-primary-color: 'var(--text-dark-color)'
secondary-text-color: 'var(--text-medium-color)'
disabled-text-color: 'var(--text-dark-color)'
paper-dialog-button-color: 'var(--text-color)'
secondary-background-color: 'var(--background-color-2)' # Background more info title
# Icons
paper-item-icon-color: 'var(--text-dark-color)' # Off
paper-item-icon-active-color: 'var(--accent-color)' # On
# Switches
paper-toggle-button-checked-button-color: 'var(--accent-color)'
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
paper-toggle-button-checked-ink-color: 'var(--accent-color)'
paper-toggle-button-unchecked-button-color: 'var(--text-medium-light-color)'
paper-toggle-button-unchecked-bar-color: '#767682'
paper-toggle-button-unchecked-ink-color: '#767682'
# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-knob-start-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--accent-color)'
paper-slider-active-color: 'var(--accent-color)'
# paper-slider-container-color:
# paper-slider-secondary-color:
# paper-slider-disabled-active-color:
# paper-slider-disabled-secondary-color:
This # Switches
paper-toggle-button-checked-button-color: ‘var(–accent-color)’
this is not working… my swicth is using the color from primary-color: ‘#363941’
I’m getting the same, it used to work OK in v0.99 for me, it’s only broken since v0.100.0 for me.
Would it be worth opening an issue on github for this?
1 Like
Same issue here, primary = active toggle button. Glad I’m not the only one.
Same issue here…
Same issue as well
Quick question for those with this issue, are you using the older ‘states’ UI or the newer ‘lovelace’ UI?
For me this issue occurs with both UI’s.
I use lovelace but they both do the same for me
thought i was alone glad to see im not…
Same problem here, did anyone found solution for this?
I added the following 4 lines to my themes.yaml and the color came back as before for the switch toggle…
switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
switch-unchecked-button-color: "var(--paper-toggle-button-unchecked-button-color)"
switch-unchecked-color: "var(--paper-toggle-button-unchecked-bar-color)"
switch-unchecked-track-color: "var(--paper-toggle-button-unchecked-bar-color)"
I am using HA version 0.101.1
Have a great day !
3 Likes
That did the trick, thank you!
Updating to 0.101.2 didn’t help.
Thank you!
1 Like
Awesome That fixed the issue 
1 Like
Thank you…