Add CSS var for header -webkit-backdrop-filter

home-assistant · Apr 9, 2024 · edd96db · edd96db
1 parent 0d3e730
commit edd96db
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 0 deletions.
diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts
@@ -22,6 +22,8 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
+        -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
+        backdrop-filter: var(--app-header-backdrop-filter, none);
       }
       .mdc-top-app-bar__title {
         padding-inline-start: 20px;

diff --git a/src/components/ha-top-app-bar.ts b/src/components/ha-top-app-bar.ts
@@ -22,6 +22,8 @@ export class HaTopAppBar extends TopAppBarBase {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
+        -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
+        backdrop-filter: var(--app-header-backdrop-filter, none);
       }
     `,
   ];

diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
@@ -908,6 +908,8 @@ class HUIRoot extends LitElement {
           position: fixed;
           top: 0;
           width: var(--mdc-top-app-bar-width, 100%);
+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
+          backdrop-filter: var(--app-header-backdrop-filter, none);
           padding-top: env(safe-area-inset-top);
           z-index: 4;
           transition: box-shadow 200ms linear;