synthwave:
  # text
  primary-text-color: '#fff'
  secondary-text-color: '#ffffffca'
  text-primary-color: '#f4eee4'
  disabled-text-color: '#bdbdbd'
  text-light-primary-color: '#fff'

  # main interface colors
  primary-color: '#f92aad'
  primary-background-color: '#2a2139'
  dark-primary-color: '#f92aad'
  light-primary-color: '#241b2f'
  accent-color: '#f92aad'
  divider-color: '#49549539'
  paper-dialog-button-color: '#fff'
  switch-unchecked-button-color: '#fff'
  # iron-icon-fill-color: '#fff'
  yellow: '#ffcc00'
  green: '#72f1b8cc'
  
  ###
  
  # background and sidebar
  card-background-color: '#34294fe6'
  app-header-background-color: 'var(--primary-background-color)'
  paper-card-background-color: 'var(--card-background-color)'
  secondary-background-color: 'var(--light-primary-color)' # behind the cards on state
  ha-card-border-radius: '8px'
  
  # sidebar menu
  sidebar-text-color: 'var(--secondary-text-color)'
  # sidebar-background-color: 'var(--paper-listbox-background-color)' # backward compatible with existing themes
  sidebar-icon-color: 'var(--secondary-text-color)'
  sidebar-selected-text-color: 'var(--primary-text-color)'
  sidebar-selected-icon-color: 'var(--primary-text-color)'
  
  # mwc - for some reason it's buttons
  mdc-theme-primary: 'var(--dark-primary-color)'
  mdc-theme-secondary: 'var(--dark-primary-color)'
  
  # shadows
  ha-card-box-shadow: '0'

  # icons
  paper-item-icon-color: 'var(--secondary-text-color)'  # Off
  paper-item-icon-active-color: 'var(--yellow)' # On

  # switches
  toggle-button-color: 'var(--primary-color)'
  # --toggle-button-unchecked-color: 'var(--accent-color)'
  paper-toggle-button-checked-button-color: 'var(--primary-text-color)' # Knob On
  paper-toggle-button-checked-bar-color: 'var(--dark-primary-color)' # Background On
  switch-checked-color: 'var(--dark-primary-color)' # Background On
  paper-toggle-button-unchecked-button-color: 'var(--primary-text-color)' # Knob Off
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)' # Background Off

  # Sliders
  slider-color: 'var(--primary-color)'
  slider-secondary-color: 'var(--light-primary-color)'
  slider-bar-color: 'var(--disabled-text-color)'
  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(--dark-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)'
  switch-unchecked-track-color: 'var(--primary-text-color)'

  # radio buttons
  paper-radio-button-checked-color: 'var(--paper-toggle-button-checked-button-color)'
  paper-radio-button-unchecked-color: 'var(--paper-toggle-button-unchecked-button-color)'

  # other
  state-icon-color: 'var(--green)'
  table-row-background-color: 'var(--divider-color)'
  table-row-alternative-background-color: 'var(--light-primary-color)'
  
  # Inputs
  mdc-select-fill-color: 'var(--card-background-color)'
  mdc-select-ink-color: 'var(--primary-text-color)'
  mdc-select-label-ink-color: 'var(--primary-text-color)'
  mdc-select-dropdown-icon-color: 'var(--primary-text-color)'
  mdc-text-field-label-ink-color: 'var(--primary-text-color)'
  mdc-text-field-ink-color: 'var(--primary-text-color)'
  mdc-text-field-fill-color: 'var(--card-background-color)'
  input-dropdown-icon-color: 'var(--primary-text-color)'
  # Inputs Ripple/line
  mdc-ripple-color: 'var(--primary-text-color)'
  mdc-text-field-idle-line-color: 'var(--primary-text-color)'
  mdc-text-field-hover-line-color: 'var(--primary-text-color)'
  mdc-select-idle-line-color: 'var(--primary-text-color)'
  mdc-select-hover-line-color: 'var(--primary-text-color)'
  # Inputs Disabled
  mdc-select-disabled-fill-color: 'var(--primary-background-color)'
  mdc-select-disabled-ink-color: 'var(--disabled-text-color)'
  mdc-select-disabled-dropdown-icon-color: 'var(--disabled-text-color)'
  mdc-text-field-disabled-fill-color: 'var(--primary-background-color)'
  mdc-text-field-disabled-ink-color: 'var(--disabled-text-color)'
  mdc-text-field-disabled-dropdown-icon-color: 'var(--disabled-text-color)'
  
  # Template Editor
  codemirror-keyword: '#36f9f6'
  codemirror-operator: '#36f9f6'
  codemirror-variable: '#ff7edb'
  codemirror-variable-2: '#ff7edb'
  codemirror-variable-3: '#ff7edb'
  codemirror-builtin: '#36f9f6'
  codemirror-atom: '#36f9f6'
  codemirror-number: '#f97e72'
  codemirror-def: '#fe4450'
  codemirror-string: '#ff8b39'
  codemirror-string-2: '#ff8b39'
  codemirror-comment: '#848bbd'
  codemirror-tag: '#72f1b8'
  codemirror-meta: '#36f9f6'
  codemirror-attribute: '#fede5d'
  codemirror-qualifier: '#fe4450'
  codemirror-property: 'var(--primary-color)'
  codemirror-type: '#fe4450'
  
  ###

  # UI
  paper-card-header-color: 'var(--text-primary-color)' # Title in settings

  # Left Menu
  paper-listbox-background-color: 'var(--light-primary-color)' # Background
  sidebar-background-color: 'var(--light-primary-color)'

  # bar-card compatibility
  # https://github.com/custom-cards/bar-card
  custom-bar-card-color: 'var(--accent-color)'

  # fix dropdown background
  material-background-color: 'var(--light-primary-color)'

  # Scrollbar
  scrollbar-thumb-color: 'var(--divider-color)'

  # simple-thermostat buttons
  # https://github.com/nervetattoo/simple-thermostat
  st-mode-background: 'var(--primary-background-color)'
  st-mode-active-background: 'var(--dark-primary-color)'
