OK, some problems are there. Most important one. The sidebar is left out. That was one of the reasons I had to go that far up. The GIFs start at the top left directly after the sidebar ends. Plus the windows like settings are not themed, too.
There is no option with card_mod to style background across sidebar and view. You can probably do each independently, though sidebar itself styles background-color so you would need to override with background as needed.
1 Like
I think something changed with 2026.1, every card dialog (when editing card, more-info) was transparent after updating…
After commenting out these lines it fixed it and even my long time issue I had where the effects dialog was moved to the right.
Anyway I can get back the blur backdrop? Maybe its a new theme variable now. Also the uncommented ha-card-backdrop-filter does nothing now I think too.
2026.1 introduced default for ha-dialog-scrim-backdrop-filter (existing var) to default to ha-dialog-scrim-backdrop-filter: brightness(68%) with the update for energy period selector so the calendar popup dialog gets this backdrop filter. So for backdrop filter this will take precedence over dialog surface backdrop filter (Note: I could only replicate transparent with an invalid/none ha-dialog-surface-background).
So set ha-dialog-scrim-backdrop-filter: blur(20px) and you will be all set.
1 Like
That brought back the blur background but the dialog card still the normal colour.
Used to have it on the card itself, only the more-infos not all cards (before 2026.1)
Side note but not sure if you remember me telling you about my broken drop downs, according to this github issue it appears the blurred backround was causing the issue for my drop downs the whole time… weird ha-dialog-surface-backdrop-filter breaks dropdowns · Issue #26113 · home-assistant/frontend · GitHub
I am not following what you are trying to set for background. Is it card or dialog?. Can you describe a bit more what you are trying to achieve?
Yes, noted this a few weeks ago trying to figure out another similar report. It is all to do with how setting backdrop-filter has implications on parent context for elements, which leads to incorrect calcuations for the dropdown placement. I did a write up somewhere - I will find and post here.
EDIT: [Bug?]: backdrop-filter moves ha-list several 100px to the right · Issue #560 · thomasloven/lovelace-card-mod · GitHub. Mushroom select is where the issue was reported. Including my response below for information here:
FYI: The issue will somehow be related to how backdrop-filter affects the BackdropRoot and how that affects the stacking context making the menu surface offset be relative to where the backdrop-filter is applied rather that the viewport.
See Filter Effects Module Level 2
Basically anything on the list in the link I shared (BacdropRootTriggers) may cause the issue. E.g. filter, opacity not 1 etc.
1 Like
Before 2026.1, the card in the dialog had the blurred effect on it, it looked like this, kinda like an IOS look
It used to be these before 2026.1
ha-dialog-surface-backdrop-filter: blur(20px)
ha-dialog-surface-background: "var(--nav-background)"
(example screenshot from Google, I mean the dialog itself not the background around/behind it)
It will be related to the scrim backdrop filter now being applied. Have a look at Backdrop Root triggers now in my earlier post edited.
My dropdown menus aren’t effected right now because the blurred effect was lost after 2026.1 but that is good to know.
Just saw I actually always had this scrim variable in my theme but it was for something different not this.
I was looking at dev tools and I can’t even find the variable for the dialog card background anymore that definitely changed which is why its broken in 2026.1 now.
Used to be this.
# More info dialog blur and background
ha-dialog-surface-backdrop-filter: blur(20px)
ha-dialog-surface-background: "var(--nav-background)"
Here’s an issue on the frontend confirming it used to work (also with the dropdown issue of course lol but thats fine)
I can’t find any other changes other than the scrim backdrop filter. Possibly locked up in scrim being in shadowRoot and more-info content being a slot. I suggest start by unsetting the scrim backdrop filter added in 2026.1 and then see if it allows what you had set before. Note: you will likely get this all right just before more-info migrates from ha-dialog to ha-wa-dialog and you will need to work it all out again.
1 Like
Ok doing so kind of worked, but the blur effect isn’t there, so something related to the blur effect is changed now it seems.
What I did (top one doesn’t matter)
PS, I found this in my theme but tbh I don’t remember what it does since its been a while since I edited my theme lol, do you know?
dialog-backdrop-filter: brightness(80%) var(--app-header-backdrop-filter);
1 Like
Would be redudant now as --ha-dialog-scrim-backdrop-filter used in preference. Maybe different in the past. 
Thanks for your help! I think it’s fixed now after testing in both light and dark mode, even the edit dialogs.
# card blur backdrop - IOS style
ha-card-backdrop-filter: blur(12px)
# More info dialog blur and background
ha-dialog-surface-backdrop-filter: blur(20px)
ha-dialog-surface-background: "var(--nav-background)"
# Navbar
nav-background: "rgba(20, 20, 20,0.50)"
# Dialog background blur
ha-dialog-scrim-backdrop-filter: blur(20px)
1 Like
The screenshot is mine. 
. I edited it to a new variable property, for the popup card you have to set it to transparent, then you will see the blur effect
card-mod-more-info: |
:host([card]) .content .container {
padding: 0px !important;
}
ha-dialog {
--vertical-align-dialog: var(--tablet-popup-align-dialog) !important;
--dialog-surface-margin-top: var(--tablet-popup-margin-top) !important;
--dialog-box-shadow: 0 0px 16px 4px rgba(101,115,134, .15), 0 16px 64px 32px rgba(101,115,134, .5) !important;
--ha-dialog-scrim-backdrop-filter: blur(6px) brightness(0.3);
--mdc-theme-surface: var(--popup-background-color) !important;
--mdc-theme-surface: transparent;
Just tested and for me that makes a red line appear on my sidebar, I edited my post above with the working code now, seems fixed for me.
mdc-theme-surface: red
trying to follow the above (from davids 🔹 Card-mod - Super-charge your themes! - #2324 by davidnestico), and having a bit of a problem what the exact issue is here now… The screenshots above are all using black backgrounds, and I have no idea what we are supposed to see. (of course, not talking about the drop-down being rendered in the wrong place…)
asking because I dont have backdrop issues myself in the more-info’s or dialogs, so, want to understand the real concern here.
Would it be possible to show with a couple of clear cards in a lighter theme what the before/after is?
Hello,
Many input entities, like input_select or input_datime, have almost 50% of waisted space by default.
I’m trying to reduce it, but I don’t get it with with card-mod in my theme yaml.
Can someone please help me ?
Thanks
Try this
card-mod-row-yaml: |
ha-select $: |
.mdc-select__anchor {
--ha-select-height: 38px; /* Select overall height */
}
.mdc-select--filled .mdc-select__anchor::before {
height: 28px; /* Height of selected item */
}
.mdc-select__anchor .mdc-floating-label--float-above {
transform: translateY(-110%) scale(0.65); /* Adjust label to suit */
}
1 Like
card-mod additions don’t work in any theme. Card-mod works in cards, but not in themes. How to fix it?