From 528def0fb8427325b327225d89bb94869d77eac4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <ludeeus@ludeeus.dev>
Date: Sun, 29 May 2022 20:10:01 +0200
Subject: [PATCH] Handle custom themes (#599)

---
 src/main.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 935be220d..d14cbd312 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -118,6 +118,10 @@ class HacsFrontend extends HacsElement {
       }
     });
 
+    mainWindow
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", (_) => this._applyTheme());
+
     makeDialogManager(this, this.shadowRoot!);
   }
 
@@ -236,9 +240,14 @@ class HacsFrontend extends HacsElement {
     applyThemesOnElement(
       this.parentElement,
       this.hass.themes,
-      (this.hass.selectedTheme as unknown as string) || this.hass.themes.default_theme,
-      undefined,
-      true
+      this.hass.selectedTheme?.theme ||
+        (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
+          ? this.hass.themes.default_dark_theme!
+          : this.hass.themes.default_theme),
+      {
+        ...this.hass.selectedTheme,
+        dark: this.hass.themes.darkMode,
+      }
     );
     this.parentElement!.style.backgroundColor = "var(--primary-background-color)";
     this.parentElement!.style.color = "var(--primary-text-color)";