fix: theme button don't change on matcher change

Author: Eugene

Diff for: src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.ts

@@ -1,6 +1,6 @@
-import { Component, Inject, OnInit } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
 import { MediaMatcher } from '@angular/cdk/layout';
+import { DOCUMENT } from '@angular/common';
+import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
 import { StorageService } from '../../services/storage.service';
 
 type Theme = 'light' | 'dark';
@@ -18,6 +18,7 @@ export class ThemeModeToggleComponent implements OnInit {
     private readonly document: Document,
     private readonly mediaMatcher: MediaMatcher,
     private readonly storageService: StorageService,
+    private readonly changeDetector: ChangeDetectorRef,
   ) {}
 
   ngOnInit() {
@@ -32,24 +33,25 @@ export class ThemeModeToggleComponent implements OnInit {
     const preferredScheme = darkSchemeMatcher.matches ? 'dark' : 'light';
     const storedTheme = this.getStoredTheme();
 
-    this.theme = storedTheme ?? preferredScheme;
-    this.setTheme(this.theme);
+    this.setTheme(storedTheme ?? preferredScheme);
   }
 
   toggleTheme(skipStorage = false) {
-    this.theme = this.theme === 'dark' ? 'light' : 'dark';
+    const newTheme = this.theme === 'dark' ? 'light' : 'dark';
     // NOTE: We should skip saving theme in storage when toggle is caused by matchMedia change event
     // Otherwise, once saved, it'll no longer correspond to the system preferences,
     // despite the user not touching the toggle button themselves
-    if (!skipStorage) this.storageService.set('theme', this.theme);
-    this.setTheme(this.theme);
+    if (!skipStorage) this.storageService.set('theme', newTheme);
+    this.setTheme(newTheme);
   }
 
   private getStoredTheme() {
     return this.storageService.get('theme') as Theme | null;
   }
 
   private setTheme(theme: Theme) {
+    this.theme = theme;
     this.document.documentElement.setAttribute('mode', theme);
+    this.changeDetector.detectChanges();
   }
 }