From d4dc9b148a35e7db069f6f8ac6a0eea870c6d538 Mon Sep 17 00:00:00 2001 From: oznu Date: Tue, 20 Oct 2020 22:17:18 +1100 Subject: [PATCH] add dark mode theme options --- CHANGELOG.md | 1 + config.schema.json | 70 ++- .../contactsensor.component.scss | 7 +- .../leaksensor/leaksensor.component.scss | 8 +- .../motionsensor/motionsensor.component.scss | 14 +- .../occupancysensor.component.scss | 8 +- ui/src/app/core/auth/auth.service.ts | 10 +- .../app/core/auth/login/login.component.html | 7 +- .../manual-plugin-config-modal.component.html | 5 +- .../manual-plugin-config-modal.component.scss | 7 +- .../manual-plugin-config-modal.component.ts | 2 +- .../settings-plugins-modal.component.html | 6 +- .../settings-plugins-modal.component.scss | 7 - .../config-editor/config-editor.component.ts | 2 +- .../startup-script.component.ts | 2 +- ui/src/scss/theme-dark.scss | 423 +++++++++--------- 16 files changed, 331 insertions(+), 248 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 306139e78..5ea6ec659 100644 --- 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 index 67cdea17c..85e242728 100644 --- 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 index 476f1943a..f3990a5f4 100644 --- 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; } } } -} \ No newline at end of file +} diff --git a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.scss b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.scss index 7975ec615..cb9f559f7 100644 --- 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; } } } -} \ No newline at end of file +} diff --git a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.scss b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.scss index de6efd5d6..02b862bb4 100644 --- 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; } } } -} \ No newline at end of file +} diff --git a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.scss b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.scss index a4b646ddb..e3b11198d 100644 --- 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; } } } -} \ No newline at end of file +} diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts index 9ea33ff53..ca477d532 100644 --- 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 index 336a8fdcf..1b18e909a 100644 --- a/ui/src/app/core/auth/login/login.component.html +++ b/ui/src/app/core/auth/login/login.component.html @@ -31,9 +31,8 @@

{{ 'users.setup_2fa_enter_code' | translate }}

- @@ -44,7 +43,7 @@

-
diff --git a/ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.html b/ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.html index eb8960b2c..e10d3198d 100644 --- a/ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.html +++ b/ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.html @@ -70,9 +70,10 @@
{{ block.name || pluginAlias }}
+ class="pl-3 manage-plugin-config-external-icons dark-mode-highlight"> + class="manage-plugin-config-external-icons dark-mode-highlight"> +