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;
}
@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?
I can’t seem to get the blur effect to work, is this a common fault?
Somehow, even that are added the FOnt URL to the resources, they are not shown once Noctis theme is chosen
Is there anything else I should do ?
Does no one else have this problems with INPUT time fields, starting with iOS and iPadOS 15.1?
I opnened a bug report but until now, no one replied. And I wasn’t able to solve this with setting corresponding variables ether.
Hi aFFekopp,
love your clean theme. But the behaviour on entity-state-on is not what I expected.
After installation, my switch- and light-cards change icon-colour to blue in on-state. The background stays dark, even on on-state.
According to your screenshots I expected for my switch- and light-cards state-on-dependent…
Have I done something wrong during installation of the theme? Where is the right place do define this behaviour? Can it be defined once (in the themes.yaml or somewhere else) or has it to be defined for each button seperately? And how has it to be definied? Which variable is the right one to set a blue background?
Looking forward for your ideas.
Thank you in advance.
Regards from germany
Lars
