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],