chore(core): install primeng and tailwind

src/app/core/service/theme-switch.service.ts

@@ -0,0 +1,56 @@
+import {effect, Injectable, signal, WritableSignal} from '@angular/core';
+import {Theme} from "../models/theme";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeSwitchService {
+  private readonly THEME_KEY = 'app-theme-mode';
+
+  public theme: WritableSignal<Theme> = signal(Theme.DEFAULT_THEME);
+
+  constructor() {
+    effect(() => {
+      const currentTheme = this.theme();
+      localStorage.setItem(this.THEME_KEY, currentTheme.code);
+
+      const html = document.querySelector('html')!;
+      const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      const isDark = currentTheme.code === 'dark' || (currentTheme.code === 'system' && systemPrefersDark);
+
+      html.classList.toggle('dark', isDark);
+    });
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (this.theme().code === 'system') {
+        this.theme.update(t => t);
+      }
+    });
+  }
+
+  initialize() {
+    console.info('initializing dark mode service');
+    const stored = Theme.THEMES.find(theme => theme.code === localStorage.getItem(this.THEME_KEY));
+
+    if (stored === undefined) {
+      this.theme.set(Theme.DEFAULT_THEME);
+      return;
+    }
+
+    if (stored.code === 'dark' || stored.code === 'light' || stored.code === 'system') {
+      this.theme.set(stored);
+    } else {
+      this.theme.set(Theme.DEFAULT_THEME);
+    }
+  }
+
+  switchToTheme(theme: Theme) {
+    console.info(`switching to theme: ${theme.name}`);
+    this.theme.set(theme);
+  }
+
+  isDarkMode(): boolean {
+    return this.theme().code === 'dark' || (this.theme().code === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  }
+}