FYI: keyboard key āaā opens up assist.
seeing the new Home Assistant Kiosk mode functionality, but cant find anything in the HA docs about thatā¦
Supposed to be new to the design of the Frontend, and yet there is nothing on it on the developers documentation, or the design preview?
whatās the buzzā¦? How do we enable manually/dynamically
Browser Mod 2.7.0 has Frontend setting for the new Kiosk mode. 2.7.0 currently in final beta with 2.7.0 PR to master awaiting approval.
Yeah but I meant the HA feature itself.
Yes. The one and same. Beta release notes hass-browser_mod/documentation/configuration-panel.md at 9375ab2fa0ed101cb0f531ded82b5e218a36aef9 Ā· thomasloven/hass-browser_mod Ā· GitHub
sorry Darryn, I believe I didnt express myself clearly.
I understand where the setting in Browser-mod is set. What I looked for, is some explanation of the new feature in Home Assistant itself. What is Kiosk-mode in HA, and where is this described/documented?
I was answering this part of your question. As to what itās does, the PRs you posted are all that I am aware of. You will note there that the feature seems to be designed for the companion apps to enable.
Thank you for all your work!
Does this also apply to 2.6.4? All of a sudden (as in I donāt know when this changed 
) I can no longer change the ID in the browser_mod config panel (thereās no input field) or using the developer tools action. All users are admin (local) and tried three machines thus far. I found out yesterday when I added a new machine.
I do see youāre close to releasing 2.7 so if itās the same issue Iāll of course wait for that.
Yes, change is in Home Assistant 2026.1.0. Also broken is the ability to modify the Sidebar order due to that dialog being migrated from ha-dialog to ha-wa-dialog (lots of dialogs being migrated over time).
Yes, 2.7.0 due out any day.
2 Likes
Good morning,
in my dashboard I use popups with Browser Mod, and I had set a background blur when opening the popup.
perform_action: browser_mod.popup
data:
card_mod:
style:
ha-dialog$: |
div.mdc-dialog div.mdc-dialog__scrim {
backdrop-filter: blur(5px);
}
div.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border: none !important;
border-style: solid !important;
border-color: white !important;
}
content:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: light
entity: light.sonoff_10008c9c6e
For the past few days it has stopped working. I think it might be due to the update to Home Assistant 2026.1, but Iām not completely sure.
Iām currently using Browser Mod version 2.6.4, and I also tried the latest beta, but the issue persists.
Is anyone else experiencing the same problem, or does anyone have ideas on how to fix it?
Thank you.
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.
So style --ha-dialog-scrim-backdrop-filter: blur(5px) and you will be all set.
e.g.
tap_action:
action: perform-action
perform_action: browser_mod.popup
data:
card_mod:
style:
ha-dialog$: |
:host {
--ha-dialog-scrim-backdrop-filter: blur(5px);
}
div.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border: none !important;
border-style: solid !important;
border-color: white !important;
}
content:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: light
entity: light.bed_light
1 Like
many many thanks!!!
1 Like
Browser Mod 2.7.0 Released
v2.7.0 release notes.
Noteworthy new feature is Browser Mod Tile and Badge. Readme more about these HERE.
7 Likes
(edited, as i mixed up some thingsā¦) While weāre at blurringā¦ i have set some code in my custom theme to blur background when using āmore-infoā popups. Can be your above code similarily entered in themes for all card mod popups, too? Currently i have this in my theme to blur more-info popups and it works:
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(7px) !important;
--ha-dialog-scrim-backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(4px) !important;
background: rgba(0,0,0,0.1);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 2em;
box-shadow: 0em 0em 2em white;
min-width: 95% !important;
position: absolute;
}
but this doesnāt work for card mod popupsā¦
Try setting --ha-dialog-scrim-backdrop-filter at :host { }.
e.g.
card-mod-more-info-yaml: |
ha-dialog $: |
:host {
--ha-dialog-scrim-backdrop-filter: blur(5px);
}
.mdc-dialog {
background: rgba(0,0,0,0.1);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 2em;
box-shadow: 0em 0em 2em white;
min-width: 95% !important;
position: absolute;
}
EDIT: Updated selector to ha-dialog $:
1 Like
Thanks for your time. Sadly i mixed some things up and i corrected my post above ā¦ i believe that my code above is only for āmore-infoā popups, but what iād like is to have a general code for browser-mod popups, too. Is that possible ? So i wouldnāt have to enter āblurā code to each popup cardā¦
If you have not tagged your Browser Mod popup it will use card-mod-more-info(-yaml). If you tag your popup then the card mod theme section is card-mod-browser-mod-popup-<tag>(-yaml). See hass-browser_mod/documentation/popups.md at a7e85561745a43e7d61535215cd72948f0f11a24 Ā· thomasloven/hass-browser_mod Ā· GitHub for more on card mod theme with tagged/multiple popups.
1 Like
If i found correctly (i didnāt even know about tags, so i doubt iām using them) i donāt have tags (things like ātag: lightsā in my code). I have only this for displaying popups:
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
(My knowledge about css etcā¦ is pretty limited, sorryā¦)
And with your code (your answer to firstcolle) āmore-infoā dialogs are with blurred background, but fire-dom-event popups are not, which would indicate that obviously my popup doesnāt use ācard-mod-more-infoāā¦ ?
If i insert this code into my card then it is blurred:
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
card_mod:
style:
ha-dialog$: |
:host {
--ha-dialog-scrim-backdrop-filter: blur(5px);
}
But, as said, iād like to āgeneralizeā that.
After checking I updated my earlier code where I had the selector wrong. All is working in my testing. I am using your tap_action and have this set in my theme.
card-mod-more-info-yaml: |
ha-dialog $: |
:host {
--ha-dialog-scrim-backdrop-filter: blur(5px);
}
1 Like
Yeah!! this part now works!
However, now my āotherā part stopped working. I have code below set for my more-info history to be shown full width screen: when i click on, say, outside temperature i get history full screen:
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(7px) !important;
-webkit-backdrop-filter: blur(4px) !important;
background: rgba(0,0,0,0.1);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 2em;
box-shadow: 0em 0em 2em white;
min-width: 95% !important;
position: absolute;
}
.: |
each part alone works, but ā¦ it takes some knowledge to combine these two settings togetherā¦
EDIT: itās actually pretty simple, itās just āto find itā ā¦ itās soooo much card mod can doā¦ consequently searching gives gazillions of hitsā¦
hereās my solution:
card-mod-more-info-yaml: |
ha-dialog $: |
:host {
--ha-dialog-scrim-backdrop-filter: blur(5px);
}
$: |
.mdc-dialog {
backdrop-filter: blur(7px) !important;
-webkit-backdrop-filter: blur(4px) !important;
background: rgba(0,0,0,0.1);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 2em;
box-shadow: 0em 0em 2em white;
min-width: 95% !important;
position: absolute;
}
.: |
Thanks again, Darryn!
1 Like