WEB-492: Material Design 3 implementation: Login

src/app/shared/theme-toggle/theme-toggle.component.ts

@@ -2,7 +2,7 @@ import { Component, OnChanges, OnInit, SimpleChanges, inject } from '@angular/co
 import { ThemingService } from './theming.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { MatIconButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
+import { M3IconComponent } from '../m3-ui/m3-icon/m3-icon.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
@@ -12,7 +12,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     MatIconButton,
-    MatIcon
+    M3IconComponent
   ]
 })
 export class ThemeToggleComponent implements OnInit, OnChanges {
@@ -29,8 +29,16 @@ export class ThemeToggleComponent implements OnInit, OnChanges {
     this.darkModeOn = !!this.settingsService.themeDarkEnabled;
   }
 
+  /**
+   * Toggle between light and dark themes
+   * This method handles the complete theme switching process:
+   * 1. Toggles the local state
+   * 2. Persists the preference to settings
+   */
   toggleTheme() {
+    // Step 1: Toggle the dark mode state
     this.darkModeOn = !this.darkModeOn;
+    // Step 2: Persist the theme preference to localStorage via settings service
     this.settingsService.setThemeDarkEnabled(this.darkModeOn);
     this.themingService.setDarkMode(this.darkModeOn);
   }