From 7556ab950652d909578ac3d7e49291ec322a4eb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bruno=20Pantale=C3=A3o=20Gon=C3=A7alves?=
 <bruno.ing879@gmail.com>
Date: Wed, 10 Apr 2024 11:40:44 +0200
Subject: [PATCH] Add css var for header webkit backdrop filter (#20473)

* Add CSS var for header -webkit-backdrop-filter

* Add backdrop to energy and developer tools
---
 src/panels/developer-tools/ha-panel-developer-tools.ts | 2 ++
 src/panels/energy/ha-panel-energy.ts                   | 2 ++
 src/panels/lovelace/hui-root.ts                        | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
index 52e98b3770..667f016ea5 100644
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -131,6 +131,8 @@ class PanelDeveloperTools extends LitElement {
           padding-top: env(safe-area-inset-top);
           color: var(--app-header-text-color, white);
           border-bottom: var(--app-header-border-bottom, none);
+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
+          backdrop-filter: var(--app-header-backdrop-filter, none);
         }
         .toolbar {
           height: var(--header-height);
diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
index 4dd6498ae4..c033f7c2f3 100644
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@@ -363,6 +363,8 @@ class PanelEnergy extends LitElement {
           transition: box-shadow 200ms linear;
           display: flex;
           flex-direction: row;
+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
+          backdrop-filter: var(--app-header-backdrop-filter, none);
         }
         :host([scrolled]) .header {
           box-shadow: var(
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index b0115082bb..ce1d4d3d43 100644
--- 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;