fix: avoid flickering on the case of color=dark

assets/js/mode/index.ts

@@ -1,18 +1,40 @@
-import Component from 'js/component';
 import { default as params } from '@params';
+import Component from 'js/component';
 import { default as LocalStorage } from 'js/local-storage';
 
+const MODE_AUTO = 'auto';
+const MODE_DARK = 'dark';
+const MODE_LIGHT = 'light';
+
+const modes = [
+  MODE_AUTO,
+  MODE_DARK,
+  MODE_LIGHT,
+];
+
 class ModeToggle implements Component {
+  // Cache key.
   public key = 'mode';
-  private mode = 'auto';
+
+  // Current color mode.
+  private mode;
+
   private items;
 
+  constructor() {
+    // Load from local storage.
+    let mode = LocalStorage.getItem(this.key);
+    if (!mode) {
+      mode = params.color;
+    }
+    this.mode = modes.includes(mode) ? mode : MODE_AUTO;
+  }
+
   run() {
-    const mode = LocalStorage.getItem(this.key);
-    this.setMode(mode);
+    this.setMode(this.mode);
     window.addEventListener('load', () => {
       this.initListeners();
-      this.initMode();
+      this.active(this.mode);
     })
   }
 
@@ -21,6 +43,7 @@ class ModeToggle implements Component {
     this.items.forEach((ele) => {
       ele.addEventListener('click', () => {
         const mode = ele.getAttribute('data-color-mode');
+        this.setMode(mode);
         this.active(mode);
       });
     });
@@ -32,24 +55,15 @@ class ModeToggle implements Component {
     });
   }
 
-  initMode() {
-    // load scheme from localStorage.
-    const mode = LocalStorage.getItem(this.key);
-    if (mode) {
-      this.active(mode);
-    } else if (params.color) {
-      this.active(params.color);
-    } else {
-      this.active('auto');
-    }
-  }
-
   isAuto(): boolean {
-    return this.mode === 'auto';
+    return this.mode === MODE_AUTO;
   }
 
+  // Active the relative HTML elements.
   active(mode: string) {
     this.mode = mode;
+    LocalStorage.setItem(this.key, mode);
+
     this.items.forEach((ele) => {
       const classList = ele.querySelector('.dropdown-item').classList;
       if (ele.getAttribute('data-color-mode') === mode) {
@@ -58,14 +72,12 @@ class ModeToggle implements Component {
         classList.remove('active');
       }
     });
-    LocalStorage.setItem(this.key, mode);
 
     const icon = document
       .querySelector('.mode-item[data-color-mode="' + mode + '"] .mode-icon')
       .cloneNode(true) as HTMLElement;
     icon.setAttribute('id', 'modeIcon');
     document.querySelector('#modeIcon').replaceWith(icon);
-    this.setMode(mode);
   }
 
   setMode(value: string) {
@@ -74,6 +86,8 @@ class ModeToggle implements Component {
     }
     console.debug(`Switch to ${value} mode`);
     document.documentElement.setAttribute('data-bs-theme', value);
+
+    // Emits a custom event.
     const event = new CustomEvent('hbs:mode', { detail: { mode: value } });
     document.dispatchEvent(event);
   }