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.
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;
}
1 Like
@aFFekopp not sure why, but I don’t have a popup card background at all after uncommenting the blur effect code:
This makes reading the logs quite difficult, as the bur doesn’t seem to work on the Configuration page:
Any ideas how to fix this?
Thanks!
How can i make the blur effect work on more dialog windows? I want to have the effect on entity editor dialogs and edit card dialogs.
Thanks
I am unable to read the maroon/dark red font in Developer Tools > Template. What can I do so that I can read it?
