diff options
| -rw-r--r-- | layout/_partial/scripts.ejs | 1 | ||||
| -rw-r--r-- | source/js/script.js | 25 | ||||
| -rw-r--r-- | source/js/script.ts | 24 |
3 files changed, 30 insertions, 20 deletions
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index 2e9be0f..ab83cf5 100644 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -29,7 +29,6 @@ document.getElementById("highlight-light-theme").removeAttribute("disabled"); } }; - theme_selector(darklistener.mode()); darklistener.add(theme_selector); hljs.initHighlightingOnLoad(); }, false); 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); } |