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

10 Likes

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?

Hi!

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?
Thanks!

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! https://pastebin.com/a6yVb2bQ

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:

gfx.webrender.all
layout.css.backdrop-filter.enabled

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