feat: added theme switcher - wip

Author: marcin-hoa

apps/blog/src/assets/icons/moon.svg

@@ -1,8 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
 import { inject, Injectable, PLATFORM_ID } from '@angular/core';
-import { signalStore, withMethods, withState } from '@ngrx/signals';
+import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
 
-type Theme = 'dark' | 'light';
+export type Theme = 'dark' | 'light';
 
 interface AppThemeStore {
   theme: Theme;
@@ -19,9 +19,16 @@ export const AppThemeStore = signalStore(
     ) => ({
       syncWithSystemTheme: () => {
         if (isPlatformBrowser(platformId)) {
-          ccConsumer.setThemeClass(getSystemTheme());
+          const theme = getSystemTheme();
+          ccConsumer.setThemeAttribute(theme);
+          patchState(store, { theme: theme });
         }
       },
+      toggleTheme: () => {
+        const theme = store.theme() === 'dark' ? 'light' : 'dark';
+        ccConsumer.setThemeAttribute(theme);
+        patchState(store, { theme: theme });
+      },
     }),
   ),
 );
@@ -35,15 +42,7 @@ function getSystemTheme(): Theme {
 /* todo: create consumer interface and decouple AppThemeStore from CCAppThemeConsumer*/
 @Injectable({ providedIn: 'root' })
 export class CCAppThemeConsumer {
-  setThemeClass(theme: Theme): void {
-    const htmlElement = document.documentElement;
-    switch (theme) {
-      case 'dark':
-        htmlElement.classList.add('cc--darkmode');
-        break;
-      case 'light':
-        htmlElement.classList.remove('cc--darkmode');
-        break;
-    }
+  setThemeAttribute(theme: Theme): void {
+    document.documentElement.setAttribute('data-theme', theme);
   }
 }

apps/blog/src/assets/icons/sun.svg

@@ -1,10 +1,12 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   input,
   output,
   signal,
 } from '@angular/core';
+import { FastSvgComponent } from '@push-based/ngx-fast-svg';
 
 import {
   LanguagePickerComponent,
@@ -36,6 +38,19 @@ import {
             (languageChange)="languageChange.emit($event)"
           />
 
+          <button
+            aria-label="Toggle theme"
+            class="flex items-center bg-transparent p-1"
+            (click)="themeToggle.emit()"
+            date-testid="header-theme-switch"
+          >
+            <fast-svg
+              class="text-al-pink"
+              [name]="themeSwitchIcon()"
+              size="24"
+            />
+          </button>
+
           <ng-content />
 
           <al-header-hamburger
@@ -60,15 +75,23 @@ import {
     HeaderHamburgerComponent,
     HeaderMobileMenuComponent,
     LanguagePickerComponent,
+    FastSvgComponent,
   ],
 })
 export class HeaderComponent {
   readonly language = input.required<string>();
+  readonly theme = input.required<'light' | 'dark'>();
 
   protected languageChange = output<string>();
 
+  protected themeToggle = output<void>();
+
   protected showNav = signal<boolean>(false);
 
+  protected readonly themeSwitchIcon = computed(() =>
+    this.theme() === 'light' ? 'moon' : 'sun',
+  );
+
   protected toggleNav(): void {
     this.showNav.set(!this.showNav());
   }

libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts

@@ -18,7 +18,9 @@ export type IconType =
   | 'send'
   | 'tick'
   | 'twitter-x'
-  | 'youtube';
+  | 'youtube'
+  | 'sun'
+  | 'moon';
 
 @Component({
   selector: 'al-icon',

libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts

@@ -18,6 +18,7 @@ import {
   AlBannerCarouselComponent,
   TopBannerComponent,
 } from '@angular-love/blog/shared/ad-banner';
+import { AppThemeStore } from '@angular-love/data-access-app-theme';
 
 @Component({
   selector: 'al-root-shell',
@@ -27,7 +28,9 @@ import {
       <al-header
         class="block w-full"
         [language]="language()"
+        [theme]="theme()"
         (languageChange)="onLanguageChange($event)"
+        (themeToggle)="onThemeToggle()"
       >
         <al-search />
       </al-header>
@@ -73,6 +76,10 @@ export class RootShellComponent {
 
   readonly translocoService = inject(TranslocoService);
 
+  private readonly _appThemeStore = inject(AppThemeStore);
+
+  protected readonly theme = computed(() => this._appThemeStore.theme());
+
   // todo: temporary solution to keep in mind how banner influence the layout
   protected readonly adBannerVisible = computed(() => false);
 
@@ -94,6 +101,10 @@ export class RootShellComponent {
     );
   }
 
+  onThemeToggle() {
+    this._appThemeStore.toggleTheme();
+  }
+
   constructor(viewport: ViewportScroller) {
     // todo: temporary solution to keep in mind how banner influence the layout
     effect(() => {

libs/blog/shared/ui-icon/src/lib/icon/icon.component.ts

@@ -5,7 +5,7 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
+  :root[data-theme='dark'] {
     --primary: 255 0 106;
     --foreground: 255 255 255;
     --primary-foreground: 255 255 255;
@@ -16,17 +16,15 @@
     --grey: 46 47 59;
   }
 
-  @media (prefers-color-scheme: light) {
-    :root {
-      --primary: 213 1 89;
-      --foreground: 20 21 27;
-      --primary-foreground: 0 0 0;
-      --muted: 25 25 25;
-      --border: 200 200 200;
-      --card: 255 255 255;
-      --background: 255 255 255;
-      --grey: 241 241 241;
-    }
+  :root[data-theme='light'] {
+    --primary: 213 1 89;
+    --foreground: 20 21 27;
+    --primary-foreground: 0 0 0;
+    --muted: 25 25 25;
+    --border: 200 200 200;
+    --card: 255 255 255;
+    --background: 255 255 255;
+    --grey: 241 241 241;
   }
 }