theme.service.ts 623 B

1234567891011121314151617181920212223
  1. import { Injectable, signal, effect } from '@angular/core';
  2. import { StorageService } from './storage.service';
  3. @Injectable({ providedIn: 'root' })
  4. export class ThemeService {
  5. readonly isDark = signal<boolean>(false);
  6. constructor(private storage: StorageService) {
  7. const saved = this.storage.get<boolean>('theme_dark');
  8. if (saved !== null) {
  9. this.isDark.set(saved);
  10. }
  11. effect(() => {
  12. const dark = this.isDark();
  13. document.documentElement.classList.toggle('dark', dark);
  14. this.storage.set('theme_dark', dark);
  15. });
  16. }
  17. toggle(): void {
  18. this.isDark.update(v => !v);
  19. }
  20. }