diff --git a/src/html/index.html.template b/src/html/index.html.template
index 5ec5dd1dc1..fe4271c0fb 100644
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -48,7 +48,7 @@
       }
       @media (prefers-color-scheme: dark) {
         html {
-          background-color: var(--primary-background-color, #111111);
+          background-color: #111111;
         }
         #ha-init-skeleton::before {
           background-color: #1c1c1c;
diff --git a/src/state/themes-mixin.ts b/src/state/themes-mixin.ts
index b4470a237a..0815f4391a 100644
--- a/src/state/themes-mixin.ts
+++ b/src/state/themes-mixin.ts
@@ -88,9 +88,15 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       }
 
       const themeMeta = document.querySelector("meta[name=theme-color]");
-      const headerColor = getComputedStyle(
-        document.documentElement
-      ).getPropertyValue("--app-header-background-color");
+      const computedStyles = getComputedStyle(document.documentElement);
+      const headerColor = computedStyles.getPropertyValue(
+        "--app-header-background-color"
+      );
+
+      document.documentElement.style.backgroundColor = computedStyles.getPropertyValue(
+        "--primary-background-color"
+      );
+
       if (themeMeta) {
         if (!themeMeta.hasAttribute("default-content")) {
           themeMeta.setAttribute(