Apply dark style on init when prefers-color-scheme: dark (#8997)

src/auth/ha-authorize.ts

@@ -8,6 +8,7 @@ import {
   PropertyValues,
 } from "lit-element";
 import punycode from "punycode";
+import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { extractSearchParamsObject } from "../common/url/search-params";
 import {
   AuthProvider,
@@ -116,6 +117,20 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     this._fetchAuthProviders();
     this._fetchDiscoveryInfo();
 
+    if (matchMedia("(prefers-color-scheme: dark)").matches) {
+      applyThemesOnElement(
+        document.documentElement,
+        {
+          default_theme: "default",
+          default_dark_theme: null,
+          themes: {},
+          darkMode: false,
+        },
+        "default",
+        { dark: true }
+      );
+    }
+
     if (!this.redirectUri) {
       return;
     }

src/common/dom/apply_themes_on_element.ts

@@ -70,13 +70,18 @@ export const applyThemesOnElement = (
       themeRules["text-accent-color"] =
         rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
     }
+
+    // Nothing was changed
+    if (element._themes?.cacheKey === cacheKey) {
+      return;
+    }
   }
 
   if (selectedTheme && themes.themes[selectedTheme]) {
     themeRules = themes.themes[selectedTheme];
   }
 
-  if (!element._themes && !Object.keys(themeRules).length) {
+  if (!element._themes?.keys && !Object.keys(themeRules).length) {
     // No styles to reset, and no styles to set
     return;
   }
@@ -87,8 +92,8 @@ export const applyThemesOnElement = (
       : undefined;
 
   // Add previous set keys to reset them, and new theme
-  const styles = { ...element._themes, ...newTheme?.styles };
+  const styles = { ...element._themes?.keys, ...newTheme?.styles };
-  element._themes = newTheme?.keys;
+  element._themes = { cacheKey, keys: newTheme?.keys };
 
   // Set and/or reset styles
   if (element.updateStyles) {

src/html/authorize.html.template

@@ -23,11 +23,9 @@
         margin-right: 16px;
       }
       @media (prefers-color-scheme: dark) {
-        body {
+        html {
           background-color: #111111;
           color: #e1e1e1;
-          --primary-text-color: #e1e1e1;
-          --secondary-text-color: #9b9b9b;
         }
       }
     </style>

src/html/index.html.template

@@ -51,6 +51,7 @@
       @media (prefers-color-scheme: dark) {
         html {
           background-color: #111111;
+          color: #e1e1e1;
         }
         #ha-init-skeleton::before {
           background-color: #1c1c1c;

src/html/onboarding.html.template

@@ -34,17 +34,8 @@
 
       @media (prefers-color-scheme: dark) {
         html {
-          color: #e1e1e1;
-        }
-        ha-onboarding {
-          --primary-text-color: #e1e1e1;
-          --secondary-text-color: #9b9b9b;
-          --disabled-text-color: #6f6f6f;
-          --mdc-theme-surface: #1e1e1e;
-          --ha-card-background: #1e1e1e;
-        }
-        .content {
           background-color: #111111;
+          color: #e1e1e1;
         }
       }
 

src/onboarding/ha-onboarding.ts

@@ -32,6 +32,7 @@ import { registerServiceWorker } from "../util/register-service-worker";
 import "./onboarding-create-user";
 import "./onboarding-loading";
 import "./onboarding-analytics";
+import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 
 type OnboardingEvent =
   | {
@@ -137,6 +138,19 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
     if (window.innerWidth > 450) {
       import("./particles");
     }
+    if (matchMedia("(prefers-color-scheme: dark)").matches) {
+      applyThemesOnElement(
+        document.documentElement,
+        {
+          default_theme: "default",
+          default_dark_theme: null,
+          themes: {},
+          darkMode: false,
+        },
+        "default",
+        { dark: true }
+      );
+    }
   }
 
   protected updated(changedProps: PropertyValues) {

src/state/themes-mixin.ts

@@ -32,6 +32,19 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         storeState(this.hass!);
       });
       mql.addListener((ev) => this._applyTheme(ev.matches));
+      if (mql.matches) {
+        applyThemesOnElement(
+          document.documentElement,
+          {
+            default_theme: "default",
+            default_dark_theme: null,
+            themes: {},
+            darkMode: false,
+          },
+          "default",
+          { dark: true }
+        );
+      }
     }
 
     protected hassConnected() {