fix(domtools): stabilize DomTools lifecycle, cleanup, and singleton behavior

ts/domtools.classes.thememanager.ts

@@ -8,30 +8,36 @@ export class ThemeManager {
   public preferredColorSchemeMediaMatch = window.matchMedia('(prefers-color-scheme: light)');
 
   public themeObservable = new plugins.smartrx.rxjs.ReplaySubject<boolean>(1);
+  private automaticGlobalThemeChangeSubscription: plugins.smartrx.rxjs.Subscription | null = null;
+  private readonly preferredColorSchemeChangeHandler = (eventArg: MediaQueryListEvent) => {
+    this.goBrightBoolean = eventArg.matches;
+    this.updateAllConnectedElements();
+  };
 
   constructor(domtoolsRefArg: DomTools) {
     this.domtoolsRef = domtoolsRefArg;
 
     // lets care
     this.goBrightBoolean = this.preferredColorSchemeMediaMatch.matches;
-    this.preferredColorSchemeMediaMatch.addEventListener('change', (eventArg) => {
-      this.goBrightBoolean = eventArg.matches;
-      this.updateAllConnectedElements();
-    });
+    this.preferredColorSchemeMediaMatch.addEventListener('change', this.preferredColorSchemeChangeHandler);
     this.updateAllConnectedElements();
   }
 
   public async enableAutomaticGlobalThemeChange() {
-    if (document.body && document.body.style) {
-      this.themeObservable.subscribe({
+    await this.domtoolsRef.domReady.promise;
+    if (!this.automaticGlobalThemeChangeSubscription) {
+      this.automaticGlobalThemeChangeSubscription = this.themeObservable.subscribe({
         next: (goBright) => {
           document.body.style.background = goBright ? '#fff' : '#000';
-        }
+        },
       });
     }
   }
 
-  private async updateAllConnectedElements() {
+  private updateAllConnectedElements() {
+    if (this.domtoolsRef.disposed) {
+      return;
+    }
     this.themeObservable.next(this.goBrightBoolean);
   }
 
@@ -58,4 +64,11 @@ export class ThemeManager {
     this.goBrightBoolean = !this.goBrightBoolean;
     this.updateAllConnectedElements();
   }
+
+  public dispose() {
+    this.preferredColorSchemeMediaMatch.removeEventListener('change', this.preferredColorSchemeChangeHandler);
+    this.automaticGlobalThemeChangeSubscription?.unsubscribe();
+    this.automaticGlobalThemeChangeSubscription = null;
+    this.themeObservable.complete();
+  }
 }