Dark Blue Theme with Blue accent Colors for Home Assistant

1. copy the themes folder into your home-assistant folder
2. add this to your configuration.yaml

frontend:
  themes: !include_dir_merge_named themes

3. restart home-assistant
4. select the theme in your user's profile (bottom left)

Optional: I recommend installing Custom Header

1. Go to the Community Store.
2. Search for Noctis.
3. Navigate to Noctis.
4. Press Install.

If you want to use the custom fonts, you need to add this to your ui-lovelace.yaml under resources

- url: 'https://fonts.googleapis.com/css?family=Raleway'
  type: css

If you want the blur effect on your popup cards you need to have card-mod installed and uncomment the following lines in noctis.yaml

card-mod-theme: noctis
  
  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog .mdc-dialog__scrim {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        background: rgba(0,0,0,.6);
      } 
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        box-shadow: none !important;
        border-radius: var(--ha-card-border-radius);
      }
    .: |
      :host {
        --ha-card-box-shadow: none;
      }

(Don't know if necessary anymore) Additionaly if you are using Firefox you need to go into about:config and set both gfx.webrender.all and layout.css.backdrop-filter.enabled to true. You may need to restart Firefox fo it to take effect.

• Dark Teal