From 8ba7ac94f42157ad45ead96d66fe2bf57a6143e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Arthur?= Date: Thu, 8 Oct 2020 14:53:13 -0300 Subject: [PATCH 1/6] feat: Dark themes in all colors --- config.schema.json | 40 +- src/core/config/config.service.ts | 4 + ui/src/app/core/auth/auth.service.ts | 29 +- .../manual-plugin-config-modal.component.ts | 2 +- .../config-editor/config-editor.component.ts | 2 +- .../startup-script.component.ts | 2 +- ui/src/scss/theme-dark.scss | 429 ++++++++++-------- ui/src/scss/themes.scss | 2 +- 8 files changed, 292 insertions(+), 218 deletions(-) diff --git a/config.schema.json b/config.schema.json index 03ce7c2b5..c06bab9d9 100644 --- a/config.schema.json +++ b/config.schema.json @@ -43,12 +43,12 @@ "theme": { "title": "UI Theme", "type": "string", - "default": "auto", + "default": "default", "oneOf": [ { "title": "Default", "enum": [ - "auto" + "default" ] }, { @@ -140,15 +140,39 @@ "enum": [ "brown" ] + } + ], + "required": true + }, + "darkMode": { + "title": "Dark mode", + "type": "string", + "default": "auto", + "required": true, + "oneOf": [ + { + "title": "Auto", + "enum": [ + "auto" + ] + }, + { + "title": "Disabled", + "enum": [ + "disabled" + ] }, { - "title": "Dark Mode", + "title": "Enabled", "enum": [ - "dark-mode" + "enabled" ] } - ], - "required": true + ] + }, + "useDarkModeAccent": { + "title": "Navbar uses accent color in dark mode", + "type": "boolean" }, "restart": { "title": "Restart Command", @@ -474,7 +498,9 @@ "flex-flow": "column", "items": [ "name", - "theme" + "theme", + "darkMode", + "useDarkModeAccent" ] }, { diff --git a/src/core/config/config.service.ts b/src/core/config/config.service.ts index a3ce93f2a..255fc2aa4 100644 --- a/src/core/config/config.service.ts +++ b/src/core/config/config.service.ts @@ -63,6 +63,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; @@ -179,6 +181,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(), }; } diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts index 9ea33ff53..13a2e56c9 100644 --- a/ui/src/app/core/auth/auth.service.ts +++ b/ui/src/app/core/auth/auth.service.ts @@ -157,9 +157,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 +170,30 @@ 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 (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(); + + //window.document.querySelector('body').className.split(" ").filter(c => !c.startsWith('config-ui-x-')); + //window.document.querySelector('body').classList.remove(`config-ui-x-${darkModeEnabled ? 'dark-' : ''}${darkMode && useDarkModeAccent ? 'accent-' : ''}${this.theme}`); } this.theme = theme; - window.document.querySelector('body').classList.add(`config-ui-x-${this.theme}`); + window.document.querySelector('body').classList.add(`config-ui-x-${darkModeEnabled ? 'dark-' : ''}${darkModeEnabled && useDarkModeAccent ? 'accent-' : ''}${this.theme}`); } setTitle(title: string) { diff --git a/ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.ts b/ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.ts index a6d1c42d0..b8a1d9119 100644 --- a/ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.ts +++ b/ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.ts @@ -32,7 +32,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-') ? 'vs-dark' : 'vs-light', automaticLayout: true, }; diff --git a/ui/src/app/modules/config-editor/config-editor.component.ts b/ui/src/app/modules/config-editor/config-editor.component.ts index bfbe02893..4cc3388c6 100644 --- a/ui/src/app/modules/config-editor/config-editor.component.ts +++ b/ui/src/app/modules/config-editor/config-editor.component.ts @@ -25,7 +25,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-') ? '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 index cb0a9e1ea..94cbac75a 100644 --- 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-') ? 'vs-dark' : 'vs-light', automaticLayout: true, }; diff --git a/ui/src/scss/theme-dark.scss b/ui/src/scss/theme-dark.scss index fd6b91f5d..9da320b5f 100644 --- a/ui/src/scss/theme-dark.scss +++ b/ui/src/scss/theme-dark.scss @@ -1,268 +1,305 @@ -.config-ui-x-dark-mode, -.config-ui-x-dark-mode-v1 { - $darkModePrimary: #ffa000; - $backgroundColor: #000000; - $secondaryBackground: #2b2b2b; - $secondaryText: #9e9e9e; +@mixin make-dark-theme($name, $darkModePrimary, $accentNavBar) { + .config-ui-x-#{$name} { + $backgroundColor: #000000; + $secondaryBackground: #2b2b2b; + $secondaryText: #9e9e9e; - $modalBackground: #242424; + $modalBackground: #242424; - background-color: $backgroundColor !important; + background-color: $backgroundColor !important; - .bg-primary { - background-color: #242424 !important; - } - - .navbar-dark { - background-color: #0f0f0f !important; - border-bottom: #0f0f0f; - border-bottom-style: solid; - border-bottom-width: 1px; - } + .bg-primary { + background-color: #242424 !important; + } - .primary-text { - color: $darkModePrimary; - } + .navbar-dark { + background-color: #0f0f0f !important; + border-bottom: #0f0f0f; + border-bottom-style: solid; + border-bottom-width: 1px; + @if $accentNavBar { + background-color: $darkModePrimary !important; + border-bottom: #0f0f0f; + } + } - .hb-uix-switch input:checked ~ .hb-uix-slider { - background-color: $darkModePrimary; - } + .primary-text { + color: $darkModePrimary; + } - .btn-primary, - .btn-default { - @extend .btn-amber !optional; - } + .hb-uix-switch input:checked ~ .hb-uix-slider { + background-color: $darkModePrimary; + } - .bg-yellow { - background-color: $darkModePrimary !important; - } + .btn-primary, + .btn-default { + @extend .btn-amber !optional; + } - .btn-link { - color: #9e9e9e !important; - } + .bg-yellow { + background-color: $darkModePrimary !important; + } - .badge-primary { - background-color: #2b2b2b !important; - } + .btn-link { + color: #9e9e9e !important; + } - .card { - color: #ffffff; - background-color: $secondaryBackground !important; - } + .badge-primary { + background-color: #2b2b2b !important; + } - .login-card { - background-color: rgba($secondaryBackground, 0.97) !important; - } + .card { + color: #ffffff; + background-color: $secondaryBackground !important; + } - .alert-warning { - color: $secondaryBackground; - background-color: #ffd793; - border-color: $secondaryBackground; + .login-card { + background-color: rgba($secondaryBackground, 0.97) !important; + } - a { + .alert-warning { color: $secondaryBackground; - &:hover { - text-decoration: underline; + background-color: lighten($darkModePrimary, .8); + border-color: $secondaryBackground; + + a { + color: $secondaryBackground; + &:hover { + text-decoration: underline; + } } } - } - .qr-code-container { - background-color: $secondaryBackground; + .qr-code-container { + background-color: $secondaryBackground; - svg { - fill: $darkModePrimary; + svg { + fill: $darkModePrimary; + } } - } - a { - &.card-link { - color: #9e9e9e; + a { + &.card-link { + color: #9e9e9e; + &:hover { + color: $darkModePrimary; + } + } + + color: $darkModePrimary; &:hover { - color: $darkModePrimary; + text-decoration: underline; } } - color: $darkModePrimary; - &:hover { - text-decoration: underline; + hr { + border-color: $darkModePrimary; + background-color: $darkModePrimary; + color: $darkModePrimary; } - } - hr { - border-color: $darkModePrimary; - background-color: $darkModePrimary; - color: $darkModePrimary; - } + .modal-content { + border-radius: 0; + } - .modal-content { - border-radius: 0; - } + .modal-header { + background-color: $modalBackground; + border-bottom: none; + border-radius: 0 !important; - .modal-header { - background-color: $modalBackground; - border-bottom: none; - border-radius: 0 !important; + .close { + color: $darkModePrimary; + opacity: 1 !important; + text-shadow: none; + } + } - .close { + .modal-title { color: $darkModePrimary; - opacity: 1 !important; - text-shadow: none; } - } - .modal-title { - color: $darkModePrimary; - } - - .modal-body { - background-color: $modalBackground; - color: #ffffff; - } + .modal-body { + background-color: $modalBackground; + color: #ffffff; + } - .modal-footer { - background-color: $modalBackground; - border-top: none; - border-radius: 0 !important; - } + .modal-footer { + background-color: $modalBackground; + border-top: none; + border-radius: 0 !important; + } - .modal-backdrop { - opacity: 0.8; - } + .modal-backdrop { + opacity: 0.8; + } - .table { - color: #ffffff; - } + .table { + color: #ffffff; + } - .table-hover tbody tr:hover { - color: $darkModePrimary !important; - } + .table-hover tbody tr:hover { + color: $darkModePrimary !important; + } - .table-striped tbody tr:nth-of-type(odd) { - background-color: rgba(35, 35, 35, 0.43); - } + .table-striped tbody tr:nth-of-type(odd) { + background-color: rgba(35, 35, 35, 0.43); + } - markdown { - color: #ffffff; // $secondaryText !important; - } + markdown { + color: #ffffff; // $secondaryText !important; + } - .md-form { - input { - color: #ffffff; + .md-form { + input { + color: #ffffff; - &:focus { - box-shadow: 0 1px 0 0 $darkModePrimary !important; - border-bottom: 1px solid $darkModePrimary !important; - & + label { - color: $darkModePrimary !important; + &:focus { + box-shadow: 0 1px 0 0 $darkModePrimary !important; + border-bottom: 1px solid $darkModePrimary !important; + & + label { + color: $darkModePrimary !important; + } } } - } - .form-control { - &:disabled { - color: #ffffff; + .form-control { + &:disabled { + color: #ffffff; + } } - } - .grey-text { - color: $darkModePrimary !important; + .grey-text { + color: $darkModePrimary !important; + } } - } - .hb-npm-search { - color: #999999 !important; - border-color: #242424 !important; + .hb-npm-search { + color: #999999 !important; + border-color: #242424 !important; - &:focus, - &:hover { - border: 1px solid #242424 !important; - } + &:focus, + &:hover { + border: 1px solid #242424 !important; + } - &:focus { - box-shadow: inherit !important; - color: $darkModePrimary !important; + &:focus { + box-shadow: inherit !important; + color: $darkModePrimary !important; + } } - } - .list-group-item { - background-color: $secondaryBackground; - color: #ffffff; - .badge-primary { - background-color: $darkModePrimary !important; + .list-group-item { + background-color: $secondaryBackground; + color: #ffffff; + .badge-primary { + background-color: $darkModePrimary !important; + } } - } - .hb-plugin-settings-modal, - .hb-backup-modal { - input, - select { - border-color: #242424 !important; //$backgroundColor; - background-color: #242424 !important; - color: #ffffff; + .hb-plugin-settings-modal, + .hb-backup-modal { + input, + select { + border-color: #242424 !important; //$backgroundColor; + background-color: #242424 !important; + color: #ffffff; - &::placeholder { - color: #bdbdbd; + &::placeholder { + color: #bdbdbd; + } } - } - .list-group-item { - background-color: $secondaryBackground; + .list-group-item { + background-color: $secondaryBackground; - .close { - color: $darkModePrimary; - opacity: 1 !important; - text-shadow: none; + .close { + color: $darkModePrimary; + opacity: 1 !important; + text-shadow: none; + } } } - } - - .accessory-box { - background-color: $secondaryBackground; - color: $secondaryText; - } - .switch-on { - background-color: #fff; - color: #000000; - } + .accessory-box { + background-color: $secondaryBackground; + color: $secondaryText; + } - /** Gridster **/ - gridster-item { - color: #ffffff; - background-color: #2b2b2b; - } + .switch-on { + background-color: #fff; + color: #000000; + } - gridster-preview { - background: rgba(224, 224, 224, 0.5); - } + /** Gridster **/ + gridster-item { + color: #ffffff; + background-color: #2b2b2b; + } - .available-widget { - background-color: #000000; - } + gridster-preview { + background: rgba(224, 224, 224, 0.5); + } - #AccessoriesWidgetComponent { - border-color: rgba($secondaryBackground, 0.5) !important; - } + .available-widget { + background-color: #000000; + } - .hb-widget-chart-background { - background-color: rgba(#ffa000, 0.2); - display: none; - } + #AccessoriesWidgetComponent { + border-color: rgba($secondaryBackground, 0.5) !important; + } - .alert-info { - background-color: rgba(#ffa000, 0.1); - border-color: rgba(#ffa000, 0.1); - color: $darkModePrimary; - } + .hb-widget-chart-background { + background-color: rgba(#ffa000, 0.2); + display: none; + } - .animate_loader { - .spinner_outer { - stroke: $darkModePrimary; + .alert-info { + background-color: rgba(#ffa000, 0.1); + border-color: rgba(#ffa000, 0.1); + color: $darkModePrimary; } - .spinner_inner { - stroke: #fff; + + .animate_loader { + .spinner_outer { + stroke: $darkModePrimary; + } + .spinner_inner { + stroke: #fff; + } } } } + +@include make-dark-theme("dark-default", #ffa000, false); +@include make-dark-theme("dark-accent-default", #ffa000, true); +@include make-dark-theme("dark-red", #f44336, false); +@include make-dark-theme("dark-accent-red", #f44336, true); +@include make-dark-theme("dark-pink", #e91e63, false); +@include make-dark-theme("dark-accent-pink", #e91e63, true); +@include make-dark-theme("dark-purple", #9c27b0, false); +@include make-dark-theme("dark-accent-purple", #9c27b0, true); +@include make-dark-theme("dark-indigo", #3f51b5, false); +@include make-dark-theme("dark-accent-indigo", #3f51b5, true); +@include make-dark-theme("dark-blue", #2196f3, false); +@include make-dark-theme("dark-accent-blue", #2196f3, true); +@include make-dark-theme("dark-blue-grey", #607d8b, false); +@include make-dark-theme("dark-accent-blue-grey", #607d8b, true); +@include make-dark-theme("dark-navi-blue", #000099, false); +@include make-dark-theme("dark-accent-navi-blue", #000099, true); +@include make-dark-theme("dark-green", #4caf50, false); +@include make-dark-theme("dark-accent-green", #4caf50, true); +@include make-dark-theme("dark-orange", #ff9800, false); +@include make-dark-theme("dark-accent-orange", #ff9800, true); +@include make-dark-theme("dark-grey", #9e9e9e, false); +@include make-dark-theme("dark-accent-grey", #9e9e9e, true); +@include make-dark-theme("dark-brown", #795548, false); +@include make-dark-theme("dark-accent-brown", #795548, true); +@include make-dark-theme("dark-amber", #ffc107, false); +@include make-dark-theme("dark-accent-amber", #ffc107, true); +@include make-dark-theme("dark-teal", #009688, false); +@include make-dark-theme("dark-accent-teal", #009688, true); +@include make-dark-theme("dark-cyan", #00bcd4, false); +@include make-dark-theme("dark-accent-cyan", #00bcd4, true); +@include make-dark-theme("dark-deep-purple", #673ab7, false); +@include make-dark-theme("dark-accent-deep-purple", #673ab7, true); diff --git a/ui/src/scss/themes.scss b/ui/src/scss/themes.scss index ae4e7cab6..c0426858d 100644 --- a/ui/src/scss/themes.scss +++ b/ui/src/scss/themes.scss @@ -67,6 +67,7 @@ } } +@include make-theme("default", #ffa000, #dd8a00); @include make-theme("red", #f44336, #d32f2f); @include make-theme("pink", #e91e63, #c2185b); @include make-theme("purple", #9c27b0, #421367); @@ -82,7 +83,6 @@ @include make-theme("teal", #009688, #00695c); @include make-theme("cyan", #00bcd4, #00838f); @include make-theme("deep-purple", #673ab7, #4527a0); -@include make-theme("test-purple", #673ab7, #4527a0); .config-ui-x-navi-blue { .btn-primary { From d846ac35c5ada63af396c890842e9ccec478c4a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Arthur?= Date: Thu, 8 Oct 2020 16:32:35 -0300 Subject: [PATCH 2/6] fix: Buton colors in dark mode using amber --- ui/src/app/core/auth/auth.service.ts | 2 ++ ui/src/app/core/auth/login/login.component.html | 4 ++-- .../manual-plugin-config-modal.component.ts | 2 +- .../modules/config-editor/config-editor.component.ts | 2 +- .../docker/startup-script/startup-script.component.ts | 2 +- ui/src/scss/theme-dark.scss | 11 ++++++++++- 6 files changed, 17 insertions(+), 6 deletions(-) diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts index 13a2e56c9..99e18d3ff 100644 --- a/ui/src/app/core/auth/auth.service.ts +++ b/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; @@ -193,6 +194,7 @@ export class AuthService { //window.document.querySelector('body').classList.remove(`config-ui-x-${darkModeEnabled ? 'dark-' : ''}${darkMode && useDarkModeAccent ? 'accent-' : ''}${this.theme}`); } this.theme = theme; + this.darkModeEnabled = darkModeEnabled; window.document.querySelector('body').classList.add(`config-ui-x-${darkModeEnabled ? 'dark-' : ''}${darkModeEnabled && useDarkModeAccent ? 'accent-' : ''}${this.theme}`); } diff --git a/ui/src/app/core/auth/login/login.component.html b/ui/src/app/core/auth/login/login.component.html index 336a8fdcf..585bf2339 100644 --- a/ui/src/app/core/auth/login/login.component.html +++ b/ui/src/app/core/auth/login/login.component.html @@ -44,11 +44,11 @@

- - \ No newline at end of file + diff --git a/ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.ts b/ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.ts index b8a1d9119..d9febe828 100644 --- a/ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.ts +++ b/ui/src/app/core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.ts @@ -32,7 +32,7 @@ export class ManualPluginConfigModalComponent implements OnInit { public monacoEditor; public editorOptions = { language: 'json', - theme: this.$auth.theme.startsWith('dark-') ? 'vs-dark' : 'vs-light', + theme: this.$auth.darkModeEnabled ? 'vs-dark' : 'vs-light', automaticLayout: true, }; diff --git a/ui/src/app/modules/config-editor/config-editor.component.ts b/ui/src/app/modules/config-editor/config-editor.component.ts index 4cc3388c6..6336fb304 100644 --- a/ui/src/app/modules/config-editor/config-editor.component.ts +++ b/ui/src/app/modules/config-editor/config-editor.component.ts @@ -25,7 +25,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy { public monacoEditor; public editorOptions = { language: 'json', - theme: this.$auth.theme.startsWith('dark-') ? 'vs-dark' : 'vs-light', + theme: this.$auth.darkModeEnabled ? '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 index 94cbac75a..d220d0eda 100644 --- 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.startsWith('dark-') ? 'vs-dark' : 'vs-light', + theme: this.$auth.darkModeEnabled ? 'vs-dark' : 'vs-light', automaticLayout: true, }; diff --git a/ui/src/scss/theme-dark.scss b/ui/src/scss/theme-dark.scss index 9da320b5f..3aa2ccce7 100644 --- a/ui/src/scss/theme-dark.scss +++ b/ui/src/scss/theme-dark.scss @@ -1,4 +1,6 @@ + @mixin make-dark-theme($name, $darkModePrimary, $accentNavBar) { + .config-ui-x-#{$name} { $backgroundColor: #000000; $secondaryBackground: #2b2b2b; @@ -34,6 +36,13 @@ .btn-primary, .btn-default { @extend .btn-amber !optional; + background-color: $darkModePrimary !important; + } + + .btn-primary:active, + .btn-default:active { + @extend .btn-amber:active !optional; + background-color: rgba($darkModePrimary, .8) !important; } .bg-yellow { @@ -250,7 +259,7 @@ } .hb-widget-chart-background { - background-color: rgba(#ffa000, 0.2); + background-color: rgba($darkModePrimary, 0.2); display: none; } From 4e9bf4eeb266764ae5faa5d6ac1adea5c6d152b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Arthur?= Date: Thu, 8 Oct 2020 22:44:09 -0300 Subject: [PATCH 3/6] fix: Buttons would default to amber when active in dark mode --- ui/src/app/core/auth/auth.service.ts | 3 - ui/src/scss/theme-dark.scss | 108 ++++++++++++++++----------- 2 files changed, 65 insertions(+), 46 deletions(-) diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts index 99e18d3ff..d3c6afc3c 100644 --- a/ui/src/app/core/auth/auth.service.ts +++ b/ui/src/app/core/auth/auth.service.ts @@ -189,9 +189,6 @@ export class AuthService { const el = window.document.querySelector('body'); const classes = el.className.split(' ').filter(c => !c.startsWith('config-ui-x-')); el.className = classes.join(' ').trim(); - - //window.document.querySelector('body').className.split(" ").filter(c => !c.startsWith('config-ui-x-')); - //window.document.querySelector('body').classList.remove(`config-ui-x-${darkModeEnabled ? 'dark-' : ''}${darkMode && useDarkModeAccent ? 'accent-' : ''}${this.theme}`); } this.theme = theme; this.darkModeEnabled = darkModeEnabled; diff --git a/ui/src/scss/theme-dark.scss b/ui/src/scss/theme-dark.scss index 3aa2ccce7..7ea220f7f 100644 --- a/ui/src/scss/theme-dark.scss +++ b/ui/src/scss/theme-dark.scss @@ -1,7 +1,5 @@ - @mixin make-dark-theme($name, $darkModePrimary, $accentNavBar) { - - .config-ui-x-#{$name} { + .config-ui-x-dark-#{if($accentNavBar, 'accent-', '')}#{$name} { $backgroundColor: #000000; $secondaryBackground: #2b2b2b; $secondaryText: #9e9e9e; @@ -35,14 +33,7 @@ .btn-primary, .btn-default { - @extend .btn-amber !optional; - background-color: $darkModePrimary !important; - } - - .btn-primary:active, - .btn-default:active { - @extend .btn-amber:active !optional; - background-color: rgba($darkModePrimary, .8) !important; + @extend .btn-#{$name} !optional; } .bg-yellow { @@ -280,35 +271,66 @@ } } -@include make-dark-theme("dark-default", #ffa000, false); -@include make-dark-theme("dark-accent-default", #ffa000, true); -@include make-dark-theme("dark-red", #f44336, false); -@include make-dark-theme("dark-accent-red", #f44336, true); -@include make-dark-theme("dark-pink", #e91e63, false); -@include make-dark-theme("dark-accent-pink", #e91e63, true); -@include make-dark-theme("dark-purple", #9c27b0, false); -@include make-dark-theme("dark-accent-purple", #9c27b0, true); -@include make-dark-theme("dark-indigo", #3f51b5, false); -@include make-dark-theme("dark-accent-indigo", #3f51b5, true); -@include make-dark-theme("dark-blue", #2196f3, false); -@include make-dark-theme("dark-accent-blue", #2196f3, true); -@include make-dark-theme("dark-blue-grey", #607d8b, false); -@include make-dark-theme("dark-accent-blue-grey", #607d8b, true); -@include make-dark-theme("dark-navi-blue", #000099, false); -@include make-dark-theme("dark-accent-navi-blue", #000099, true); -@include make-dark-theme("dark-green", #4caf50, false); -@include make-dark-theme("dark-accent-green", #4caf50, true); -@include make-dark-theme("dark-orange", #ff9800, false); -@include make-dark-theme("dark-accent-orange", #ff9800, true); -@include make-dark-theme("dark-grey", #9e9e9e, false); -@include make-dark-theme("dark-accent-grey", #9e9e9e, true); -@include make-dark-theme("dark-brown", #795548, false); -@include make-dark-theme("dark-accent-brown", #795548, true); -@include make-dark-theme("dark-amber", #ffc107, false); -@include make-dark-theme("dark-accent-amber", #ffc107, true); -@include make-dark-theme("dark-teal", #009688, false); -@include make-dark-theme("dark-accent-teal", #009688, true); -@include make-dark-theme("dark-cyan", #00bcd4, false); -@include make-dark-theme("dark-accent-cyan", #00bcd4, true); -@include make-dark-theme("dark-deep-purple", #673ab7, false); -@include make-dark-theme("dark-accent-deep-purple", #673ab7, true); +@function str-split($string, $separator) { + $i: str-index($string, $separator); + @if $i != null { + @return append( + str-slice($string, 1, $i - 1), + str-split(str-slice($string, $i + str-length($separator)), $separator) + ); + } + @return $string +} + +@include make-dark-theme("default", #ffa000, false); +@include make-dark-theme("default", #ffa000, true); +@include make-dark-theme("red", #f44336, false); +@include make-dark-theme("red", #f44336, true); +@include make-dark-theme("pink", #e91e63, false); +@include make-dark-theme("pink", #e91e63, true); +@include make-dark-theme("purple", #9c27b0, false); +@include make-dark-theme("purple", #9c27b0, true); +@include make-dark-theme("indigo", #3f51b5, false); +@include make-dark-theme("indigo", #3f51b5, true); +@include make-dark-theme("blue", #2196f3, false); +@include make-dark-theme("blue", #2196f3, true); +@include make-dark-theme("blue-grey", #607d8b, false); +@include make-dark-theme("blue-grey", #607d8b, true); +@include make-dark-theme("navi-blue", #4c4c7c, false); +@include make-dark-theme("navi-blue", #4c4c7c, true); +@include make-dark-theme("green", #4caf50, false); +@include make-dark-theme("green", #4caf50, true); +@include make-dark-theme("orange", #ff9800, false); +@include make-dark-theme("orange", #ff9800, true); +@include make-dark-theme("grey", #9e9e9e, false); +@include make-dark-theme("grey", #9e9e9e, true); +@include make-dark-theme("brown", #795548, false); +@include make-dark-theme("brown", #795548, true); +@include make-dark-theme("amber", #ffc107, false); +@include make-dark-theme("amber", #ffc107, true); +@include make-dark-theme("teal", #009688, false); +@include make-dark-theme("teal", #009688, true); +@include make-dark-theme("cyan", #00bcd4, false); +@include make-dark-theme("cyan", #00bcd4, true); +@include make-dark-theme("deep-purple", #673ab7, false); +@include make-dark-theme("deep-purple", #673ab7, true); + +.config-ui-x-dark-navi-blue,.config-ui-x-dark-accent-navi-blue { + .btn-primary { + background-color: #000099 !important; + } + + .badge-primary { + background-color: #000070 !important; + } + .widget-control-button { + &.primary-text { + color: #2196f3; + } + } + + .hb-widget-chart-background { + background-color: rgba(#000070, 0.2); + display: none; + } +} From 849ae1eb36f5119290a6d260b903da98d991fe4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Arthur?= Date: Thu, 8 Oct 2020 23:08:06 -0300 Subject: [PATCH 4/6] feat: config layout update --- config.schema.json | 40 +++++++++++++++++++++++++++------------- 1 file changed, 27 insertions(+), 13 deletions(-) diff --git a/config.schema.json b/config.schema.json index c06bab9d9..6791bac14 100644 --- a/config.schema.json +++ b/config.schema.json @@ -41,16 +41,10 @@ "required": true }, "theme": { - "title": "UI Theme", + "title": "Color", "type": "string", - "default": "default", + "default": "purple", "oneOf": [ - { - "title": "Default", - "enum": [ - "default" - ] - }, { "title": "Red", "enum": [ @@ -145,7 +139,7 @@ "required": true }, "darkMode": { - "title": "Dark mode", + "title": "Dark Mode", "type": "string", "default": "auto", "required": true, @@ -171,7 +165,7 @@ ] }, "useDarkModeAccent": { - "title": "Navbar uses accent color in dark mode", + "title": "Highlight navbar in dark mode", "type": "boolean" }, "restart": { @@ -491,6 +485,7 @@ "layout": [ { "type": "flex", + "title": "General", "flex-flow": "row wrap", "items": [ { @@ -498,8 +493,28 @@ "flex-flow": "column", "items": [ "name", + "tempUnits" + ] + }, + { + "type": "flex", + "flex-flow": "column", + "items": [ + "port" + ] + } + ] + }, + { + "type": "flex", + "flex-flow": "row wrap", + "title": "Theme", + "items": [ + { + "type": "flex", + "flex-flow": "column", + "items": [ "theme", - "darkMode", "useDarkModeAccent" ] }, @@ -507,8 +522,7 @@ "type": "flex", "flex-flow": "column", "items": [ - "port", - "tempUnits" + "darkMode" ] } ] From 227d18b5c98893ff7b54b1ec1175047951db2015 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Arthur?= Date: Sat, 10 Oct 2020 14:55:17 -0300 Subject: [PATCH 5/6] feat: fallback from the legacy dark theme --- ui/src/app/core/auth/auth.service.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts index d3c6afc3c..fc40a80f5 100644 --- a/ui/src/app/core/auth/auth.service.ts +++ b/ui/src/app/core/auth/auth.service.ts @@ -185,6 +185,11 @@ export class AuthService { 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) { const el = window.document.querySelector('body'); const classes = el.className.split(' ').filter(c => !c.startsWith('config-ui-x-')); From e4f814a85b6bd8801abbe9f964f6f8c78ad2bf15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Arthur?= Date: Sat, 10 Oct 2020 16:34:53 -0300 Subject: [PATCH 6/6] refactor: removed unused default theme --- ui/src/scss/theme-dark.scss | 2 -- ui/src/scss/themes.scss | 1 - 2 files changed, 3 deletions(-) diff --git a/ui/src/scss/theme-dark.scss b/ui/src/scss/theme-dark.scss index a91070bf7..7a3f351f0 100644 --- a/ui/src/scss/theme-dark.scss +++ b/ui/src/scss/theme-dark.scss @@ -282,8 +282,6 @@ @return $string } -@include make-dark-theme("default", #ffa000, false); -@include make-dark-theme("default", #ffa000, true); @include make-dark-theme("red", #f44336, false); @include make-dark-theme("red", #f44336, true); @include make-dark-theme("pink", #e91e63, false); diff --git a/ui/src/scss/themes.scss b/ui/src/scss/themes.scss index 41cd7a4e7..d13be4323 100644 --- a/ui/src/scss/themes.scss +++ b/ui/src/scss/themes.scss @@ -67,7 +67,6 @@ } } -@include make-theme("default", #ffa000, #dd8a00); @include make-theme("red", #f44336, #d32f2f); @include make-theme("pink", #e91e63, #c2185b); @include make-theme("purple", #9c27b0, #421367);