How do you make a theme permanent?

I’m very new to HA so please be kind. :slight_smile:

I added a theme in my configuration.yaml file and named it “Night”. Once added, I am able to call it using the “services” option. I would like to make the change permanent so I wont need to manually call it each time I restart HA.

Here is my “frontend” config from my configuration.yaml file.

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: 'hsl(var(--huesat) 16%)'
     secondary-background-color: 'hsl(var(--huesat) 16%)' # background behind cards
     paper-listbox-background-color: 'hsl(var(--huesat) 16%)'
     paper-card-background-color: 'hsl(var(--huesat) 12%)'
     paper-dialog-background-color: 'var(--paper-card-background-color)'
     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%)'

go to the menu>configuration>General>Scroll down and select it.

Either that or set it at boot/start time.

I’m not seeing a “menu” or “configuration” option. Here is a capture of my UI.

It is missing… do you have the config: option in your configuration.yaml? I think that’s what is needed. If you don’t want to do it that way you can add an automation that runs at startup

- alias: 'Set theme at startup'
  initial_state: 'on'
  trigger:
   - platform: homeassistant
     event: start
  action:
    service: frontend.set_theme
    data:
      name: Night

I added “config:” and now I’m seeing the options. Also, I added the automation and its all working now.

Thank you very much!

:thumbsup: