Host/element path selector

Applying this guide requires the & Host/element path selector

When viewing media in the Home Assistant Media panel, the dialog used is large in size. This guide shows how to make the dialog fullscreen, without title so you can focus on the media itself. Videos will fit by default and img styling is included to make sure they are contained.

Styling dialogs is done using a theme. Check out styling dialogs

Style dialog size

First the dialog needs to be set to full width and height. As the web browser media player uses dialog size large --ha-dialog-width-lg, the size used when dialogs have size set to large, is overridden. Also set is --ha-dialog-width-full which is the size used when the dialog is shown on a small device screen. Safe areas are not considered here as it is likely you would wish the dialog to cover all of a device’s screen.

The web browser play media dialog will have a class of .type-hui-dialog-web-browser-play-media. This is used with a CSS selector to target the dialog only when it has class of .type-hui-dialog-web-browser-play-media.

Yaml style selectors are used as they will be needed in the following steps.

  uix-dialog-yaml: |
    .: |
      ha-dialog.type-hui-dialog-web-browser-play-media {
        --ha-dialog-width-lg: 100vw;
        --ha-dialog-width-full: 100vw;
        --ha-dialog-min-height: 100vh;
        --ha-dialog-border-radius: 0;
        --dialog-content-padding: 0;
      }

Style dialog header and content - full example

Since the styling is being applied in a theme for uix-dialog-yaml it will apply to all dialogs. So yaml selectors need to filter to the web browser dialog only using & Host/element selector.

The web browser play media dialog will have a class of .type-hui-dialog-web-browser-play-media A parent key selector of "&.type-hui-dialog-web-browser-play-media" is used to target the dialog only when it has class type .type-hui-dialog-web-browser-play-media.

Specific customizations:

• The element itself .:
  • img set to object-fit: contain; so when the media is an image it is not distorted.
• "$ ha-dialog-header $" targeting the dialog header shadow root
  • section.header-content display set to none to not show the title.
  • header.header, the header bar, set to position: absolute with z-index: 1 so it shows at the top overlaid on the media image/video and color: white so the close X is most visible. Safe areas may be considered here on top position if required.
• "$", the shadow root of the dialog.
  • Background is set to black
  • Display is set to flex to have image/media vertically aligned centrally.

  uix-dialog-yaml: |
    .: |
      ha-dialog.type-hui-dialog-web-browser-play-media {
        --ha-dialog-width-lg: 100vw;
        --ha-dialog-width-full: 100vw;
        --ha-dialog-min-height: 100vh;
        --ha-dialog-border-radius: 0;
        --dialog-content-padding: 0;
      }
    "&.type-hui-dialog-web-browser-play-media":
      .: |
        img {
          object-fit: contain;
        }
      "$ ha-dialog-header $": |
        section.header-content {
          display: none;
        }
        header.header {
          position: absolute;
          z-index: 1;
          color: white;
        }
      "$": |
        wa-dialog div.content-wrapper div.body {
          display: flex;
          background: black;
        }

In both cases, the parent dialog element is ha-adaptive-dialog. For the more-info dialog, UIX is applied in the light DOM of the adaptive dialog (ha-adaptive-dialog). To reach either dialog across the shadow root, the $ selector is required.

When the more-info dialog is ha-dialog, the full header item, ha-dialog-header, is in a slot in wa-dialog, which itself is in a shadow root of ha-dialog. The components used in ha-dialog-header are in slots in ha-dialog so styling these would not need crossing into ha-dialog shadow root.

When more-info is a bottom sheet (ha-bottom-sheet) the full header item, ha-dialog-header, is in a slot of ha-bottom-sheet.

Theme code hiding the more-info dialog header is shown below.

UIX Theme:
  uix-theme: UIX Theme

  uix-more-info-yaml: |
    "$":
      .: |
        ha-bottom-sheet slot:nth-of-type(1) ha-dialog-header
        {
          display: none;
        }
      "ha-dialog $": |
        wa-dialog slot:nth-of-type(1) ha-dialog-header {
          display: none;
        }

Continuing to use the power now badge on the built-in energy dashboard, the example below will change the border of the badge to double. This can only be done by styling in shadow root as the .badge class styling does not expose a CSS variable for border-style. Border color and width are styled on :host(.type-power-total) on the root element styling key .:, showing a good example of using both root and specific yaml keys with UIX yaml selection.

Badge Theme:
  uix-theme: Badge Theme
  uix-badge-yaml: |
    .: |
      :host(.type-power-total) {
        --ha-card-border-width: 3px;
        --ha-card-border-color: red;
      }
    "&.type-power-total ha-badge $": |
      .badge {
        border-style: double !important;
      }

Step 1: find feature needing styling

Use your browser to inspect the DOM and find the relevant feature whose height you wish to style.

The screenshot below shows hui-card-feature and that it indeed sets --feature-height: 42px;.

Step 2: run uix_style_path()

With hui-card-feature selected in browser’s inspector, run uix_style_path($0) - uix_path() is shorthand for uix_style_path().

Step 3a: style tile card locally

From the uix_style_path() output take the 📝 Boilerplate UIX YAML and use to style tile card locally on dashboard.

📝 Boilerplate UIX YAML

uix:
  style:
    "hui-card-features $": |
      hui-card-feature {
        /* your styles for hui-card-feature */
      }

Tile card styling

type: tile
entity: light.bed_light
name:
  type: entity
vertical: false
features_position: bottom
grid_options:
  columns: 12
  rows: 1
features:
  - type: light-brightness
uix: # Included from Boilerplate UIX YAML, filling in desired styling
  style:
    "hui-card-features $": |
      hui-card-feature {
        --feature-height: 20px;
      }

Step 3b: style tile card via theme

From the uix_style_path() output take the 📝 Boilerplate Theme YAML and use to create a new theme or add to an existing theme already set up for UIX styling. If you already have a theme you would just take the uix-card-yaml: section.

📝 Boilerplate Theme YAML

my-awesome-theme:
  uix-theme: my-awesome-theme
  uix-card-yaml: |
    "hui-card-features $": |
      hui-card-feature {
        /* your styles for hui-card-feature */
      }

Theme styling in existing theme

UIX Test:
  uix-theme: UIX Test

  uix-card-yaml: |
    "hui-card-features $": |
      hui-card-feature {
        --feature-height: 20px;
      }

Host/element selector

To save using a template just for type you can use the alternate method using Host/element selector

When using UI eXtension themes, often you can carry out all your styling by simple CSS targeting on the hosts class type. For example, see Styling Home Assistant 2026.3 energy now badges which uses a CSS target of :host(.type-power-total). However this will not work if you need to target an element directly in shadow root to target a property that is not styled with a CSS variable, or to inject keyframes into an element’s light DOM.

Continuing to use the power now badge on the built-in energy dashboard, the example below will change the border of the badge to double. This can only be done by styling in shadow root as the .badge class styling does not expose a CSS variable for border-style. Border color and width are styled on :host(.type-power-total) on the root element styling key .:, showing a good example of using both root and specific yaml keys with UIX yaml selection.

Badge Theme:
  uix-theme: Badge Theme
  uix-badge-yaml: |
    .: |
      :host(.type-power-total) {
        --ha-card-border-width: 3px;
        --ha-card-border-color: red;
      }
    ha-badge $: |
      {% if config.type == 'power-total' %}
      .badge {
        border-style: double !important;
      }
      {% endif %}

Consider the following where you may wish to use a concept of isDark across multiple entities rows, but not all rows.

type: entities
entities:
  - entity: sun.sun
    uix:
      style: |
        {% set isDark = is_state('sun.sun','below_horizon') %}
        hui-generic-entity-row {
          background: {{ 'darkslateblue' if isDark else 'inherit' }};
          color: {{ 'slategrey' if isDark else 'inherit' }};
          --state-icon-color: {{ 'slategrey' if isDark else 'inherit' }};
        }
  - entity: sun.sun
    uix:
      style: |
        {% set isDark = is_state('sun.sun','below_horizon') %}
        hui-generic-entity-row {
          background: {{ 'yellow' if not isDark else 'inherit' }};
          color: {{ 'orange' if not isDark else 'inherit' }};
          --state-icon-color: {{ 'orange' if not isDark else 'inherit' }};
        }

The isDark calculation here is pretty simple. However, repeating what may be a complex template calculation twice can be quite repetitive and prone to error when you need to adjust.

One method to simplify this, and make it better, uses custom CSS variables on :host reducing the templates used from two to one.

type: entities
uix:
  style: |
    :host {
      {% set isDark = is_state('sun.sun','below_horizon') %}
      --darkslateblue-if-dark: {{ 'darkslateblue' if isDark else 'inherit' }};
      --slategrey-if-dark: {{ 'slategrey' if isDark else 'inherit' }};
      --yellow-if-not-dark: {{ 'yellow' if not isDark else 'inherit' }};
      --orange-if-not-dark: {{ 'orange' if not isDark else 'inherit' }};
    }
entities:
  - entity: sun.sun
    uix:
      style: |
        hui-generic-entity-row {
          background: var(--darkslateblue-if-dark);
          color: var(--slategrey-if-dark);
          --state-icon-color: var(--slategrey-if-dark);
        }
  - entity: sun.sun
    uix:
      style: |
        hui-generic-entity-row {
          background: var(--yellow-if-not-dark);
          color: var(--orange-if-not-dark);
          --state-icon-color: var(--orange-if-not-dark);
        }

Home Assistant badges use ha-badge in shadow root. ha-badge uses many styling vars so most styling can be done on :host. See .badge styles in Frontend GitHub. The energy badges use ha-svg-icon directly as a slotted element so this is also easy to style with UIX (5.1.0+).

The theme example below uses .badge CSS vars to change the border width, color and badge box-shadow. The icon color is changed to red and is given a pulse animation.

Badge Theme:
  uix-theme: Badge Theme
  uix-badge: |
      :host(.type-power-total) {
        --ha-card-border-width: 2px;
        --ha-card-border-color: red;
        --ha-card-box-shadow: 2px 2px 2px orange;
      }
      ha-svg-icon {
        color: red;
        animation: 1.5s pulse infinite linear;
        --uix-icon: mdi:lightning-bolt;
      }
      @keyframes pulse {
        0% {
            opacity: 0;
            transform: scale(0.5);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
      }

As there are many different types of dialogs, UIX guides will not be able to cover all dialogs so this guide will lead you through inspecting the DOM to discover more about the dialog you wish to style, and leading you through when to use a template to target the dialog specifically.

Above you will see an example of an alert dialog from Home Assistant 2026.3+. Dialogs managed by Home Assistant’s dialog manager will always be the last child element of the shadowRoot of <home-assistant>. The outer element will be the dialog parent element, which for the alert dialog example is the generic Home Assistant <dialog-box>. Generally dialogs will use a shadowRoot under which there will be the dialog element, usually either <ha-dialog> or <ha-adaptive-dialog>. It is this level which UIX is patched and applied for dialogs.

Basic styling can be done to the dialog element, in the alert example this is ha-dialog. As the dialog patch is universal, you are best to use the UIX type class to scope your styling, which is type-dialog-box in the alert example.

Basic example

Below is theme yaml code to make the dialog background red and the text white. Yaml selectors are used as you will generally need to go to the dialog element shadowRoot when styling dialogs.

UIX Theme:
  uix-theme: UIX Theme
  uix-dialog-yaml: |
    .: |
      ha-dialog.type-dialog-box {
        --card-background-color: red;
        --primary-text-color: white;
      }

Template example

The basic example for an alert dialog will style all dialogs of UIX class type-dialog-box. This is the generic Home Assistant dialog and covers many dialogs including alerts and confirmation dialogs. If you wish to scope your styling to a specific dialog, you will need to template your styling, taking advantage of params variable which will be available in the template.

Your can view the params available for the dialog using your browser’s element inspector and console. With the dialog element, in the alert example ha-dialog selected, type the following code to see the UIX variables, which includes params.

$0._uix[0].variables

Knowing params which are available you can make a template to target this alert dialog by title.

UIX Theme:
  uix-theme: UIX Theme
  uix-dialog-yaml: |
    .: |
      ha-dialog.type-dialog-box {
        --card-background-color: red;
        --primary-text-color: white;
      }
      {% set titleText = params.title if 'title' in params else '' %}
      {% if titleText == 'Alert Dialog' %}
      ha-dialog.type-dialog-box {
        --card-background-color: orange !important;
      }
      {% endif %}

Vertical centering

ha-dialog uses wa-dialog which in turn uses the browser’s <dialog> element. The only way the <dialog> element can be adjusted vertically is to use --dialog-surface-margin-top. By default this is set to auto. If you wish to have the dialog 40px from the top, like more-info dialog, you can set --dialog-surface-margin-top: 40px.

UIX Theme:
  uix-theme: UIX Theme
  uix-dialog-yaml: |
    .: |
      ha-dialog.type-dialog-box {
        --dialog-surface-margin-top: 40px;
      }

Using shadow DOM

Most dialog styling can be done using CSS vars that pierce shadowRoot. However some stylings need to carries out on wa-dialog which is in shadowRoot. Below are examples to get you started.

Move to bottom

To move a dialog to bottom you need to set top: unset, bottom: 0 of the actual dialog element used by wa-dialog.

UIX Theme:
  uix-theme: UIX Theme
  uix-dialog-yaml: |
    $ wa-dialog $: |
      dialog {
        margin-top: 0 !important;
        top: unset !important;
        bottom: 0 !important;
        margin-bottom: 20px !important;
      }

Slide-in or other animations

Animations can be slightly problematic for wa-dialog as it has its own animation for show/hide (and pulse if dismiss is blocked). Setting animation times to 0 mostly solves this but you may see the popup briefly before animation.

The following is generally working well.

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

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

Any element with title attribute will make the browser show a tooltip. UIX can’t alter attributes (maybe one day) so you can’t change the text. However you can hide the text with pointer-events: none as long as the element itself does not need pointer-events for anything pointer function. For an entities row .info there is no issue. So this means that first step is to hide the existing tooltip with the following code for an entities row.

type: entities
entities:
  - entity: sun.sun
    uix:
      style:
        hui-generic-entity-row $: |
          .info {
            pointer-events: none;
          }

Tooltip for entities row

Next is to get a new tooltip. This can be done in CSS using the pseudo element ::before with initial opacity: 0, then showing on hover with a transition effect to make it appear to be rising from the middle. The below code shows a tooltip over the entities row. There is limited positional control so this will not do fancy positioning, flipping sides etc like ha-tooltip that custom:button-card and other Frontend elements use, nor any delay to showing the tooltip. However it works as is with UIX as its pure CSS.

type: entities
entities:
  - entity: sun.sun
    uix:
      style:
        hui-generic-entity-row $: |
          .info {
            pointer-events: none;
          }
          .row::before {
            content: "Test 1 2 3";
            display: inline-block;
            position: absolute; 
            bottom: 50%;
            left: 10%;
            background: #666; 
            color: #FFF; 
            padding: 5px; 
            border-radius: 5px;
            opacity:0; 
            transition:.3s; 
            overflow:hidden;
            max-width: 50%; /* avoids very long sentences */
            pointer-events: none; /* prevents tooltip from firing on pseudo hover */
          }
          .row:hover::before { opacity:1; bottom: 100%; }

Tooltip for a card

Following on from the example for the entities row, the same technique can be applied to any element, including ha-card. The following is an example of a tooltip for a tile card.

type: tile
entity: input_boolean.test_boolean
uix:
  style: |
    ha-card::before {
      content: "Test 1 2 3";
      display: inline-block;
      position: absolute; 
      left: 10%;
      bottom: 50%;
      background: #666; 
      color: #FFF; 
      padding: 5px; 
      border-radius: 5px;
      opacity:0; 
      transition:0.3s; 
      overflow:hidden;
      max-width: 50%; /* avoids very long sentences */
      pointer-events: none; /* prevents tooltip from firing on pseudo hover */
    }
    ha-card:hover::before { opacity:1; bottom: 100%; }

• ha-dialog is now a new element that uses the Web Awesome wa-dialog component rather than the MDC dialog. The final element used is the browser’s <dialog> element, which is displayed in the browser’s top layer.
• the interim ha-wa-dialog is now ha-dialog as per above
• a number of dialogs are now using the newer ha-adaptive-dialog which either uses ha-dialog for larger views, or ha-bottom-sheet for smaller views like mobiles.
• more-info dialog is now using ha-adaptive-dialog.

As dialog modding is only a relatively newer feature of UIX, this may not affect you directly. However for those who jumped in and modded out more-info, or other dialogs, you will need to adapt your modifications, especially for more-info dialog.

A start of the types of changes required are below. This list is not exhaustive as there will be many scenarios based on what you have modded:

• for dialogs that were using ha-wa-dialog in the interim, you should be able to change your modifications to update all use of ha-wa-dialog to ha-dialog.
• for dialogs that have migrated to ha-adaptive-dialog, you will need to account for this extra element in your yaml theme selectors plus additional theming for ha-bottom-sheet.

This post will be updated as further examples arise in the 2026.3.0 beta period.

Additional Resource: For more information on likely changes for ha-dialog see Browser Mod Issue #1163