From e4c635c8556e25b7561622449f67806814bea478 Mon Sep 17 00:00:00 2001
From: Carlos Gustavo Sarmiento <carlos5678@gmail.com>
Date: Mon, 25 Nov 2019 09:37:33 -0700
Subject: [PATCH] Added new CSS property for styling of the app-header
 component (#4269)

---
 src/resources/ha-style.ts | 4 ++++
 src/resources/styles.ts   | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index c731329486..3c3ebc9abe 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -145,6 +145,10 @@ documentContainer.innerHTML = `<custom-style>
       --mdc-theme-on-primary: var(--text-primary-color);
       --mdc-theme-on-secondary: var(--text-primary-color);
       --mdc-theme-on-surface: var(--primary-text-color);
+
+      /* app header background color */
+      --app-header-text-color: var(--text-primary-color)
+      --app-header-background-color: var(--primary-color)
     }
   </style>
 
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index 9488c05418..278c881f9a 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -12,9 +12,9 @@ export const haStyle = css`
 
   app-header,
   app-toolbar {
-    background-color: var(--primary-color);
+    background-color: var(--app-header-background-color);
     font-weight: 400;
-    color: var(--text-primary-color, white);
+    color: var(--app-header-text-color, white);
   }
 
   app-toolbar ha-menu-button + [main-title],