Theme wrong colors

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?

Should be fixed in next release

https://github.com/home-assistant/home-assistant-polymer/pull/4017

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 :smiley:

1 Like

Thank you…