diff --git a/src/resources/styles-data.ts b/src/resources/styles-data.ts
index ae04a4c4c4..77bde2fcb1 100644
--- a/src/resources/styles-data.ts
+++ b/src/resources/styles-data.ts
@@ -102,6 +102,7 @@ export const derivedStyles = {
   "mdc-theme-error": "var(--error-color)",
   "app-header-text-color": "var(--text-primary-color)",
   "app-header-background-color": "var(--primary-color)",
+  "app-theme-color": "var(--primary-color)",
   "mdc-checkbox-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)",
   "mdc-checkbox-disabled-color": "var(--disabled-text-color)",
   "mdc-radio-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)",
diff --git a/src/state/themes-mixin.ts b/src/state/themes-mixin.ts
index 034a3eb9ac..4dfb775d77 100644
--- a/src/state/themes-mixin.ts
+++ b/src/state/themes-mixin.ts
@@ -130,9 +130,8 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
 
       const themeMeta = document.querySelector("meta[name=theme-color]");
       const computedStyles = getComputedStyle(document.documentElement);
-      const headerColor = computedStyles.getPropertyValue(
-        "--app-header-background-color"
-      );
+      const themeMetaColor =
+        computedStyles.getPropertyValue("--app-theme-color");
 
       document.documentElement.style.backgroundColor =
         computedStyles.getPropertyValue("--primary-background-color");
@@ -145,7 +144,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
           );
         }
         const themeColor =
-          headerColor?.trim() ||
+          themeMetaColor?.trim() ||
           (themeMeta.getAttribute("default-content") as string);
         themeMeta.setAttribute("content", themeColor);
       }