WEB-492: Material Design 3 implementation: Login

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

@@ -1,3 +1,3 @@
-<button mat-icon-button (click)="toggleTheme()" class="m-l-15 m-r-5">
-  <mat-icon>{{ darkModeOn ? 'wb_sunny' : 'nights_stay' }}</mat-icon>
+<button mat-icon-button (click)="toggleTheme()" class="m-l-5 m-r-5">
+  <mifosx-m3-icon [name]="darkModeOn ? 'wb_sunny' : 'nights_stay'"></mifosx-m3-icon>
 </button>

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);
   }

src/app/shared/theme-toggle/theming.service.ts

@@ -41,8 +41,10 @@ export class ThemingService {
     this.darkModeOn = isDarkMode;
     if (isDarkMode) {
       document.body.classList.add('dark-theme');
+      document.body.classList.remove('light-theme');
       this.theme.next('dark-theme');
     } else {
+      document.body.classList.add('light-theme');
       document.body.classList.remove('dark-theme');
       this.theme.next('light-theme');
     }