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.
Hi!
I like the theme so far 
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.
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
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.
Iām pretty much a n00b to HA so Iāll apologize in advance for probably basic questions that āeveryone know the answer toāā¦
-
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?
-
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?
-
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.
TIA
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
cards:
Which I turned into this:
type: entities
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
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.
[ha_root]/themes/noctis.yaml
[ha_root]/resources/ui-lovelace.yaml
[ha_root]/www/popup-background.js
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.