fix(docs-app): adjusting how docs pulls active theme (#2109)

Co-authored-by: github-actions <[email protected]>
Teradata · Feb 27, 2024 · e4de3ce · e4de3ce
1 parent 4827c56
commit e4de3ce
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/apps/docs-app/src/app/app.component.html b/apps/docs-app/src/app/app.component.html
@@ -1,4 +1,4 @@
-<td-layout #layout [class]="activeTheme" [dir]="dir">
+<td-layout #layout [dir]="dir">
   <td-navigation-drawer
     sidenavTitle="Covalent"
     logo="teradata"

diff --git a/apps/docs-app/src/app/app.component.ts b/apps/docs-app/src/app/app.component.ts
@@ -226,11 +226,4 @@ export class DocsAppComponent {
     // set direction
     this.dir = getDirection();
   }
-
-  get activeTheme(): string {
-    return localStorage.getItem('theme') ?? '';
-  }
-  theme(theme: string): void {
-    localStorage.setItem('theme', theme);
-  }
 }
diff --git a/apps/docs-app/src/app/components/toolbar/toolbar.component.html b/apps/docs-app/src/app/components/toolbar/toolbar.component.html
@@ -78,7 +78,7 @@
       <button
         mat-menu-item
         *ngIf="activeTheme === 'theme-dark'"
-        (click)="theme('default-theme')"
+        (click)="theme('theme-light')"
       >
         <mat-icon>brightness_high</mat-icon>
         <span>Light Mode</span>

diff --git a/apps/docs-app/src/app/components/toolbar/toolbar.component.ts b/apps/docs-app/src/app/components/toolbar/toolbar.component.ts
@@ -31,7 +31,17 @@ export class ToolbarComponent implements OnInit {
     private _dir: Dir,
     @Inject(DOCUMENT) private _document: any
   ) {
+    const localTheme = localStorage.getItem('theme');
+
     this._dir.dir = this.dir;
+
+    // Set active theme from user dark theme preference if not set locally
+    this.activeTheme =
+      localTheme ??
+      (window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'theme-dark'
+        : 'theme-light');
   }
 
   async ngOnInit(): Promise<void> {
@@ -53,8 +63,12 @@ export class ToolbarComponent implements OnInit {
   get activeTheme(): string | null {
     return localStorage.getItem('theme');
   }
-  set activeTheme(theme: string) {
-    localStorage.setItem('theme', theme);
+  set activeTheme(activeTheme: string) {
+    document.querySelector('body')?.classList.remove('theme-dark');
+    document.querySelector('body')?.classList.remove('theme-light');
+
+    localStorage.setItem('theme', activeTheme);
+    document.querySelector('body')?.classList.add(activeTheme);
   }
 
   theme(theme: string): void {