How do I change the colour of the toggle's

Configuration Frontend
1

I have been using the following theme for quite some time and love it but recently the colour of the toggle’s has changed and it is now really hard to see them on my phone. What do I need to change in the theme to make them a different colour?

Lovelace
Lovelace1907×630 82.9 KB

Here is the theme:

darkmix:
  # Main colors
  primary-color: '#03A9F4'
  accent-color: 'red'
  dark-primary-color: 'var(--primary-color)'
  light-primary-color: 'var(--primary-color)'

  # Text colors
  primary-text-color: 'white'
  text-primary-color: 'var(--primary-text-color)'
  secondary-text-color: 'silver'
  disabled-text-color: 'silver'
  label-badge-border-color: 'lime'

  # Background colors
  primary-background-color: '#141A32'
  secondary-background-color: '#141A32'
  divider-color: 'var(--primary-color)'

  # Table rows
  table-row-background-color: 'var(--primary-background-color)'
  table-row-alternative-background-color: 'var(--primary-background-color)'

  # Nav Menu
  paper-listbox-color: 'var(--primary-color)'
  paper-listbox-background-color: 'var(--primary-background-color)'
  paper-grey-50: 'var(--primary-text-color)'
  sidebar-icon-color: 'var(--primary-color)'

  # Paper card
  paper-card-header-color: 'var(--primary-color)'
  paper-card-background-color: "#1E2747"
  paper-dialog-background-color: 'var(--primary-background-color)'
  paper-item-icon-color: 'var(--primary-color)'
  paper-item-icon-active-color: 'lime'
  paper-item-icon_-_color: 'lime'
  paper-item-selected_-_background-color: '#282C34'
  paper-tabs-selection-bar-color: 'lime'

  # Labels
  label-badge-red: 'var(--primary-color)'
  label-badge-text-color: 'var(--primary-text-color)'
  label-badge-background-color: 'var(--paper-card-background-color)'

  # Switches
  paper-toggle-button-checked-button-color: 'var(--primary-color)'
  paper-toggle-button-checked-bar-color: 'var(--primary-color)'
  paper-toggle-button-checked-ink-color: 'var(--primary-color)'
  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: 'var(--primary-color)'
  paper-slider-knob-start-color: 'var(--primary-color)'
  paper-slider-pin-color: 'var(--primary-color)'
  paper-slider-active-color: 'var(--primary-color)'
  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: 'red'
  google-green-500: 'lime'

  # Date picker
  lumo-primary-text-color: 'var(--primary-color)'
  lumo-body-text-color: 'var(--primary-color)'
  lumo-primary-color: 'var(--primary-color)'
  paper-grey-200: 'var(--paper-card-background-color)'
2 Likes
2 
  # Switches
  switch-checked-button-color: "#E7CC5B" #"#5F9BEA" 
  switch-checked-track-color: "#404D64"
  switch-unchecked-button-color: "#636466"
  switch-unchecked-track-color: "#636466"

I’m no expert but try adding / changing the above (from my current theme), should give you a mild yellow & grey.

3

Thank you I’ll give that a try.

4

Brilliant,

Thank you I can now set exactly what I want

1 Like