feat: prepared dark theme

Author: Anlanther

src/app/components/workspace-selector/workspace-selector.component.html

@@ -3,7 +3,13 @@
     <mat-form-field appearance="outline" class="form">
       <input matInput [formControl]="form" placeholder="Search" />
     </mat-form-field>
-    <button mat-flat-button class="actions button-accent">Accent Button</button>
+    <button
+      mat-flat-button
+      (click)="toggleTheme()"
+      class="actions button-accent"
+    >
+      Accent Button
+    </button>
   </div>
 
   <mat-tab-group class="table-tabs">

src/app/components/workspace-selector/workspace-selector.component.ts

@@ -16,4 +16,6 @@ import { DiscoveryTableComponent } from './discovery-table/discovery-table.compo
 })
 export class WorkspaceSelectorComponent {
   form = new FormControl('');
+
+  toggleTheme() {}
 }

src/app/styles/_dark_theme-colors.scss

@@ -0,0 +1,137 @@
+// This file was generated by running 'ng generate @angular/material:theme-color'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #026fad, secondary: #20242b, tertiary: #a2d830, neutral: #747c89, neutral variant: #414956, error: #d23729
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001d33,
+    20: #003353,
+    25: #003e64,
+    30: #004a76,
+    35: #005688,
+    40: #00639b,
+    50: #237cbb,
+    60: #4696d7,
+    70: #65b1f3,
+    80: #97cbff,
+    90: #cee5ff,
+    95: #e8f2ff,
+    98: #f7f9ff,
+    99: #fcfcff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #181c23,
+    20: #2d3138,
+    25: #383c43,
+    30: #43474f,
+    35: #4f525a,
+    40: #5b5e67,
+    50: #737780,
+    60: #8d9199,
+    70: #a8abb4,
+    80: #c3c6d0,
+    90: #dfe2ec,
+    95: #eef0fa,
+    98: #f9f9ff,
+    99: #fdfcff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #131f00,
+    20: #243600,
+    25: #2d4200,
+    30: #364e00,
+    35: #405b00,
+    40: #496800,
+    50: #5d8200,
+    60: #729e00,
+    70: #87bb06,
+    80: #a2d72f,
+    90: #bcf54c,
+    95: #d6ff88,
+    98: #f1ffd1,
+    99: #faffe5,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #141c26,
+    20: #29313c,
+    25: #343c47,
+    30: #3f4753,
+    35: #4b535f,
+    40: #575f6b,
+    50: #707884,
+    60: #89919f,
+    70: #a4acba,
+    80: #bfc7d5,
+    90: #dbe3f2,
+    95: #eaf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff,
+    4: #070f19,
+    6: #0c141e,
+    12: #18202b,
+    17: #232a35,
+    22: #2d3541,
+    24: #323a45,
+    87: #d3dae9,
+    92: #e1e9f7,
+    94: #e6eefd,
+    96: #eff4ff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #141c27,
+    20: #29313d,
+    25: #343c48,
+    30: #3f4754,
+    35: #4b5360,
+    40: #575f6c,
+    50: #6f7786,
+    60: #8991a0,
+    70: #a4acbb,
+    80: #bfc7d7,
+    90: #dbe3f3,
+    95: #ebf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410000,
+    20: #690001,
+    25: #7e0001,
+    30: #930002,
+    35: #a5130d,
+    40: #b72218,
+    50: #da3d2e,
+    60: #fe5644,
+    70: #ff8a79,
+    80: #ffb4a9,
+    90: #ffdad5,
+    95: #ffedea,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes,  neutral-variant),
+  error: map.get($_palettes, error),
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);

src/app/styles/_vars.scss

@@ -5,4 +5,11 @@ $neutral-color-light: #ffffff;
 $neutral-color-variant-light: #eeeff0;
 $error-color-light: #d23729;
 
+$primary-color-dark: #026fad;
+$secondary-color-dark: #20242b;
+$tertiary-color-dark: #a2d830;
+$neutral-color-dark: #747c89;
+$neutral-color-variant-dark: #414956;
+$error-color-dark: #d23729;
+
 $border-radius: 2px;