diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index 2e0befb405..25d244774c 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -53,9 +53,9 @@ class HassSubpage extends LitElement {
         height: 64px;
         padding: 0 16px;
         pointer-events: none;
-        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);
       }
 
       ha-menu-button,
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index a33eaabf0b..ae85ea1e6f 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -149,6 +149,7 @@ documentContainer.innerHTML = `<custom-style>
       /* app header background color */
       --app-header-text-color: var(--text-primary-color);
       --app-header-background-color: var(--primary-color);
+
     }
   </style>