Fix darkmode bug

2 files changed, 30 insertions, 19 deletions

diff --git a/source/js/script.js b/source/js/script.js
index c12b9aa..21eda5d 100644
--- a/source/js/script.js
+++ b/source/js/script.js
@@ -17,17 +17,21 @@ window.addEventListener("load", function () {
     }
     // Add header hover page class changer
     var colorman = function (mode) {
-        var page = document.getElementById("header-page");
-        if (mode === SystemDarkmodePrefrence.dark) {
-            page === null || page === void 0 ? void 0 : page.classList.add("is-dark");
-            page === null || page === void 0 ? void 0 : page.classList.remove("is-light");
-        }
-        else {
-            page === null || page === void 0 ? void 0 : page.classList.add("is-light");
-            page === null || page === void 0 ? void 0 : page.classList.remove("is-dark");
-        }
+        var clsname = ".is-light";
+        if (darklistener.mode() === SystemDarkmodePrefrence.dark)
+            clsname = ".is-dark";
+        var elements = Array.prototype.slice.call(document.querySelectorAll(clsname), 0);
+        elements.forEach(function (element) {
+            if (mode === SystemDarkmodePrefrence.dark) {
+                element === null || element === void 0 ? void 0 : element.classList.add("is-dark");
+                element === null || element === void 0 ? void 0 : element.classList.remove("is-light");
+            }
+            else {
+                element === null || element === void 0 ? void 0 : element.classList.add("is-light");
+                element === null || element === void 0 ? void 0 : element.classList.remove("is-dark");
+            }
+        });
     };
-    colorman(darklistener.mode());
     darklistener.add(colorman);
 });
 /* Darkmode listener */
@@ -57,6 +61,7 @@ var DarkmodeListener = /** @class */ (function () {
         media.addEventListener("change", callback);
     };
     DarkmodeListener.prototype.add = function (callback) {
+        callback(this._mode);
         this._handlers.push(callback);
     };
     DarkmodeListener.prototype.mode = function () {
diff --git a/source/js/script.ts b/source/js/script.ts
index 6d7b6b5..7bfdda5 100644
--- a/source/js/script.ts
+++ b/source/js/script.ts
@@ -18,16 +18,21 @@ window.addEventListener("load", () => {
 
     // Add header hover page class changer
     const colorman = (mode: SystemDarkmodePrefrence) => {
-        const page = document.getElementById("header-page");
-        if (mode === SystemDarkmodePrefrence.dark) {
-            page?.classList.add("is-dark");
-            page?.classList.remove("is-light");
-        } else {
-            page?.classList.add("is-light");
-            page?.classList.remove("is-dark");
-        }
+        let clsname: string = ".is-light";
+        if (darklistener.mode() === SystemDarkmodePrefrence.dark)
+            clsname = ".is-dark";
+        const elements: Element[] = Array.prototype.slice.call(
+            document.querySelectorAll(clsname), 0);
+        elements.forEach((element) => {
+            if (mode === SystemDarkmodePrefrence.dark) {
+                element?.classList.add("is-dark");
+                element?.classList.remove("is-light");
+            } else {
+                element?.classList.add("is-light");
+                element?.classList.remove("is-dark");
+            }
+        })
     }
-    colorman(darklistener.mode());
     darklistener.add(colorman);
 });
 
@@ -61,6 +66,7 @@ class DarkmodeListener {
     }
 
     public add(callback: (mode: SystemDarkmodePrefrence) => void): void {
+        callback(this._mode);
         this._handlers.push(callback);
     }