From 582b8b355dc87bdbaa729442882461f2975f8d27 Mon Sep 17 00:00:00 2001 From: Doge Date: Sun, 9 May 2021 15:28:52 +0800 Subject: Fix darkmode bug --- source/js/script.js | 25 +++++++++++++++---------- source/js/script.ts | 24 +++++++++++++++--------- 2 files changed, 30 insertions(+), 19 deletions(-) (limited to 'source') 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); } -- cgit v1.2.3