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
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
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
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.
It doesn’t work this way anymore. I need to update my readme 
You can do this with 
Card-mod - Super-charge your themes!. I have published a new release with the code I’m using. If you have card-mod installed you can uncomment the lines in the bottom to get the blur effect.
Hope this helps you 
@aFFekopp Thanks. You say uncomment the lines, but there are no such lines. Should I add them?
And unfortunately this doesn’t seem to work:
Edit: solved. Thanks @aFFekopp
Works perfectly and looks very good on my wall-tablet.
Thanks!
Hi,
I use this theme and I love it so much!
Is it possible to make entities change color depending of state?
I just see it was no in this theme
Thanks
Is this what you are looking for?
If you add state_color: true to your entities cards the icons will change color.
Could someone upload a noctis.yaml that has card-mod-theme uncommented?
I can not for the love of me get that simple un-commenting to work.
I get errors in configuration check all the time.
noctis:
# Fonts
primary-font-family: 'Raleway,sans-serif'
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
ha-card-header-font-family: "var(--primary-font-family)"
# Text
text-color: '#ffffff'
primary-text-color: 'var(--text-color)'
text-primary-color: 'var(--text-color)'
secondary-text-color: "#BAC0C6"
text-medium-light-color: '#A0A2A8'
text-medium-color: '#80828A'
disabled-text-color: '#626569'
primary-color: 'var(--accent-color)'
# Main Colors
app-header-background-color: '#242e42'
accent-color: '#1A89F5'
accent-medium-color: 'var(--accent-color)'
# Background
background-color: '#242e42'
primary-background-color: 'var(--background-color)'
background-color-2: '#20293c'
secondary-background-color: 'none'
markdown-code-background-color: 'var(--background-color)'
# Card
card-background-color: 'var(--ha-card-background)'
ha-card-background: 'rgba(43,55,78,1)' #'linear-gradient(145deg, #273246, #2e3b53)'
ha-card-box-shadow: "3px 3px 13px -6px rgba(17,35,52,1)"
ha-card-border-radius: "5px"
border-color: 'none'
# Icons
paper-item-icon-color: '#EBEBEB'
paper-item-icon-active-color: 'var(--accent-color)'
# Sidebar
sidebar-background-color: 'var(--background-color)'
sidebar-icon-color: '#98a7b9'
sidebar-selected-icon-color: 'var(--accent-color)'
sidebar-selected-text-color: 'var(--text-color)'
paper-listbox-background-color: 'var(--sidebar-background-color)'
divider-color: 'var(--background-color)'
light-primary-color: 'var(--ha-card-background)'
# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--background-color-2)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'var(--background-color-2)'
# Toggle:
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
mdc-theme-primary: 'var(--accent-color)'
# Switch
switch-unchecked-color: '#70889e'
switch-checked-button-color: 'var(--accent-color)'
switch-unchecked-track-color: 'var(--background-color-2)'
switch-checked-track-color: 'var(--background-color-2)'
# Radio Button
paper-radio-button-checked-color: 'var(--accent-color)'
# Popups
more-info-header-background: 'var(--secondary-background-color)'
paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'
# Tables
table-row-background-color: 'var(--background-color)'
table-row-alternative-background-color: 'var(--ha-card-background)'
# Badges
label-badge-background-color: 'var(--background-color)'
label-badge-text-color: 'var(--text-primary-color)'
label-badge-red: 'rgba(73,85,108,1)'
label-badge-blue: 'rgba(26,137,245,1)'
label-badge-green: 'rgba(0,202,139,1)'
label-badge-yellow: 'rgba(222,176,107,1)'
paper-input-container-focus-color: 'var(--accent-color)'
# Custom Header
ch-background: 'var(--background-color)'
ch-active-tab-color: 'var(--accent-color)'
ch-notification-dot-color: 'var(--accent-color)'
ch-all-tabs-color: 'var(--sidebar-icon-color)'
ch-tab-indicator-color: 'var(--accent-color)'
# Mini Mediaplayer
mini-media-player-base-color: 'var(--text-color)'
mini-media-player-accent-color: 'var(--accent-color)'
# Card-Mod #####################################################################
# Uncomment the Code below if you have card-mod installed and want blur effect #
################################################################################
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;
}