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
Anyone have this issue? Seems to be missing stuff like check boxes, play buttons in media cards etc…
Hi nach Kassel 
Find you theme great but want to build also the Card-Mod cards . Have installed noctis and want to import your complete Directory Structure to have a lookup at your code to understand the structure. Because I am new to HA I ask myself how to import your config as additional Dash board into to HA next to mine ?
I use the Noctis theme and I think it’s great. I access my HA via two different Windows 10 computers via Edge browser. From one computer I can see the font integrated into Noctis, on the second computer I only see the HA standard font.
I think this is an indication that the HA configuration is basically correct. However, I despair of being able to display the Noctis font on the second computer as well.
What could be the reason for this?
Theme is great! I added 30px rounded card borders and it’s perfect.
Anyone know if/how we can use the blur pop-up background with bubble card pop-ups?
