default theme changes

homebridge · Aug 27, 2019 · 52a814a · 52a814a
1 parent 53c01fb
commit 52a814a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Change Log
 
-All notable changes to this project will be documented in this file. This project uses [Semantic Versioning](https://semver.org/).+
+All notable changes to this project will be documented in this file. This project uses [Semantic Versioning](https://semver.org/).
 
 ## 4.6.1 (2019-08-24)
 

diff --git a/config.schema.json b/config.schema.json
@@ -42,8 +42,14 @@
       "theme": {
         "title": "UI Theme",
         "type": "string",
-        "default": "teal",
+        "default": "auto",
         "oneOf": [
+          {
+            "title": "Default",
+            "enum": [
+              "auto"
+            ]
+          },
           {
             "title": "Red",
             "enum": [

diff --git a/src/core/config/config.service.ts b/src/core/config/config.service.ts
@@ -148,7 +148,7 @@ export class ConfigService {
         instanceId: this.instanceId,
       },
       formAuth: Boolean(this.ui.auth !== 'none'),
-      theme: this.ui.theme || 'teal',
+      theme: this.ui.theme || 'auto',
       serverTimestamp: new Date().toISOString(),
     };
   }

diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts
@@ -140,7 +140,18 @@ export class AuthService {
   }
 
   setTheme(theme: string) {
-    if (this.theme) {
+    if (theme === 'auto') {
+      // select theme based on os dark mode preferences
+      try {
+        if (matchMedia('(prefers-color-scheme: dark)').matches) {
+          theme = 'dark-mode';
+        } else {
+          theme = 'teal';
+        }
+      } catch (e) {
+        theme = 'teal';
+      }
+    } else if (this.theme) {
       window.document.querySelector('body').classList.remove(`config-ui-x-${this.theme}`);
     }
     this.theme = theme;