components/theme-switcher/theme-switcher.component.ts

0001 import {Component, computed, OnInit, ChangeDetectionStrategy} from '@angular/core';
0002 import { ThemeService, Theme } from '../../services/theme.service';
0003 import { MatMenuModule } from '@angular/material/menu';
0004 import { MatIconModule } from '@angular/material/icon';
0005 import { MatButtonModule } from '@angular/material/button';
0006
0007 @Component({
0008   selector: 'app-theme-switcher',
0009   templateUrl: './theme-switcher.component.html',
0010   styleUrls: ['./theme-switcher.component.scss'],
0011   standalone: true,
0012   changeDetection: ChangeDetectionStrategy.OnPush,
0013   imports: [MatMenuModule, MatIconModule, MatButtonModule]
0014 })
0015 export class ThemeSwitcherComponent implements OnInit {
0016   /**
0017    * A computed signal that returns the appropriate Material icon name
0018    * based on the current theme stored in ThemeService.
0019    */
0020   public currentIcon = computed(() => {
0021     const theme = this.themeService.currentTheme();
0022     // Return the corresponding icon name based on the theme value.
0023
0024     if(theme === 'system') {
0025       return 'settings_brightness';
0026     }
0027     return theme === "dark" ? 'dark_mode' : 'light_mode';
0028   });
0029
0030   public systemIcon = computed(()=>
0031     this.themeService.getSystemTheme()=== "dark" ? 'dark_mode' : 'light_mode');
0032
0033   /**
0034    * Creates an instance of ThemeSwitcherComponent.
0035    * @param themeService The ThemeService managing theme state via signals.
0036    */
0037   constructor(public themeService: ThemeService) {}
0038
0039   ngOnInit(): void {
0040     this.themeService.initializeTheme();
0041   }
0042
0043   /**
0044    * Handles user selection of a new theme from the menu.
0045    * This updates the global theme using ThemeService.
0046    * @param theme The new theme selected by the user.
0047    */
0048   selectTheme(theme: Theme): void {
0049     this.themeService.setTheme(theme);
0050   }
0051 }