From 4fb8a1b50b13e67167bf9895fba65c88e4c89152 Mon Sep 17 00:00:00 2001 From: Pavlo Tkach <3469726+ptkach@users.noreply.github.com> Date: Tue, 3 Oct 2023 15:54:25 -0400 Subject: [PATCH] Add dark theme support to the console (#2167) --- console-webapp/src/app/app.component.scss | 2 +- .../src/app/settings/settings.component.scss | 4 +- console-webapp/src/styles.scss | 1 + console-webapp/src/theme.scss | 88 +++++++++++++------ 4 files changed, 65 insertions(+), 30 deletions(-) diff --git a/console-webapp/src/app/app.component.scss b/console-webapp/src/app/app.component.scss index 889cbf173..a3a6b7ec6 100644 --- a/console-webapp/src/app/app.component.scss +++ b/console-webapp/src/app/app.component.scss @@ -37,7 +37,7 @@ background-color: transparent; } .active { - background: #eae1e1; + background-color: var(--secondary); } } &__content-wrapper { diff --git a/console-webapp/src/app/settings/settings.component.scss b/console-webapp/src/app/settings/settings.component.scss index e018101a7..afae0f193 100644 --- a/console-webapp/src/app/settings/settings.component.scss +++ b/console-webapp/src/app/settings/settings.component.scss @@ -15,9 +15,9 @@ .console-settings { .mdc-tab { &.active-link { - border-bottom: 2px solid #673ab7; + border-bottom: 2px solid var(--primary); .mdc-tab__text-label { - color: #673ab7; + color: var(--primary); } } } diff --git a/console-webapp/src/styles.scss b/console-webapp/src/styles.scss index 2d85f950c..1af5a15fe 100644 --- a/console-webapp/src/styles.scss +++ b/console-webapp/src/styles.scss @@ -52,6 +52,7 @@ body { text-align: center; } &-icon { + color: var(--text); font-size: 5rem; line-height: 5rem; height: 5rem !important; diff --git a/console-webapp/src/theme.scss b/console-webapp/src/theme.scss index 489a8178a..305189ad2 100644 --- a/console-webapp/src/theme.scss +++ b/console-webapp/src/theme.scss @@ -17,20 +17,9 @@ $theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); // The warn palette is optional (defaults to red). $theme-warn: mat.define-palette(mat.$red-palette); -// Create the theme object. A theme consists of configurations for individual -// theming systems such as "color" or "typography". -$theme: mat.define-light-theme( - ( - color: ( - primary: $theme-primary, - accent: $theme-accent, - warn: $theme-warn, - ), - density: 0, - ) -); - -/** Application specific section **/ +/** +** Application specific section - Global styles and mixins +**/ @mixin form-field-density($density) { $field-typography: mat.define-typography-config( @@ -46,19 +35,6 @@ $theme: mat.define-light-theme( @include form-field-density(-5); } -$foreground: map.merge($theme, mat.$light-theme-foreground-palette); - -// Access and define a class with secondary color exposed -.secondary-text { - color: map.get($foreground, "secondary-text"); -} - -:root { - --primary: #{mat.get-color-from-palette($theme-primary, 500)}; - --secondary: #{map.get($foreground, "secondary-text")}; -} - -@include mat.all-component-themes($theme); @import "@angular/material/theming"; // Define application specific typography settings, font-family, etc @@ -67,3 +43,61 @@ $typography-configuration: mat-typography-config( ); @include angular-material-typography($typography-configuration); + +/** +** Light theme +**/ +$light-theme: mat.define-light-theme( + ( + color: ( + primary: $theme-primary, + accent: $theme-accent, + warn: $theme-warn, + ), + density: 0, + ) +); + +// Access and define a class with secondary color exposed +.secondary-text { + color: map.get(mat.$light-theme-foreground-palette, "secondary-text"); +} + +:root { + --text: #{map.get(mat.$light-theme-foreground-palette, "base")}; + --primary: #{mat.get-color-from-palette($theme-primary, 500)}; + --secondary: #{map.get(mat.$light-theme-foreground-palette, "secondary-text")}; +} + +@include mat.all-component-themes($light-theme); + +/** +** Dark theme +**/ +$dark-theme: mat.define-dark-theme( + ( + color: ( + primary: mat.define-palette(mat.$pink-palette), + accent: mat.define-palette(mat.$blue-grey-palette), + ), + density: 0, + ) +); + +@mixin _apply-dark-mode-colors() { + @include mat.all-component-colors($dark-theme); + + .secondary-text { + color: map.get(mat.$dark-theme-foreground-palette, "secondary-text"); + } + + :root { + --text: #{map.get(mat.$dark-theme-foreground-palette, "base")}; + --primary: #{mat.get-color-from-palette(mat.$pink-palette, 500)}; + --secondary: #{map.get(mat.$dark-theme-background-palette, "secondary-text")}; + } +} + +@media (prefers-color-scheme: dark) { + @include _apply-dark-mode-colors(); +}