add dark mode theme options

homebridge · Oct 20, 2020 · d4dc9b1 · d4dc9b1
1 parent c314d08
commit d4dc9b1
Show file tree

Hide file tree

Showing 16 changed files with 331 additions and 248 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file. This projec
 
 * **i18n:** Catalan (ca) language added by [@bwp91](https://github.com/bwp91) ([#892](https://github.com/oznu/homebridge-config-ui-x/pull/892))
   * The Homebridge UI is now available in 22 different languages!
+* **Themes:** Added 11 more dark mode themes with various colour accents ([#883](https://github.com/oznu/homebridge-config-ui-x/pull/883)
 
 ### Bug Fixes
 

diff --git a/config.schema.json b/config.schema.json
@@ -46,7 +46,7 @@
         "default": "auto",
         "oneOf": [
           {
-            "title": "Default",
+            "title": "Default (Auto Dark Mode)",
             "enum": [
               "auto"
             ]
@@ -142,10 +142,76 @@
             ]
           },
           {
-            "title": "Dark Mode",
+            "title": "Dark Mode - HomeKit Orange",
             "enum": [
               "dark-mode"
             ]
+          },
+          {
+            "title": "Dark Mode - Red",
+            "enum": [
+              "dark-mode-red"
+            ]
+          },
+          {
+            "title": "Dark Mode - Pink",
+            "enum": [
+              "dark-mode-pink"
+            ]
+          },
+          {
+            "title": "Dark Mode - Purple",
+            "enum": [
+              "dark-mode-purple"
+            ]
+          },
+          {
+            "title": "Dark Mode - Indigo",
+            "enum": [
+              "dark-mode-indigo"
+            ]
+          },
+          {
+            "title": "Dark Mode - Blue",
+            "enum": [
+              "dark-mode-blue"
+            ]
+          },
+          {
+            "title": "Dark Mode - Blue Grey",
+            "enum": [
+              "dark-mode-blue-grey"
+            ]
+          },
+          {
+            "title": "Dark Mode - Green",
+            "enum": [
+              "dark-mode-green"
+            ]
+          },
+          {
+            "title": "Dark Mode - Grey",
+            "enum": [
+              "dark-mode-grey"
+            ]
+          },
+          {
+            "title": "Dark Mode - Brown",
+            "enum": [
+              "dark-mode-brown"
+            ]
+          },
+          {
+            "title": "Dark Mode - Teal",
+            "enum": [
+              "dark-mode-teal"
+            ]
+          },
+          {
+            "title": "Dark Mode - Cyan",
+            "enum": [
+              "dark-mode-cyan"
+            ]
           }
         ],
         "required": true

diff --git a/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.scss b/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.scss
@@ -1,10 +1,9 @@
-
-::ng-deep body.config-ui-x-dark-mode {
+::ng-deep body.dark-mode {
   .switch-off {
     svg {
       .contact_sensor_split_line {
-        fill: #2B2B2B;
+        fill: #2b2b2b;
       }
     }
   }
-}
+}
diff --git a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.scss b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.scss
@@ -2,7 +2,7 @@
   .switch-off {
     svg {
       .leak_sensor_droplet {
-        fill: #E0E0E0;
+        fill: #e0e0e0;
       }
       .leak_sensor_trigger_lines {
         display: none;
@@ -14,12 +14,12 @@
   }
 }
 
-::ng-deep body.config-ui-x-dark-mode {
+::ng-deep body.dark-mode {
   .switch-off {
     svg {
       .leak_sensor_droplet {
-        fill: #2B2B2B;
+        fill: #2b2b2b;
       }
     }
   }
-}
+}
diff --git a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.scss b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.scss
@@ -1,8 +1,9 @@
 ::ng-deep {
   .switch-off {
     svg {
-      .motion_sensor_person, .motion_sensor_trail_lines {
-        fill: #E0E0E0;
+      .motion_sensor_person,
+      .motion_sensor_trail_lines {
+        fill: #e0e0e0;
       }
       .motion_sensor_trigger_lines {
         display: none;
@@ -14,12 +15,13 @@
   }
 }
 
-::ng-deep body.config-ui-x-dark-mode {
+::ng-deep body.dark-mode {
   .switch-off {
     svg {
-      .motion_sensor_person, .motion_sensor_trail_lines {
-        fill: #2B2B2B;
+      .motion_sensor_person,
+      .motion_sensor_trail_lines {
+        fill: #2b2b2b;
       }
     }
   }
-}
+}
diff --git a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.scss b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.scss
@@ -2,7 +2,7 @@
   .switch-off {
     svg {
       .occupancy_sensor_person {
-        fill: #E0E0E0;
+        fill: #e0e0e0;
       }
       .occupancy_sensor_trigger_lines {
         display: none;
@@ -14,12 +14,12 @@
   }
 }
 
-::ng-deep body.config-ui-x-dark-mode {
+::ng-deep body.dark-mode {
   .switch-off {
     svg {
       .occupancy_sensor_person {
-        fill: #2B2B2B;
+        fill: #2b2b2b;
       }
     }
   }
-}
+}
diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts
@@ -182,11 +182,17 @@ export class AuthService {
         theme = 'purple';
       }
     }
+
+    const bodySelector = window.document.querySelector('body');
     if (this.theme) {
-      window.document.querySelector('body').classList.remove(`config-ui-x-${this.theme}`);
+      bodySelector.classList.remove(`config-ui-x-${this.theme}`);
+      bodySelector.classList.remove(`dark-mode`);
     }
     this.theme = theme;
-    window.document.querySelector('body').classList.add(`config-ui-x-${this.theme}`);
+    bodySelector.classList.add(`config-ui-x-${this.theme}`);
+    if (this.theme.startsWith('dark-mode')) {
+      bodySelector.classList.add(`dark-mode`);
+    }
   }
 
   setTitle(title: string) {

diff --git a/ui/src/app/core/auth/login/login.component.html b/ui/src/app/core/auth/login/login.component.html
@@ -31,9 +31,8 @@
         <p class="text-center">{{ 'users.setup_2fa_enter_code' | translate }}</p>
         <div class="md-form">
           <i class="fas fa-key prefix grey-text"></i>
-          <input formControlName="otp" type="text" id="form-ota" autocomplete="one-time-code" autocapitalize="none" inputmode="numeric"
-  pattern="[0-9]*" tabindex="1"
-            class="form-control pl-0 pr-0" [ngClass]="{
+          <input formControlName="otp" type="text" id="form-ota" autocomplete="one-time-code" autocapitalize="none"
+            inputmode="numeric" pattern="[0-9]*" tabindex="1" class="form-control pl-0 pr-0" [ngClass]="{
               'is-invalid': form.controls.otp.dirty && form.controls.otp.errors
             }">
           <label for="form-username" [translate]="'login.label_2fa_code'"></label>
@@ -44,7 +43,7 @@
         <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>
 

diff --git a/.../core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.html b/.../core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.html
@@ -70,9 +70,10 @@ <h5 class="m-0">{{ block.name || pluginAlias }}</h5>
 
     <div class="d-none d-sm-inline ml-3 mr-3">
       <a *ngIf="plugin.links.npm" [href]="plugin.links.npm" target="_blank" rel="noopener noreferrer"
-        class="pl-3 manage-plugin-config-external-icons"><i class="fab fa-npm"></i></a>
+        class="pl-3 manage-plugin-config-external-icons dark-mode-highlight"><i class="fab fa-npm"></i></a>
       <a *ngIf="plugin.links.homepage" [href]="plugin.links.homepage" target="_blank" rel="noopener noreferrer"
-        class="manage-plugin-config-external-icons"><i [ngClass]="plugin.links.homepage | externalLinkIcon"></i></a>
+        class="manage-plugin-config-external-icons dark-mode-highlight">
+        <i [ngClass]="plugin.links.homepage | externalLinkIcon"></i></a>
     </div>
 
     <button type="button" class="btn btn-elegant ml-auto" data-dismiss="modal" (click)="activeModal.close()"

diff --git a/.../core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.scss b/.../core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.scss
@@ -6,17 +6,12 @@
   }
 }
 
-::ng-deep body.config-ui-x-dark-mode {
+::ng-deep body.dark-mode {
   .no-padding-card-body {
     .card-body {
       background-color: #1e1e1e;
     }
   }
-
-  .manage-plugin-config-external-icons {
-    color: #ffa000;
-    opacity: 1;
-  }
 }
 
 .manage-plugin-config-external-icons {

diff --git a/...pp/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.ts b/...pp/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.theme.startsWith('dark-mode') ? 'vs-dark' : 'vs-light',
     automaticLayout: true,
   };
 

diff --git a/ui/src/app/core/manage-plugins/settings-plugins-modal/settings-plugins-modal.component.html b/ui/src/app/core/manage-plugins/settings-plugins-modal/settings-plugins-modal.component.html
@@ -67,9 +67,11 @@ <h5 class="m-0">{{ block.name }}</h5>
 
     <div class="d-none d-sm-inline ml-3 mr-3" *ngIf="plugin.name !== 'homebridge-config-ui-x'">
       <a *ngIf="plugin.links.npm" [href]="plugin.links.npm" target="_blank" rel="noopener noreferrer"
-        class="pl-3 manage-plugin-config-external-icons"><i class="fab fa-npm"></i></a>
+        class="pl-3 manage-plugin-config-external-icons dark-mode-highlight"><i class="fab fa-npm"></i></a>
       <a *ngIf="plugin.links.homepage" [href]="plugin.links.homepage" target="_blank" rel="noopener noreferrer"
-        class="manage-plugin-config-external-icons"><i [ngClass]="plugin.links.homepage | externalLinkIcon"></i></a>
+        class="manage-plugin-config-external-icons dark-mode-highlight">
+        <i [ngClass]="plugin.links.homepage | externalLinkIcon"></i>
+      </a>
     </div>
 
     <button type="button" class="btn btn-elegant ml-auto" data-dismiss="modal"

diff --git a/ui/src/app/core/manage-plugins/settings-plugins-modal/settings-plugins-modal.component.scss b/ui/src/app/core/manage-plugins/settings-plugins-modal/settings-plugins-modal.component.scss
@@ -1,10 +1,3 @@
-::ng-deep body.config-ui-x-dark-mode {
-  .manage-plugin-config-external-icons {
-    color: #ffa000;
-    opacity: 1;
-  }
-}
-
 .manage-plugin-config-external-icons {
   float: right;
   font-size: 1.5rem;

diff --git a/ui/src/app/modules/config-editor/config-editor.component.ts b/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.theme.startsWith('dark-mode') ? 'vs-dark' : 'vs-light',
     automaticLayout: true,
   };
 

diff --git a/ui/src/app/modules/platform-tools/docker/startup-script/startup-script.component.ts b/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.theme.startsWith('dark-mode') ? 'vs-dark' : 'vs-light',
     automaticLayout: true,
   };