Merge pull request #1 from Anlanther/test

refactor: added dark theme and overrides

Author: Anlanther

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

@@ -6,13 +6,22 @@
     <button
       mat-flat-button
       (click)="toggleTheme()"
-      class="actions button-accent"
+      class="actions"
+      [class.button-accent-light]="!(isDarkTheme$ | async)"
+      [class.button-accent-dark]="isDarkTheme$ | async"
     >
-      Accent Button
+      <mat-icon>
+        {{ (isDarkTheme$ | async) ? "light_mode" : "dark_mode" }}
+      </mat-icon>
+      {{ (isDarkTheme$ | async) ? "Light Theme" : "Dark Theme" }}
     </button>
   </div>
 
-  <mat-tab-group class="table-tabs">
+  <mat-tab-group
+    [class.table-tabs-light]="!(isDarkTheme$ | async)"
+    [class.table-tabs-dark]="isDarkTheme$ | async"
+    class="table-tabs"
+  >
     <mat-tab label="First"><app-discovery-table></app-discovery-table></mat-tab>
     <mat-tab label="Second">
       <app-discovery-table></app-discovery-table>

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

@@ -2,19 +2,38 @@
 @use "../../styles/vars" as vars;
 @use "../../styles/mixins" as mixins;
 
-.button-accent {
+@mixin button($theme: "light") {
+  $tertiary-color: if(
+    $theme == "light",
+    vars.$tertiary-color-light,
+    vars.$tertiary-color-dark
+  );
+
   @include mat.button-overrides(
     (
-      filled-container-color: vars.$tertiary-color-light,
-      filled-label-text-color: black,
+      filled-container-color: $tertiary-color,
+      filled-label-text-color: vars.$text-color-black,
       filled-container-height: 36px,
     )
   );
 }
 
-.table-tabs {
+.button-accent-light {
+  @include button("light");
+}
+
+.button-accent-dark {
+  @include button("dark");
+}
+
+.table-tabs-light {
   background-color: vars.$neutral-color-variant-light;
-  @include mixins.single-color-tabs;
+  @include mixins.single-color-tabs("light");
+}
+
+.table-tabs-dark {
+  background-color: vars.$neutral-color-variant-dark;
+  @include mixins.single-color-tabs("dark");
 }
 
 .discovery {

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

@@ -1,6 +1,8 @@
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MaterialModule } from '../../modules/material.module';
+import { ThemeService } from '../../services/theme.service';
 import { DiscoveryTableComponent } from './discovery-table/discovery-table.component';
 
 @Component({
@@ -10,12 +12,20 @@ import { DiscoveryTableComponent } from './discovery-table/discovery-table.compo
     DiscoveryTableComponent,
     ReactiveFormsModule,
     FormsModule,
+    AsyncPipe,
   ],
   templateUrl: './workspace-selector.component.html',
   styleUrl: './workspace-selector.component.scss',
 })
 export class WorkspaceSelectorComponent {
   form = new FormControl('');
+  isDarkTheme$;
 
-  toggleTheme() {}
+  constructor(private themeService: ThemeService) {
+    this.isDarkTheme$ = this.themeService.isDarkTheme$;
+  }
+
+  toggleTheme() {
+    this.themeService.toggleTheme();
+  }
 }

src/app/services/style-manager.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeService {
+  private darkThemeSubject = new BehaviorSubject<boolean>(false);
+  isDarkTheme$ = this.darkThemeSubject.asObservable();
+
+  toggleTheme() {
+    const isDarkTheme = !this.darkThemeSubject.value;
+    this.darkThemeSubject.next(isDarkTheme);
+    if (isDarkTheme) {
+      document.documentElement.classList.add('dark-theme');
+    } else {
+      document.documentElement.classList.remove('dark-theme');
+    }
+  }
+
+  getCurrentTheme(): boolean {
+    return this.darkThemeSubject.value;
+  }
+}

src/app/services/theme.service.ts

@@ -1,14 +1,59 @@
 @use "@angular/material" as mat;
 @use "./vars" as vars;
 
-@mixin single-color-tabs {
+@mixin single-color-tabs($theme: "light") {
+  $neutral-color: if(
+    $theme == "light",
+    vars.$neutral-color-light,
+    vars.$neutral-color-dark
+  );
+  $neutral-variant: if(
+    $theme == "light",
+    vars.$neutral-color-variant-light,
+    vars.$neutral-color-variant-dark
+  );
+
   @include mat.tabs-overrides(
     (
-      divider-height: 0,
+      background-color: $neutral-variant,
       active-indicator-height: 100vh,
-      active-indicator-color: vars.$neutral-color-light,
-      active-focus-indicator-color: vars.$neutral-color-light,
-      active-hover-indicator-color: vars.$neutral-color-light,
+      active-indicator-color: $neutral-color,
+      active-focus-indicator-color: $neutral-color,
+      active-hover-indicator-color: $neutral-color,
+      divider-height: 0,
+    )
+  );
+}
+
+@mixin component-overrides($theme: "light") {
+  $neutral-color: if(
+    $theme == "light",
+    vars.$neutral-color-light,
+    vars.$neutral-color-dark
+  );
+  $neutral-variant: if(
+    $theme == "light",
+    vars.$neutral-color-variant-light,
+    vars.$neutral-color-variant-dark
+  );
+
+  @include mat.button-overrides(
+    (
+      filled-container-shape: vars.$border-radius,
+    )
+  );
+
+  @include mat.table-overrides(
+    (
+      background-color: $neutral-color,
+      row-item-outline-width: 0,
+    )
+  );
+
+  @include mat.form-field-overrides(
+    (
+      filled-container-shape: vars.$border-radius,
+      outlined-outline-color: $neutral-variant,
     )
   );
 }

src/app/styles/_dark_theme-colors.scss src/app/styles/_dark-theme-colors.scsssrc/app/styles/_dark_theme-colors.scss renamed to src/app/styles/_dark-theme-colors.scss

@@ -12,4 +12,7 @@ $neutral-color-dark: #747c89;
 $neutral-color-variant-dark: #414956;
 $error-color-dark: #d23729;
 
+$text-color-black: black;
+$text-color-white: white;
+
 $border-radius: 2px;

src/app/styles/_mixins.scss

@@ -3,7 +3,8 @@
   focusOnNavigation
   mat-stretch-tabs="false"
   [tabPanel]="panel"
-  class="tabs"
+  [class.tabs-light]="!(isDarkTheme$ | async)"
+  [class.tabs-dark]="isDarkTheme$ | async"
 >
   @for (workspace of workspaces; track workspace) {
     <a
@@ -12,7 +13,8 @@
       routerLinkActive
       #rla="routerLinkActive"
       [active]="rla.isActive"
-      [class.isInactive]="!rla.isActive"
+      [class.inactive-light]="!rla.isActive && !(isDarkTheme$ | async)"
+      [class.inactive-dark]="!rla.isActive && (isDarkTheme$ | async)"
     >
       {{ workspace }}
     </a>

src/app/styles/_vars.scss

@@ -2,14 +2,34 @@
 @use "../../styles/vars" as vars;
 @use "../../styles/mixins" as mixins;
 
-.isInactive {
-  background-color: var(--mat-sys-surface-variant);
+@mixin main-table($theme: "light") {
+  $neutral-variant: if(
+    $theme == "light",
+    vars.$neutral-color-variant-light,
+    vars.$neutral-color-variant-dark
+  );
+
+  background-color: $neutral-variant;
+}
+
+.inactive-light {
+  @include main-table("light");
+  border-radius: vars.$border-radius;
+}
+
+.inactive-dark {
+  @include main-table("dark");
   border-radius: vars.$border-radius;
 }
 
-.tabs {
+.tabs-light {
+  margin: 5px 0;
+  @include mixins.single-color-tabs("light");
+}
+
+.tabs-dark {
   margin: 5px 0;
-  @include mixins.single-color-tabs;
+  @include mixins.single-color-tabs("dark");
 }
 
 .gap {