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

0001 import {Component, computed, OnInit} 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   imports: [MatMenuModule, MatIconModule, MatButtonModule]
0013 })
0014 export class ThemeSwitcherComponent implements OnInit {
0015   /**
0016    * A computed signal that returns the appropriate Material icon name
0017    * based on the current theme stored in ThemeService.
0018    */
0019   public currentIcon = computed(() => {
0020     const theme = this.themeService.currentTheme();
0021     // Return the corresponding icon name based on the theme value.
0022
0023     if(theme === 'system') {
0024       return 'settings_brightness';
0025     }
0026     return theme === "dark" ? 'dark_mode' : 'light_mode';
0027   });
0028
0029   public systemIcon = computed(()=>
0030     this.themeService.getSystemTheme()=== "dark" ? 'dark_mode' : 'light_mode');
0031
0032   /**
0033    * Creates an instance of ThemeSwitcherComponent.
0034    * @param themeService The ThemeService managing theme state via signals.
0035    */
0036   constructor(public themeService: ThemeService) {}
0037
0038   ngOnInit(): void {
0039     this.themeService.initializeTheme();
0040   }
0041
0042   /**
0043    * Handles user selection of a new theme from the menu.
0044    * This updates the global theme using ThemeService.
0045    * @param theme The new theme selected by the user.
0046    */
0047   selectTheme(theme: Theme): void {
0048     this.themeService.setTheme(theme);
0049   }
0050 }