Dark mode variant for all themes

config.schema.json

@@ -41,16 +41,10 @@
         "required": true
       },
       "theme": {
-        "title": "UI Theme",
+        "title": "Color",
         "type": "string",
-        "default": "auto",
+        "default": "purple",
         "oneOf": [
-          {
-            "title": "Default",
-            "enum": [
-              "auto"
-            ]
-          },
           {
             "title": "Red",
             "enum": [
@@ -140,15 +134,39 @@
             "enum": [
               "brown"
             ]
+          }
+        ],
+        "required": true
+      },
+      "darkMode": {
+        "title": "Dark Mode",
+        "type": "string",
+        "default": "auto",
+        "required": true,
+        "oneOf": [
+          {
+            "title": "Auto",
+            "enum": [
+              "auto"
+            ]
           },
           {
-            "title": "Dark Mode",
+            "title": "Disabled",
             "enum": [
-              "dark-mode"
+              "disabled"
+            ]
+          },
+          {
+            "title": "Enabled",
+            "enum": [
+              "enabled"
             ]
           }
-        ],
-        "required": true
+        ]
+      },
+      "useDarkModeAccent": {
+        "title": "Highlight navbar in dark mode",
+        "type": "boolean"
       },
       "restart": {
         "title": "Restart Command",
@@ -473,22 +491,44 @@
   "layout": [
     {
       "type": "flex",
+      "title": "General",
       "flex-flow": "row wrap",
       "items": [
         {
           "type": "flex",
           "flex-flow": "column",
           "items": [
             "name",
-            "theme"
+            "tempUnits"
           ]
         },
         {
           "type": "flex",
           "flex-flow": "column",
           "items": [
-            "port",
-            "tempUnits"
+            "port"
+          ]
+        }
+      ]
+    },
+    {
+      "type": "flex",
+      "flex-flow": "row wrap",
+      "title": "Theme",
+      "items": [
+        {
+          "type": "flex",
+          "flex-flow": "column",
+          "items": [
+            "theme",
+            "useDarkModeAccent"
+          ]
+        },
+        {
+          "type": "flex",
+          "flex-flow": "column",
+          "items": [
+            "darkMode"
           ]
         }
       ]

src/core/config/config.service.ts

@@ -64,6 +64,8 @@ export class ConfigService {
     host?: '::' | '0.0.0.0' | string;
     auth: 'form' | 'none';
     theme: string;
+    darkMode: string;
+    useDarkModeAccent: boolean;
     sudo?: boolean;
     restart?: string;
     lang?: string;
@@ -180,6 +182,8 @@ export class ConfigService {
       },
       formAuth: Boolean(this.ui.auth !== 'none'),
       theme: this.ui.theme || 'auto',
+      darkMode: this.ui.darkMode || 'auto',
+      useDarkModeAccent: this.ui.useDarkModeAccent || false,
       serverTimestamp: new Date().toISOString(),
     };
   }

ui/src/app/core/auth/auth.service.ts

@@ -41,6 +41,7 @@ export class AuthService {
   public uiVersion: string;
   public formAuth = true;
   public theme: string;
+  public darkModeEnabled: string;
   public token: string;
   public user: UserInterface = {};
   private logoutTimer;
@@ -157,9 +158,10 @@ export class AuthService {
   getAppSettings() {
     return this.$api.get('/auth/settings').toPromise()
       .then((data: any) => {
+        console.log(data);
         this.formAuth = data.formAuth;
         this.env = data.env;
-        this.setTheme(data.theme || 'auto');
+        this.setTheme(data.theme || 'auto', data.darkMode || false, data.useDarkModeAccent || false);
         this.setTitle(this.env.homebridgeInstanceName);
         this.checkServerTime(data.serverTimestamp);
         this.setUiVersion(data.env.packageVersion);
@@ -169,24 +171,33 @@ export class AuthService {
       });
   }
 
-  setTheme(theme: string) {
-    if (theme === 'auto') {
+  setTheme(theme: string, darkMode: string, useDarkModeAccent: boolean) {
+    let darkModeEnabled;
+
+    if (darkMode === 'auto') {
       // select theme based on os dark mode preferences
       try {
-        if (matchMedia('(prefers-color-scheme: dark)').matches) {
-          theme = 'dark-mode';
-        } else {
-          theme = 'purple';
-        }
+        darkModeEnabled = matchMedia('(prefers-color-scheme: dark)').matches;
       } catch (e) {
-        theme = 'purple';
+        darkModeEnabled = false;
       }
+    } else {
+      darkModeEnabled = (darkMode === 'enabled');
     }
+
+    if (theme === 'dark-mode') { // Fallback from the legacy dark mode theme that no longer exists
+      theme = 'amber';
+      darkModeEnabled = true;
+    }
+
     if (this.theme) {
-      window.document.querySelector('body').classList.remove(`config-ui-x-${this.theme}`);
+      const el = window.document.querySelector('body');
+      const classes = el.className.split(' ').filter(c => !c.startsWith('config-ui-x-'));
+      el.className = classes.join(' ').trim();
     }
     this.theme = theme;
-    window.document.querySelector('body').classList.add(`config-ui-x-${this.theme}`);
+    this.darkModeEnabled = darkModeEnabled;
+    window.document.querySelector('body').classList.add(`config-ui-x-${darkModeEnabled ? 'dark-' : ''}${darkModeEnabled && useDarkModeAccent ? 'accent-' : ''}${this.theme}`);
   }
 
   setTitle(title: string) {

ui/src/app/core/auth/login/login.component.html

@@ -44,11 +44,11 @@
         <p class="red-text" *ngIf="invalidCredentials"><small
             [translate]="'login.message_invalid_username_or_password'"></small></p>
         <p class="red-text" *ngIf="invalid2faCode"><small [translate]="'login.message_invalid_2fa_code'"></small></p>
-        <button tabindex="3" class="btn btn-amber" type="submit" [translate]="'login.button_login'"
+        <button tabindex="3" class="btn btn-primary" type="submit" [translate]="'login.button_login'"
           [disabled]="form.invalid">Login</button>
       </div>
 
     </form>
 
   </div>
-</div>
+</div>

ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.ts

@@ -33,7 +33,7 @@ export class ManualPluginConfigModalComponent implements OnInit {
   public monacoEditor;
   public editorOptions = {
     language: 'json',
-    theme: this.$auth.theme === 'dark-mode' ? 'vs-dark' : 'vs-light',
+    theme: this.$auth.darkModeEnabled ? 'vs-dark' : 'vs-light',
     automaticLayout: true,
   };
 

ui/src/app/modules/config-editor/config-editor.component.ts

@@ -26,7 +26,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
   public monacoEditor;
   public editorOptions = {
     language: 'json',
-    theme: this.$auth.theme === 'dark-mode' ? 'vs-dark' : 'vs-light',
+    theme: this.$auth.darkModeEnabled ? 'vs-dark' : 'vs-light',
     automaticLayout: true,
   };
 

ui/src/app/modules/platform-tools/docker/startup-script/startup-script.component.ts

@@ -23,7 +23,7 @@ export class StartupScriptComponent implements OnInit, OnDestroy {
   public monacoEditor;
   public editorOptions = {
     language: 'shell',
-    theme: this.$auth.theme === 'dark-mode' ? 'vs-dark' : 'vs-light',
+    theme: this.$auth.darkModeEnabled ? 'vs-dark' : 'vs-light',
     automaticLayout: true,
   };