From dd4efe0f51d7b3a38cc77477c5b3578f93a38ee3 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 26 Apr 2021 23:54:47 +0200
Subject: [PATCH] Apply dark style on init when `prefers-color-scheme: dark`
 (#8997)

---
 src/auth/ha-authorize.ts                  | 15 +++++++++++++++
 src/common/dom/apply_themes_on_element.ts | 11 ++++++++---
 src/html/authorize.html.template          |  4 +---
 src/html/index.html.template              |  1 +
 src/html/onboarding.html.template         | 11 +----------
 src/onboarding/ha-onboarding.ts           | 14 ++++++++++++++
 src/state/themes-mixin.ts                 | 13 +++++++++++++
 7 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts
index 3cd85aa5f2..ceabc2b409 100644
--- a/src/auth/ha-authorize.ts
+++ b/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;
     }
diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts
index 926b2eb670..176068c92b 100644
--- a/src/common/dom/apply_themes_on_element.ts
+++ b/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 };
-  element._themes = newTheme?.keys;
+  const styles = { ...element._themes?.keys, ...newTheme?.styles };
+  element._themes = { cacheKey, keys: newTheme?.keys };
 
   // Set and/or reset styles
   if (element.updateStyles) {
diff --git a/src/html/authorize.html.template b/src/html/authorize.html.template
index 43d63fd024..1cf1c7bba4 100644
--- a/src/html/authorize.html.template
+++ b/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>
diff --git a/src/html/index.html.template b/src/html/index.html.template
index 747c8c102c..dfad967ad1 100644
--- a/src/html/index.html.template
+++ b/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;
diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template
index 55b4144b6c..8ab6264be1 100644
--- a/src/html/onboarding.html.template
+++ b/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;
         }
       }
 
diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts
index a6177099be..64ff66bf5a 100644
--- a/src/onboarding/ha-onboarding.ts
+++ b/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) {
diff --git a/src/state/themes-mixin.ts b/src/state/themes-mixin.ts
index 4ed2b560b8..0c9e64e7ce 100644
--- a/src/state/themes-mixin.ts
+++ b/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() {