Arc-Dark Home Assistant

gistfile1.txt

frontend:
  themes:
    Night:
      # MyVariables
      base-hue: '220' #Controls the base (and accent) color hue (0-360) | 0=Red 60=Yellow 120=Green 180=Cyan 240=Blue 300=Magenta 360=Red
      base-sat: '5%' #Controls the saturation of the theme (0%-100%) | 0%=Grey 100%=Full Saturation
      # MyVar
      huesat: 'var(--base-hue), var(--base-sat),'
      # Primary Color
      primary-color: 'hsl(var(--huesat) 36%)' #header colors and some text colors
      dark-primary-color: 'hsl(var(--huesat) 60%)'
      light-primary-color: 'hsl(var(--huesat) 90%)'
      accent-color: 'hsl(var(--huesat) 30%)'
      # Backgrounds
      primary-background-color: '#414857'
      secondary-background-color: '#343D46' # background behind cards
      paper-listbox-background-color: '#2b303b'
      paper-card-background-color: '#2b303b'
      paper-dialog-background-color: '#2b303b'
      table-row-background-color: 'hsl(var(--huesat) 12%)'
      table-row-alternative-background-color: 'hsl(var(--huesat) 10%)'
      # Divider
      divider-color: 'hsla(0, 0%, 0%, 0)'
      dark-divider-opacity: '0'
      light-divider-opacity: '0'
      dark-secondary-opacity: '1'
      # Text colors
      primary-text-color: 'hsl(var(--huesat) 90%)'
      text-primary-color: 'hsl(var(--huesat) 80%)'
      secondary-text-color: 'hsl(var(--huesat) 80%)'
      disabled-text-color: 'hsl(var(--huesat) 70%)'
      sidebar-text_-_color: 'hsl(var(--huesat) 90%)'
      sidebar-text-color: 'hsl(var(--huesat) 90%)'
      paper-card-header-color: 'hsl(var(--huesat) 90%)'
      paper-button-ink-color: 'hsl(var(--huesat) 50%)'
      # Text Adjustments
      paper-font-headline_-_letter-spacing: '-0.5px'
      paper-font-headline_-_font-weight: '400'
      paper-font-body1_-_font-weight: '300'
      # Nav Menu
      paper-listbox-color: 'hsl(var(--huesat) 50%)'
      paper-grey-50: 'hsl(var(--huesat) 50%)'
      paper-grey-200: 'hsl(var(--huesat) 10%)' #active menu item
      # Paper card
      paper-item-icon-color: 'hsl(var(--huesat) 40%)'
      paper-item-icon-active-color: 'var(--paper-item-icon-color)'
      paper-item-icon_-_color: 'var(--paper-item-icon-color)'
      paper-item-selected_-_background-color: 'hsla(0, 0%, 0%, 0.2)'
      paper-item-selected_-_color: 'hsl(var(--huesat) 20%)' #?
      paper-tabs-selection-bar-color: 'hsla(0, 0%, 0%, 0.2)'
      paper-tab-ink: 'hsl(var(--huesat) 70%)'
      paper-input-container-color: 'hsl(var(--huesat) 60%)'
      # Labels
      label-badge-red: 'var(--paper-card-background-color)'
      label-badge-border-color: 'var(--label-badge-red)'
      label-badge-background-color: 'var(--paper-card-background-color)'
      label-badge-text-color: 'var(--primary-text-color)'
      # Shadows
      shadow-elevation-2dp_-_box-shadow: '0px 0px 0px 0px hsl(var(--huesat) 10%)'
      shadow-elevation-16dp_-_box-shadow: '0px 0px 0px 0px hsl(var(--huesat) 25%)'
      # Switches
      paper-toggle-button-checked-button-color: 'hsl(var(--base-hue), 90%, 50%)'
      paper-toggle-button-checked-bar-color: 'hsl(var(--huesat) 25%)'
      paper-toggle-button-unchecked-button-color: 'hsl(var(--huesat) 25%)'
      paper-toggle-button-unchecked-bar-color: 'hsl(var(--huesat) 5%)'
      # Sliders
      paper-slider-knob-color:  'hsl(var(--base-hue), 90%, 50%)'
      paper-slider-knob-start-color: 'hsl(var(--base-hue), 80%, 25%)'
      paper-slider-pin-color:  'hsl(var(--base-hue), 90%, 50%)'
      paper-slider-active-color:  'hsl(var(--base-hue), 90%, 50%)'
      paper-slider-container-color: 'hsl(var(--huesat) 28%)'
      paper-slider-secondary-color: 'hsl(var(--huesat) 90%)'
      paper-slider-disabled-active-color: 'hsl(var(--base-hue), 80%, 25%)'
      paper-slider-disabled-secondary-color: 'hsl(var(--base-hue), 80%, 25%)'
      paper-dialog-color: 'hsl(var(--base-hue), 20%, 80%)'