From bdb3c04037c0403997acbf37362ed9d19b9583a7 Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Mon, 18 Oct 2021 22:09:21 +0200
Subject: [PATCH] Ensure current active dark modes gets used for manually set
 themes (#10307)

---
 hassio/src/hassio-main.ts                 |  6 --
 src/common/dom/apply_themes_on_element.ts | 99 ++++++++++++-----------
 src/layouts/supervisor-error-screen.ts    |  6 --
 3 files changed, 53 insertions(+), 58 deletions(-)

diff --git a/hassio/src/hassio-main.ts b/hassio/src/hassio-main.ts
index 93181aa106..8ded32bbf0 100644
--- a/hassio/src/hassio-main.ts
+++ b/hassio/src/hassio-main.ts
@@ -113,12 +113,6 @@ export class HassioMain extends SupervisorBaseElement {
           : this.hass.themes.default_theme);
 
       themeSettings = this.hass.selectedTheme;
-      if (themeSettings?.dark === undefined) {
-        themeSettings = {
-          ...this.hass.selectedTheme,
-          dark: this.hass.themes.darkMode,
-        };
-      }
     } else {
       themeName =
         (this.hass.selectedTheme as unknown as string) ||
diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts
index 721863e7f3..fca6e2262a 100644
--- a/src/common/dom/apply_themes_on_element.ts
+++ b/src/common/dom/apply_themes_on_element.ts
@@ -36,55 +36,62 @@ export const applyThemesOnElement = (
   let cacheKey = selectedTheme;
   let themeRules: Partial<ThemeVars> = {};
 
-  if (themeSettings) {
-    if (themeSettings.dark) {
-      cacheKey = `${cacheKey}__dark`;
-      themeRules = { ...darkStyles };
+  // If there is no explicitly desired dark mode provided, we automatically
+  // use the active one from hass.themes.
+  if (!themeSettings || themeSettings?.dark === undefined) {
+    themeSettings = {
+      ...themeSettings,
+      dark: themes.darkMode,
+    };
+  }
+
+  if (themeSettings.dark) {
+    cacheKey = `${cacheKey}__dark`;
+    themeRules = { ...darkStyles };
+  }
+
+  if (selectedTheme === "default") {
+    // Determine the primary and accent colors from the current settings.
+    // Fallbacks are implicitly the HA default blue and orange or the
+    // derived "darkStyles" values, depending on the light vs dark mode.
+    const primaryColor = themeSettings.primaryColor;
+    const accentColor = themeSettings.accentColor;
+
+    if (themeSettings.dark && primaryColor) {
+      themeRules["app-header-background-color"] = hexBlend(
+        primaryColor,
+        "#121212",
+        8
+      );
     }
 
-    if (selectedTheme === "default") {
-      // Determine the primary and accent colors from the current settings.
-      // Fallbacks are implicitly the HA default blue and orange or the
-      // derived "darkStyles" values, depending on the light vs dark mode.
-      const primaryColor = themeSettings.primaryColor;
-      const accentColor = themeSettings.accentColor;
+    if (primaryColor) {
+      cacheKey = `${cacheKey}__primary_${primaryColor}`;
+      const rgbPrimaryColor = hex2rgb(primaryColor);
+      const labPrimaryColor = rgb2lab(rgbPrimaryColor);
+      themeRules["primary-color"] = primaryColor;
+      const rgbLightPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
+      themeRules["light-primary-color"] = rgb2hex(rgbLightPrimaryColor);
+      themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor));
+      themeRules["text-primary-color"] =
+        rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
+      themeRules["text-light-primary-color"] =
+        rgbContrast(rgbLightPrimaryColor, [33, 33, 33]) < 6
+          ? "#fff"
+          : "#212121";
+      themeRules["state-icon-color"] = themeRules["dark-primary-color"];
+    }
+    if (accentColor) {
+      cacheKey = `${cacheKey}__accent_${accentColor}`;
+      themeRules["accent-color"] = accentColor;
+      const rgbAccentColor = hex2rgb(accentColor);
+      themeRules["text-accent-color"] =
+        rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
+    }
 
-      if (themeSettings.dark && primaryColor) {
-        themeRules["app-header-background-color"] = hexBlend(
-          primaryColor,
-          "#121212",
-          8
-        );
-      }
-
-      if (primaryColor) {
-        cacheKey = `${cacheKey}__primary_${primaryColor}`;
-        const rgbPrimaryColor = hex2rgb(primaryColor);
-        const labPrimaryColor = rgb2lab(rgbPrimaryColor);
-        themeRules["primary-color"] = primaryColor;
-        const rgbLightPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
-        themeRules["light-primary-color"] = rgb2hex(rgbLightPrimaryColor);
-        themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor));
-        themeRules["text-primary-color"] =
-          rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
-        themeRules["text-light-primary-color"] =
-          rgbContrast(rgbLightPrimaryColor, [33, 33, 33]) < 6
-            ? "#fff"
-            : "#212121";
-        themeRules["state-icon-color"] = themeRules["dark-primary-color"];
-      }
-      if (accentColor) {
-        cacheKey = `${cacheKey}__accent_${accentColor}`;
-        themeRules["accent-color"] = accentColor;
-        const rgbAccentColor = hex2rgb(accentColor);
-        themeRules["text-accent-color"] =
-          rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
-      }
-
-      // Nothing was changed
-      if (element._themes?.cacheKey === cacheKey) {
-        return;
-      }
+    // Nothing was changed
+    if (element._themes?.cacheKey === cacheKey) {
+      return;
     }
   }
 
diff --git a/src/layouts/supervisor-error-screen.ts b/src/layouts/supervisor-error-screen.ts
index f59ae95538..cc9a9be2ad 100644
--- a/src/layouts/supervisor-error-screen.ts
+++ b/src/layouts/supervisor-error-screen.ts
@@ -91,12 +91,6 @@ class SupervisorErrorScreen extends LitElement {
           : this.hass.themes.default_theme);
 
       themeSettings = this.hass.selectedTheme;
-      if (themeName === "default" && themeSettings?.dark === undefined) {
-        themeSettings = {
-          ...this.hass.selectedTheme,
-          dark: this.hass.themes.darkMode,
-        };
-      }
     } else {
       themeName =
         (this.hass.selectedTheme as unknown as string) ||