Noctis Theme

Here is a dark blue theme I have created. Has been on HACS for a while, thought I would share it here too.

For more infos and screenshots see the readme


Thanks for sharing, the theme looks amazing. I also had a look at your personal Home Assistant config, which is equally as interesting! I love the use of the button_card_templates.

what should I change in the config to change the orange color here?


I like the theme so far :slight_smile: But I can’t get to work the blurry background. I added the js as stated, both in the “www” folder and the “ui-lovelace.yaml”. However I do not know how to double check if it is being loaded.

Any tips to debug this?

Edit: could I be missing some other dependency? I only have your theme and custom-header.js

Can you please post the lovelace config for this, so I can take a look at it.

What browser are you using? I think it doesn’t work with every browser.

Here you have it!

I’m using Firefox 73.0.1 (64-bit)

I found that by default it doesn’t work in firefox.

You can go into about:config in firefox and set both:


To true. You may need to restart firefox fo it to take effect. I don’t know if there are any safety implications by enabling this, but other browsers have it enabled by default.

PS: I don’t see

- url: /local/popup-background.js
  type: js

in your ui-lovelace.yaml

1 Like

Yeah, sorry, removed since it didn’t work, but it still applies. Added it again and applied all the changes in the about:config tab. It is working :slight_smile:

Thank you! Maybe you can add this to the README so anyone with Firefox can get it to work

1 Like

Awesome theme! Thank you! How do you put Card Titles outside of the Card itself like in the screenshot you uploaded?

This is one of the cleanest themes I’ve yet seen. Appreciate all the subtle touches, will look great on a wall panel and not call too much attention to itself. Thanks for making it.

How do you set up those buttons along the top to be highlighted in blue when they’re “on”? Like Remote UI. I installed this but my button cards only change the color of the icon, not the background.

EDIT: Nevermind, realized I need the custom component button-card.

Those are Markdown Cards styled with Card-mod. You can check out my config on github.

1 Like

I’m pretty much a n00b to HA so I’ll apologize in advance for probably basic questions that “everyone know the answer to”…

  1. I spent awhile looking at theme’s yesterday, settled on Noctis… was excited to exit the white background of the default theme… Got it installed, but then was surprised some colors are different when I switched from Firefox v84.02 (64bit) on my laptop to using the HA app on iOS… is that just an IOS thing? Does it happen with all themes? TBH it doesn’t bother me enough to change themes because of it, but I’m curious if that’s just a normal thing to expect, or if Noctis is just like that?

  2. When I log out and back in the theme defaults back to default, I’m sure I didn’t do something but I’m not sure what to address. Can anyone point me the correct place to read?

  3. Very confused about installing things, fortunately I’m not afraid of YAML files and understand config files etc… and know how to clone things from github… directions to follow are all over the place tho… the biggest black hole in my knowledge seems to be constant references to installing from HACS, which appears to be the “easy way”, but HACS seems to be a blackhole, nothing i’ve seached for in add-on seems to be there.

I decided to post here because 1 seems directly related to Noctis, I realize 2 and 3 are more general questions but decided to opt for a single post rather than asking things in multiple places…

TIA for any help anyone can provide, and I admit I’m only a week into HA…

The NOCTIS theme is indeed a relaxed and modest theme. However I would like to be able to kinda ‘group’ my buttons visibly. They are currently in a vertical-stack, but I cannot find the way to set the background of the vertical stack to anything else but transparent, as what it is now.

I have been scratching my head, but cannot find it. It must be something obvious.


Found it myself. It is even simpler than I expected.
Instead of using a vertical-stack, use the built-in ‘Entities’ card and identify the cards as being entities.

This was the original:

type: vertical-stack

Which I turned into this:

type: entities

The custom cards within the - initially - vertical stack are perceived as entities. For the built-in cards, you need to change it into:

'custom:hui-<built-in card name>-card'

Source: Palm Springs Theme

It’s not quite that simple nowadays

1 Like

I noticed and thanks @thomasloven for pointing it out. The hui-horizontal-stack and hui-vertical-stack work flawlessly, the ones starting with a ‘g’ are less reliable :slight_smile:
hui-gauge-card and hui-grid-card have persistent issues. I’ll switch over to either other custom cards in combination with your proposed hui-element.

Good stuff!

I can’t quite get the blurry background, maybe I have the folders wrong.


What am I doing/placing wrong?

PS: using HA core.

I’ve also tried adding the ref to /local/popup-background.js through the Lovelace config in the UI, it seems to be loaded by the network calls in the browser developer tools.