Add support for custom themes to use dark mode

hassio/src/hassio-main.ts

@@ -103,33 +103,35 @@ export class HassioMain extends SupervisorBaseElement {
 
   private _applyTheme() {
     let themeName: string;
-    let options: Partial<HomeAssistant["selectedTheme"]> | undefined;
+    let themeSettings:
+      | Partial<HomeAssistant["selectedThemeSettings"]>
+      | undefined;
 
     if (atLeastVersion(this.hass.config.version, 0, 114)) {
       themeName =
-        this.hass.selectedTheme?.theme ||
+        this.hass.selectedThemeSettings?.theme ||
         (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
           ? this.hass.themes.default_dark_theme!
           : this.hass.themes.default_theme);
 
-      options = this.hass.selectedTheme;
-      if (themeName === "default" && options?.dark === undefined) {
-        options = {
-          ...this.hass.selectedTheme,
+      themeSettings = this.hass.selectedThemeSettings;
+      if (themeSettings?.dark === undefined) {
+        themeSettings = {
+          ...this.hass.selectedThemeSettings,
           dark: this.hass.themes.darkMode,
         };
       }
     } else {
       themeName =
-        ((this.hass.selectedTheme as unknown) as string) ||
+        ((this.hass.selectedThemeSettings as unknown) as string) ||
         this.hass.themes.default_theme;
     }
 
     applyThemesOnElement(
       this.parentElement,
       this.hass.themes,
       themeName,
-      options
+      themeSettings
     );
   }
 }

src/common/dom/apply_themes_on_element.ts

@@ -1,4 +1,4 @@
-import { Theme } from "../../data/ws-themes";
+import { ThemeVars } from "../../data/ws-themes";
 import { darkStyles, derivedStyles } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import {
@@ -23,62 +23,90 @@ let PROCESSED_THEMES: Record<string, ProcessedTheme> = {};
  * Apply a theme to an element by setting the CSS variables on it.
  *
  * element: Element to apply theme on.
- * themes: HASS Theme information
- * selectedTheme: selected theme.
+ * themes: HASS theme information.
+ * selectedTheme: Selected theme.
+ * themeSettings: Settings such as selected dark mode and colors.
  */
 export const applyThemesOnElement = (
   element,
   themes: HomeAssistant["themes"],
   selectedTheme?: string,
-  themeOptions?: Partial<HomeAssistant["selectedTheme"]>
+  themeSettings?: Partial<HomeAssistant["selectedThemeSettings"]>
 ) => {
   let cacheKey = selectedTheme;
-  let themeRules: Partial<Theme> = {};
+  let themeRules: Partial<ThemeVars> = {};
 
-  if (selectedTheme === "default" && themeOptions) {
-    if (themeOptions.dark) {
+  if (themeSettings) {
+    if (themeSettings.dark) {
       cacheKey = `${cacheKey}__dark`;
       themeRules = darkStyles;
-      if (themeOptions.primaryColor) {
+    }
+
+    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(
-          themeOptions.primaryColor,
+          primaryColor,
           "#121212",
           8
         );
       }
-    }
-    if (themeOptions.primaryColor) {
-      cacheKey = `${cacheKey}__primary_${themeOptions.primaryColor}`;
-      const rgbPrimaryColor = hex2rgb(themeOptions.primaryColor);
-      const labPrimaryColor = rgb2lab(rgbPrimaryColor);
-      themeRules["primary-color"] = themeOptions.primaryColor;
-      const rgbLigthPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
-      themeRules["light-primary-color"] = rgb2hex(rgbLigthPrimaryColor);
-      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(rgbLigthPrimaryColor, [33, 33, 33]) < 6
-          ? "#fff"
-          : "#212121";
-      themeRules["state-icon-color"] = themeRules["dark-primary-color"];
-    }
-    if (themeOptions.accentColor) {
-      cacheKey = `${cacheKey}__accent_${themeOptions.accentColor}`;
-      themeRules["accent-color"] = themeOptions.accentColor;
-      const rgbAccentColor = hex2rgb(themeOptions.accentColor);
-      themeRules["text-accent-color"] =
-        rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
-    }
 
-    // Nothing was changed
-    if (element._themes?.cacheKey === cacheKey) {
-      return;
+      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;
+      }
     }
   }
 
-  if (selectedTheme && themes.themes[selectedTheme]) {
-    themeRules = themes.themes[selectedTheme];
+  // Custom theme logic (not relevant for default theme, since it would override
+  // the derived calculations from above)
+  if (
+    selectedTheme &&
+    selectedTheme !== "default" &&
+    themes.themes[selectedTheme]
+  ) {
+    // Apply theme vars that are relevant for all modes (but extract the "modes" section first)
+    const { modes, ...baseThemeRules } = themes.themes[selectedTheme];
+    themeRules = { ...themeRules, ...baseThemeRules };
+
+    // Apply theme vars for the specific mode if available
+    if (modes) {
+      if (themeSettings?.dark) {
+        themeRules = { ...themeRules, ...modes.dark };
+      } else {
+        themeRules = { ...themeRules, ...modes.light };
+      }
+    }
   }
 
   if (!element._themes?.keys && !Object.keys(themeRules).length) {
@@ -106,12 +134,12 @@ export const applyThemesOnElement = (
 
 const processTheme = (
   cacheKey: string,
-  theme: Partial<Theme>
+  theme: Partial<ThemeVars>
 ): ProcessedTheme | undefined => {
   if (!theme || !Object.keys(theme).length) {
     return undefined;
   }
-  const combinedTheme: Partial<Theme> = {
+  const combinedTheme: Partial<ThemeVars> = {
     ...derivedStyles,
     ...theme,
   };

src/components/map/ha-location-editor.ts

@@ -108,7 +108,7 @@ class LocationEditor extends LitElement {
 
     if (changedProps.has("hass")) {
       const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.themes?.darkMode === this.hass.themes?.darkMode) {
+      if (!oldHass || oldHass.themes.darkMode === this.hass.themes.darkMode) {
         return;
       }
       if (!this._leafletMap || !this._tileLayer) {
@@ -118,7 +118,7 @@ class LocationEditor extends LitElement {
         this.Leaflet,
         this._leafletMap,
         this._tileLayer,
-        this.hass.themes?.darkMode
+        this.hass.themes.darkMode
       );
     }
   }
@@ -130,7 +130,7 @@ class LocationEditor extends LitElement {
   private async _initMap(): Promise<void> {
     [this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
       this._mapEl,
-      this.darkMode ?? this.hass.themes?.darkMode,
+      this.darkMode ?? this.hass.themes.darkMode,
       Boolean(this.radius)
     );
     this._leafletMap.addEventListener(

src/data/ws-themes.ts

@@ -1,17 +1,27 @@
 import { Connection, createCollection } from "home-assistant-js-websocket";
 
-export interface Theme {
+export interface ThemeVars {
   // Incomplete
   "primary-color": string;
   "text-primary-color": string;
   "accent-color": string;
   [key: string]: string;
 }
 
+export type Theme = ThemeVars & {
+  modes?: {
+    light?: ThemeVars;
+    dark?: ThemeVars;
+  };
+};
+
 export interface Themes {
   default_theme: string;
   default_dark_theme: string | null;
   themes: Record<string, Theme>;
+  // Currently effective dark mode. Will never be undefined. If user selected "auto"
+  // in theme picker, this property will still contain either true or false based on
+  // what has been determined via system preferences and support from the selected theme.
   darkMode: boolean;
 }
 

src/data/zone.ts

@@ -1,8 +1,12 @@
 import { navigate } from "../common/navigate";
+import {
+  DEFAULT_ACCENT_COLOR,
+  DEFAULT_PRIMARY_COLOR,
+} from "../resources/ha-style";
 import { HomeAssistant } from "../types";
 
-export const defaultRadiusColor = "#FF9800";
-export const homeRadiusColor = "#03a9f4";
+export const defaultRadiusColor = DEFAULT_ACCENT_COLOR;
+export const homeRadiusColor = DEFAULT_PRIMARY_COLOR;
 export const passiveRadiusColor = "#9b9b9b";
 
 export interface Zone {

src/fake_data/provide_hass.ts

@@ -277,19 +277,19 @@ export const provideHass = (
     mockTheme(theme) {
       invalidateThemeCache();
       hass().updateHass({
-        selectedTheme: { theme: theme ? "mock" : "default" },
+        selectedThemeSettings: { theme: theme ? "mock" : "default" },
         themes: {
           ...hass().themes,
           themes: {
             mock: theme as any,
           },
         },
       });
-      const { themes, selectedTheme } = hass();
+      const { themes, selectedThemeSettings } = hass();
       applyThemesOnElement(
         document.documentElement,
         themes,
-        selectedTheme!.theme
+        selectedThemeSettings!.theme
       );
     },
 

src/layouts/supervisor-error-screen.ts

@@ -81,33 +81,35 @@ class SupervisorErrorScreen extends LitElement {
 
   private _applyTheme() {
     let themeName: string;
-    let options: Partial<HomeAssistant["selectedTheme"]> | undefined;
+    let themeSettings:
+      | Partial<HomeAssistant["selectedThemeSettings"]>
+      | undefined;
 
     if (atLeastVersion(this.hass.config.version, 0, 114)) {
       themeName =
-        this.hass.selectedTheme?.theme ||
+        this.hass.selectedThemeSettings?.theme ||
         (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
           ? this.hass.themes.default_dark_theme!
           : this.hass.themes.default_theme);
 
-      options = this.hass.selectedTheme;
-      if (themeName === "default" && options?.dark === undefined) {
-        options = {
-          ...this.hass.selectedTheme,
+      themeSettings = this.hass.selectedThemeSettings;
+      if (themeName === "default" && themeSettings?.dark === undefined) {
+        themeSettings = {
+          ...this.hass.selectedThemeSettings,
           dark: this.hass.themes.darkMode,
         };
       }
     } else {
       themeName =
-        ((this.hass.selectedTheme as unknown) as string) ||
+        ((this.hass.selectedThemeSettings as unknown) as string) ||
         this.hass.themes.default_theme;
     }
 
     applyThemesOnElement(
       this.parentElement,
       this.hass.themes,
       themeName,
-      options
+      themeSettings
     );
   }
 

src/panels/lovelace/views/hui-view.ts

@@ -152,7 +152,7 @@ export class HUIView extends ReactiveElement {
       changedProperties.has("hass") &&
       (!oldHass ||
         this.hass.themes !== oldHass.themes ||
-        this.hass.selectedTheme !== oldHass.selectedTheme)
+        this.hass.selectedThemeSettings !== oldHass.selectedThemeSettings)
     ) {
       applyThemesOnElement(this, this.hass.themes, this._viewConfigTheme);
     }