Skip to content

🐵 Dark Blue Theme for Home Assistant

Notifications You must be signed in to change notification settings

vincentwolsink/noctis

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Noctis

Dark Blue Theme with Blue accent Colors for Home Assistant

hacs_badge STARS ISSUES LASTCOMMIT

Screenshot

Installation

Manual Installation

  1. copy the themes folder into your home-assistant folder
  2. add this to your configuration.yaml
frontend:
  themes: !include_dir_merge_named themes
  1. restart home-assistant
  2. select the theme in your user's profile (bottom left)

Optional: I recommend installing Custom Header

HACS

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

Fonts

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

Blur

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.

My other Themes

Aditional Screenshots

PC

Android

About

🐵 Dark Blue Theme for Home Assistant

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%