chore: update Angular cache and TypeScript build info files

src/components/themes/themes-nav.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, QueryList, ViewChild, ViewChildren, inject, signal, effect } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, QueryList, ViewChild, ViewChildren, inject, signal, effect, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { ThemesService } from '../../services/themes.service';
@@ -10,7 +10,7 @@ import { ThemesService } from '../../services/themes.service';
   imports: [CommonModule],
   templateUrl: './themes-nav.component.html'
 })
-export class ThemesNavComponent {
+export class ThemesNavComponent implements OnDestroy {
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   themesSvc = inject(ThemesService);
@@ -22,6 +22,9 @@ export class ThemesNavComponent {
   @ViewChildren('pill', { read: ElementRef }) pills!: QueryList<ElementRef<HTMLButtonElement>>;
   @ViewChild('scroll', { static: false }) scrollRef?: ElementRef<HTMLDivElement>;
 
+  // Signal to force re-evaluation when data-theme changes
+  private themeChanged = signal<number>(0);
+
   constructor() {
     // Reflect current URL into active slug
     this.router.events.subscribe((e) => {
@@ -29,6 +32,17 @@ export class ThemesNavComponent {
     });
     // Also on init
     setTimeout(() => this.syncFromUrl(), 0);
+
+    // Effect to listen for theme changes on document.documentElement
+    effect(() => {
+      const currentTheme = document.documentElement.getAttribute('data-theme') || 'system';
+      // Trigger re-evaluation when theme changes
+      this.themeChanged.update(n => n + 1);
+    });
+  }
+
+  ngOnDestroy() {
+    // Nothing to cleanup
   }
 
   private syncFromUrl() {
@@ -75,30 +89,40 @@ export class ThemesNavComponent {
   }
 
   // Theme helpers (read from document attribute/localStorage)
-  private getCurrentTheme(): string {
+  private getCurrentTheme(): 'light' | 'dark' | 'black' | 'blue' | 'system' {
     try {
       const fromAttr = document.documentElement.getAttribute('data-theme');
-      if (fromAttr) return fromAttr;
+      if (fromAttr) return fromAttr as any;
       const fromStorage = localStorage.getItem('newtube.theme');
-      const val = fromStorage || 'system';
-      if (val === 'system') {
-        // Resolve to light/dark using media query so styles can be deterministic
-        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-        return prefersDark ? 'dark' : 'light';
-      }
-      return val;
+      return (fromStorage as any) || 'system';
     } catch {
-      // Safe fallback: prefer dark for safety in most UIs
-      const prefersDark = typeof window !== 'undefined' && (window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false);
-      return prefersDark ? 'dark' : 'light';
+      return 'system';
     }
   }
 
+  private resolveThemeSlug(): 'light' | 'dark' | 'black' | 'blue' {
+    const cur = this.getCurrentTheme();
+    if (cur === 'system') {
+      const prefersDark = typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+      return prefersDark ? 'dark' : 'light';
+    }
+    return cur as any;
+  }
+
   isLightTheme(): boolean {
-    const t = this.getCurrentTheme();
-    return t === 'light' || t === 'system';
+    this.themeChanged(); // Trigger re-evaluation
+    return this.resolveThemeSlug() === 'light';
+  }
+  isDarkTheme(): boolean {
+    this.themeChanged(); // Trigger re-evaluation
+    return this.resolveThemeSlug() === 'dark';
+  }
+  isBlackTheme(): boolean {
+    this.themeChanged(); // Trigger re-evaluation
+    return this.resolveThemeSlug() === 'black';
+  }
+  isBlueTheme(): boolean {
+    this.themeChanged(); // Trigger re-evaluation
+    return this.resolveThemeSlug() === 'blue';
   }
-  isDarkTheme(): boolean { return this.getCurrentTheme() === 'dark'; }
-  isBlackTheme(): boolean { return this.getCurrentTheme() === 'black'; }
-  isBlueTheme(): boolean { return this.getCurrentTheme() === 'blue'; }
 }