[Important]: Home Assistant 2026.3.0 requires Browser Mod 2.8.0 and vice versa - breaking styling changes

[dcapslock]

Browser Mod 2.8.0 now uses the new ha-dialog updated in Home Assistant 2026.3.0. Dialogs now use webawesome rather than material design. This change means custom popup styling which worked before 2.8.0 may no longer work. Below are known styling updates required after updating to Browser Mod 2.8.0.

Fullscreen on mobile, classic versus other

ha-dialog sets mobile size styles when the dialog has a property type of standard. This interferes with classic style. Browser Mod works around this by setting ha-dialog type to empty "" when style is classic.

Dialog surface background

Set using --ha-dialog-surface-background. If you then want actual card background color to be different than dialog surface, also set --ha-card-background or --card-background-color. These can be set via general styling included with Browser Mod.

type: custom:popup-card
title: Red popup
card:
  type: markdown
  content: I have a red background and white text.
popup_card_id: red-popup
popup_styles:
  - style: all
    styles: |-
      ha-dialog {
        --ha-dialog-surface-background: red;
        --ha-card-background: red;
        --primary-text-color: white;
        color: white;
      }

Backdrop color and filter

Backdrop filter set using --ha-dialog-scrim-backdrop-filter. Color set using --mdc-dialog-scrim-color, a legacy naming.

type: custom:popup-card
title: Custom popup - Backdrop Color & Filter
dismissable: true
card:
  type: markdown
  content: I am a popup has a backdrop color of red and filter of blur (5px)
popup_card_id: popup-backdrop-filter
popup_styles:
  - style: all
    styles: |-
      ha-dialog {
        --ha-dialog-scrim-backdrop-filter: brightness(68%) blur(5px);
        --mdc-dialog-scrim-color: rgba(255,0,0,0.3);
      }

Vertical alignment

Popup vertical centering no longer is based on flex, since the popup is ulyimately the Browser's inbuilt dialog show in Browser's top layer.

Vertical centering

Vertical centering is now set by altering --dialog-surface-margin-top. The default is 40px. Setting this to auto, --dialog-surface-margin-top: auto, in standard Browser Mod styles will center the popup vertically.

...
popup_styles:
  - style: centered
    include_styles:
      - classic
    styles: |
      ha-dialog {
        --dialog-surface-margin-top: auto !important;
      }

See the Example - centered example in styles document for more details.

Move to bottom

To move to bottom you need to set top: unset, bottom: 0 of the actual dialog element so this needs uix.

e.g.

uix:
  style:
    ha-dialog $ wa-dialog $: |
      dialog {
        margin-top: 0 !important;
        top: unset !important;
        bottom: 0 !important;
        margin-bottom: 20px !important;
      }

Slide-in or other animations

As with mdc dialogs, ha-dialog animations need uix to target the dialog element of wa-dialog. Animations can be slightly problematic for wa-dialog as it has its own animation for show/hide (and pulse if dimiss is blocked). Setting animation times to 0 mostly solves this but you may see the popup briefly before animation, which was similar with mdc dialogs.

The following is generally working well.

      uix:
        style:
          .: |
            ha-dialog {
              --dialog-surface-margin-top: auto !important; /* vertically centered */
              --ha-dialog-show-duration: 0;
              --ha-dialog-hide-duration: 0;
            }
          ha-dialog $ wa-dialog $: |
            @keyframes slide-in { from { transform:translateX(100%) } to {
            transform: translateX(0); } }

            dialog {
              animation: slide-in 0.3s forwards;
            }

[antonio1475]

Hi. I'm sorry for asking, that code above is a bit beyond my knowledge... but what is the way to have a custom popup card using the new "native" dialog, so that it's consistent with the more-info dialogs? Or is that not possible?

Thank you for your work.