Add dark theme support to the console (#2167)

console-webapp/src/app/app.component.scss

@@ -37,7 +37,7 @@
       background-color: transparent;
     }
     .active {
-      background: #eae1e1;
+      background-color: var(--secondary);
     }
   }
   &__content-wrapper {

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);
       }
     }
   }

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;

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".
+** Application specific section - Global styles and mixins
-$theme: mat.define-light-theme(
+**/
-  (
-    color: (
-      primary: $theme-primary,
-      accent: $theme-accent,
-      warn: $theme-warn,
-    ),
-    density: 0,
-  )
-);
-
-/** Application specific section **/
 
 @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();
+}