diff options
| -rw-r--r-- | source/js/script.js | 43 | ||||
| -rw-r--r-- | source/js/script.min.js | 2 | ||||
| -rw-r--r-- | source/js/script.ts | 60 |
3 files changed, 75 insertions, 30 deletions
diff --git a/source/js/script.js b/source/js/script.js index 665d379..70485f5 100644 --- a/source/js/script.js +++ b/source/js/script.js @@ -29,7 +29,7 @@ window.addEventListener("load", function () { element === null || element === void 0 ? void 0 : element.classList.remove("is-dark"); } }); - console.debug("".concat(clsname, " class changed to ").concat(enumModeToStringMode(mode))); + console.debug("".concat(clsname, " class changed to ").concat(enumModeToStringMode(mode) ? enumModeToStringMode(mode) : "light since mode == null")); }; darklistener.add(colorman); // Add logo color selector @@ -41,7 +41,7 @@ window.addEventListener("load", function () { return; var src = (mode === SystemDarkmodePreference.dark) ? darksrc : lightsrc; logo.setAttribute("src", src); - console.debug("logo src changed to ".concat(enumModeToStringMode(mode), "src")); + console.debug("logo src changed to ".concat(enumModeToStringMode(mode) ? enumModeToStringMode(mode) : "light since mode == null")); }; darklistener.add(logoman); // Add player theme handler @@ -77,11 +77,19 @@ var enumModeToStringMode = function (i) { var DarkmodeListener = /** @class */ (function () { function DarkmodeListener() { var darking = window.matchMedia('(prefers-color-scheme: dark)').matches; - this._mode = darking ? SystemDarkmodePreference.dark : SystemDarkmodePreference.light; + this._mode = darking ? SystemDarkmodePreference.dark : null; this._handlers = []; } DarkmodeListener.prototype.listen = function () { var _this = this; + var media = window.matchMedia('(prefers-color-scheme: dark)'); + var callback = function (event) { + var mode = event.matches ? SystemDarkmodePreference.dark : null; + applyCustomDarkModeSettings(mode); + setLS(darkModeStorageKey, enumModeToStringMode(mode)); + _this._mode = mode; + }; + media.addEventListener("change", callback); var rootElement = document.documentElement; var darkModeStorageKey = 'user-color-scheme'; var rootElementDarkModeAttributeName = 'data-user-color-scheme'; @@ -93,16 +101,26 @@ var DarkmodeListener = /** @class */ (function () { // Partially taken from https://blog.skk.moe/post/hello-darkmode-my-old-friend, CC BY-NC-SA 4.0 var applyCustomDarkModeSettings = function (mode) { // 接受从「开关」处传来的模式，或者从 localStorage 读取 - var LSSetting = getLS(darkModeStorageKey) == 'dark' ? SystemDarkmodePreference.dark : 'light' ? SystemDarkmodePreference.light : null; - var currentSetting = mode || LSSetting; + var LSSetting = getLS(darkModeStorageKey) == 'dark' ? SystemDarkmodePreference.dark : getLS(darkModeStorageKey) == 'light' ? SystemDarkmodePreference.light : null; + console.debug("Got LSSetting: ".concat(LSSetting, "; mode: ").concat(mode)); + // 如果传入 mode != null (浏览器设置了prefers-color-scheme: dark)且 LocalStorage为空，则使用传入模式 + var currentSetting; + if (mode != null && LSSetting == null) { + currentSetting = mode; + } + else { + // 否则，使用 localStorage 中的设置（可能为 null！） + currentSetting = LSSetting; + } console.debug("applyCustomDarkModeSettings: ".concat(currentSetting)); - if (currentSetting === _this._mode) { + var prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? SystemDarkmodePreference.dark : null; + if (currentSetting == prefersColorScheme && currentSetting != null) { // 当用户自定义的显示模式和 prefers-color-scheme 相同时重置、恢复到自动模式 resetRootDarkModeAttributeAndLS(); console.debug('Resetting to auto mode...'); } else if (currentSetting == SystemDarkmodePreference.dark || currentSetting == SystemDarkmodePreference.light) { - // 否则设置为用户自定义的显示模式 + // 否则设置为用户自定义的显示模式或传入的模式 rootElement.setAttribute(rootElementDarkModeAttributeName, enumModeToStringMode(currentSetting)); console.debug('Setting prop: "data-user-color-scheme" in HTML...'); } @@ -136,10 +154,13 @@ var DarkmodeListener = /** @class */ (function () { }); console.debug('Light theme applied.'); } + // 更新 this._mode + _this._mode = currentSetting; }; var toggleCustomDarkMode = function () { var currentSetting = getLS(darkModeStorageKey); if (currentSetting === null) { + // localStorage 啥都没有，从this._mode获取 var curMode = enumModeToStringMode(_this._mode); currentSetting = isValidKey(curMode, invertDarkModeObj) ? invertDarkModeObj[curMode] : currentSetting; } @@ -153,13 +174,15 @@ var DarkmodeListener = /** @class */ (function () { } // 将相反的模式写入 localStorage setLS(darkModeStorageKey, currentSetting); - return isValidKey(currentSetting, invertDarkModeObj) ? modeMap[currentSetting] : null; + // 更新 DarkmodeListener._mode + _this._mode = isValidKey(currentSetting, modeMap) ? modeMap[currentSetting] : _this._mode; }; - applyCustomDarkModeSettings(null); + applyCustomDarkModeSettings(this._mode); darkModeTogglebuttonElement === null || darkModeTogglebuttonElement === void 0 ? void 0 : darkModeTogglebuttonElement.addEventListener('click', function () { // 当用户点击「开关」时，获得新的显示模式、写入 localStorage、并在页面上生效 console.debug('User clicked button. Doing black magic now...'); - applyCustomDarkModeSettings(toggleCustomDarkMode()); + toggleCustomDarkMode(); + applyCustomDarkModeSettings(_this._mode); }); }; DarkmodeListener.prototype.add = function (callback) { diff --git a/source/js/script.min.js b/source/js/script.min.js index 823246f..f3828e4 100644 --- a/source/js/script.min.js +++ b/source/js/script.min.js @@ -1 +1 @@ -window.addEventListener("load",function(){var burgers=Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"),0);0<burgers.length&&burgers.forEach(function(element){element.addEventListener("click",function(){var idstr=element.getAttribute("data-target");element.classList.toggle("is-active"),!idstr||null!=(idstr=document.getElementById(idstr))&&idstr.classList.toggle("is-active")},!1)}),darklistener.add(function(mode){Array.prototype.slice.call(document.querySelectorAll(".auto-dark"),0).forEach(function(element){mode===SystemDarkmodePreference.dark?(null!=element&&element.classList.add("is-dark"),null!=element&&element.classList.remove("is-light")):(null!=element&&element.classList.add("is-light"),null!=element&&element.classList.remove("is-dark"))}),console.debug("".concat(".auto-dark"," class changed to ").concat(enumModeToStringMode(mode)))}),darklistener.add(function(mode){var logo=document.getElementById("logo"),darksrc=null==logo?void 0:logo.getAttribute("data-src-darkmode"),lightsrc=null==logo?void 0:logo.getAttribute("data-src-lightmode");logo&&darksrc&&lightsrc&&(darksrc=mode===SystemDarkmodePreference.dark?darksrc:lightsrc,logo.setAttribute("src",darksrc),console.debug("logo src changed to ".concat(enumModeToStringMode(mode),"src")))});darklistener.add(function(mode){var shikwasa=document.body.querySelector('div[data-name="shikwasa"]');null!=shikwasa&&shikwasa.setAttribute("data-theme",enumModeToStringMode(mode)?enumModeToStringMode(mode):"light"),console.debug("shikwasa theme: ".concat(null==shikwasa?void 0:shikwasa.getAttribute("data-theme")))}),darklistener.listen()}),function(SystemDarkmodePreference){SystemDarkmodePreference[SystemDarkmodePreference.dark=0]="dark",SystemDarkmodePreference[SystemDarkmodePreference.light=1]="light"}(SystemDarkmodePreference=SystemDarkmodePreference||{});var SystemDarkmodePreference,modeMap={dark:SystemDarkmodePreference.dark,light:SystemDarkmodePreference.light},invertDarkModeObj={dark:"light",light:"dark"},enumModeToStringMode=function(i){var result=Object.keys(modeMap).filter(function(key){return isValidKey(key,modeMap)&&modeMap[key]===i});return result?result[0]:void 0},DarkmodeListener=function(){function DarkmodeListener(){var darking=window.matchMedia("(prefers-color-scheme: dark)").matches;this._mode=darking?SystemDarkmodePreference.dark:SystemDarkmodePreference.light,this._handlers=[]}return DarkmodeListener.prototype.listen=function(){function applyCustomDarkModeSettings(mode){var LSSetting="dark"==getLS(darkModeStorageKey)?SystemDarkmodePreference.dark:SystemDarkmodePreference.light,mode=mode||LSSetting,LSSetting=(console.debug("applyCustomDarkModeSettings: ".concat(mode)),mode===_this._mode?(resetRootDarkModeAttributeAndLS(),console.debug("Resetting to auto mode...")):mode==SystemDarkmodePreference.dark||mode==SystemDarkmodePreference.light?(rootElement.setAttribute(rootElementDarkModeAttributeName,enumModeToStringMode(mode)),console.debug('Setting prop: "data-user-color-scheme" in HTML...')):(resetRootDarkModeAttributeAndLS(),console.debug("Initial setup, setting theme to light as default..."),mode=SystemDarkmodePreference.light),document.getElementById("bulma-light")),darkCSS=document.getElementById("bulma-dark");mode==SystemDarkmodePreference.dark?(rootElement.setAttribute(rootElementDarkModeAttributeName,"dark"),LSSetting.setAttribute("media","none"),darkCSS.setAttribute("media","all"),_this._handlers.forEach(function(handler){handler(SystemDarkmodePreference.dark),console.debug("Invoking dark theme handler...")}),console.debug("Dark theme applied.")):mode==SystemDarkmodePreference.light&&(rootElement.setAttribute(rootElementDarkModeAttributeName,"light"),LSSetting.setAttribute("media","all"),darkCSS.setAttribute("media","none"),_this._handlers.forEach(function(handler){handler(SystemDarkmodePreference.light),console.debug("Invoking light theme handler...")}),console.debug("Light theme applied."))}var _this=this,rootElement=document.documentElement,darkModeStorageKey="user-color-scheme",rootElementDarkModeAttributeName="data-user-color-scheme",darkModeTogglebuttonElement=document.getElementById("btn-toggle-dark"),resetRootDarkModeAttributeAndLS=function(){rootElement.removeAttribute(rootElementDarkModeAttributeName),removeLS(darkModeStorageKey)};applyCustomDarkModeSettings(null),null!=darkModeTogglebuttonElement&&darkModeTogglebuttonElement.addEventListener("click",function(){var curMode,currentSetting;console.debug("User clicked button. Doing black magic now..."),applyCustomDarkModeSettings((currentSetting=null===(currentSetting=getLS(darkModeStorageKey))?isValidKey(curMode=enumModeToStringMode(_this._mode),invertDarkModeObj)?invertDarkModeObj[curMode]:currentSetting:isValidKey(currentSetting,invertDarkModeObj)?invertDarkModeObj[currentSetting]:currentSetting,setLS(darkModeStorageKey,currentSetting),isValidKey(currentSetting,invertDarkModeObj)?modeMap[currentSetting]:null))})},DarkmodeListener.prototype.add=function(callback){callback(this._mode),this._handlers.push(callback)},DarkmodeListener.prototype.mode=function(){return this._mode},DarkmodeListener}(),darklistener=new DarkmodeListener;function setLS(k,v){try{localStorage.setItem(k,v)}catch(e){}}function removeLS(k){try{localStorage.removeItem(k)}catch(e){}}function getLS(k){try{return localStorage.getItem(k)}catch(e){return null}}function isValidKey(key,obj){return key in obj} +window.addEventListener("load",function(){var burgers=Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"),0);0<burgers.length&&burgers.forEach(function(element){element.addEventListener("click",function(){var idstr=element.getAttribute("data-target");element.classList.toggle("is-active"),!idstr||null!=(idstr=document.getElementById(idstr))&&idstr.classList.toggle("is-active")},!1)}),darklistener.add(function(mode){Array.prototype.slice.call(document.querySelectorAll(".auto-dark"),0).forEach(function(element){mode===SystemDarkmodePreference.dark?(null!=element&&element.classList.add("is-dark"),null!=element&&element.classList.remove("is-light")):(null!=element&&element.classList.add("is-light"),null!=element&&element.classList.remove("is-dark"))}),console.debug("".concat(".auto-dark"," class changed to ").concat(enumModeToStringMode(mode)?enumModeToStringMode(mode):"light since mode == null"))}),darklistener.add(function(mode){var logo=document.getElementById("logo"),darksrc=null==logo?void 0:logo.getAttribute("data-src-darkmode"),lightsrc=null==logo?void 0:logo.getAttribute("data-src-lightmode");logo&&darksrc&&lightsrc&&(darksrc=mode===SystemDarkmodePreference.dark?darksrc:lightsrc,logo.setAttribute("src",darksrc),console.debug("logo src changed to ".concat(enumModeToStringMode(mode)?enumModeToStringMode(mode):"light since mode == null")))});darklistener.add(function(mode){var shikwasa=document.body.querySelector('div[data-name="shikwasa"]');null!=shikwasa&&shikwasa.setAttribute("data-theme",enumModeToStringMode(mode)?enumModeToStringMode(mode):"light"),console.debug("shikwasa theme: ".concat(null==shikwasa?void 0:shikwasa.getAttribute("data-theme")))}),darklistener.listen()}),function(SystemDarkmodePreference){SystemDarkmodePreference[SystemDarkmodePreference.dark=0]="dark",SystemDarkmodePreference[SystemDarkmodePreference.light=1]="light"}(SystemDarkmodePreference=SystemDarkmodePreference||{});var SystemDarkmodePreference,modeMap={dark:SystemDarkmodePreference.dark,light:SystemDarkmodePreference.light},invertDarkModeObj={dark:"light",light:"dark"},enumModeToStringMode=function(i){var result=Object.keys(modeMap).filter(function(key){return isValidKey(key,modeMap)&&modeMap[key]===i});return result?result[0]:void 0},DarkmodeListener=function(){function DarkmodeListener(){var darking=window.matchMedia("(prefers-color-scheme: dark)").matches;this._mode=darking?SystemDarkmodePreference.dark:null,this._handlers=[]}return DarkmodeListener.prototype.listen=function(){var _this=this,rootElement=(window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",function(event){event=event.matches?SystemDarkmodePreference.dark:null;applyCustomDarkModeSettings(event),setLS(darkModeStorageKey,enumModeToStringMode(event)),_this._mode=event}),document.documentElement),darkModeStorageKey="user-color-scheme",rootElementDarkModeAttributeName="data-user-color-scheme",darkModeTogglebuttonElement=document.getElementById("btn-toggle-dark"),resetRootDarkModeAttributeAndLS=function(){rootElement.removeAttribute(rootElementDarkModeAttributeName),removeLS(darkModeStorageKey)},applyCustomDarkModeSettings=function(mode){var LSSetting="dark"==getLS(darkModeStorageKey)?SystemDarkmodePreference.dark:"light"==getLS(darkModeStorageKey)?SystemDarkmodePreference.light:null,LSSetting=(console.debug("Got LSSetting: ".concat(LSSetting,"; mode: ").concat(mode)),mode=null!=mode&&null==LSSetting?mode:LSSetting,console.debug("applyCustomDarkModeSettings: ".concat(mode)),window.matchMedia("(prefers-color-scheme: dark)").matches?SystemDarkmodePreference.dark:null),LSSetting=(mode==LSSetting&&null!=mode?(resetRootDarkModeAttributeAndLS(),console.debug("Resetting to auto mode...")):mode==SystemDarkmodePreference.dark||mode==SystemDarkmodePreference.light?(rootElement.setAttribute(rootElementDarkModeAttributeName,enumModeToStringMode(mode)),console.debug('Setting prop: "data-user-color-scheme" in HTML...')):(resetRootDarkModeAttributeAndLS(),console.debug("Initial setup, setting theme to light as default..."),mode=SystemDarkmodePreference.light),document.getElementById("bulma-light")),darkCSS=document.getElementById("bulma-dark");mode==SystemDarkmodePreference.dark?(rootElement.setAttribute(rootElementDarkModeAttributeName,"dark"),LSSetting.setAttribute("media","none"),darkCSS.setAttribute("media","all"),_this._handlers.forEach(function(handler){handler(SystemDarkmodePreference.dark),console.debug("Invoking dark theme handler...")}),console.debug("Dark theme applied.")):mode==SystemDarkmodePreference.light&&(rootElement.setAttribute(rootElementDarkModeAttributeName,"light"),LSSetting.setAttribute("media","all"),darkCSS.setAttribute("media","none"),_this._handlers.forEach(function(handler){handler(SystemDarkmodePreference.light),console.debug("Invoking light theme handler...")}),console.debug("Light theme applied.")),_this._mode=mode};applyCustomDarkModeSettings(this._mode),null!=darkModeTogglebuttonElement&&darkModeTogglebuttonElement.addEventListener("click",function(){var curMode,currentSetting;console.debug("User clicked button. Doing black magic now..."),currentSetting=null===(currentSetting=getLS(darkModeStorageKey))?isValidKey(curMode=enumModeToStringMode(_this._mode),invertDarkModeObj)?invertDarkModeObj[curMode]:currentSetting:isValidKey(currentSetting,invertDarkModeObj)?invertDarkModeObj[currentSetting]:currentSetting,setLS(darkModeStorageKey,currentSetting),_this._mode=isValidKey(currentSetting,modeMap)?modeMap[currentSetting]:_this._mode,applyCustomDarkModeSettings(_this._mode)})},DarkmodeListener.prototype.add=function(callback){callback(this._mode),this._handlers.push(callback)},DarkmodeListener.prototype.mode=function(){return this._mode},DarkmodeListener}(),darklistener=new DarkmodeListener;function setLS(k,v){try{localStorage.setItem(k,v)}catch(e){}}function removeLS(k){try{localStorage.removeItem(k)}catch(e){}}function getLS(k){try{return localStorage.getItem(k)}catch(e){return null}}function isValidKey(key,obj){return key in obj} diff --git a/source/js/script.ts b/source/js/script.ts index bfc1d64..f184f2c 100644 --- a/source/js/script.ts +++ b/source/js/script.ts @@ -17,7 +17,7 @@ window.addEventListener("load", () => { } // Add header hover page class changer - const colorman = (mode: SystemDarkmodePreference) => { + const colorman = (mode: SystemDarkmodePreference | null) => { let clsname: string = ".auto-dark"; const elements: Element[] = Array.prototype.slice.call( document.querySelectorAll(clsname), 0); @@ -31,12 +31,12 @@ window.addEventListener("load", () => { element?.classList.remove("is-dark"); } }) - console.debug(`${clsname} class changed to ${enumModeToStringMode(mode)}`); + console.debug(`${clsname} class changed to ${enumModeToStringMode(mode) ? enumModeToStringMode(mode) : "light since mode == null"}`); } darklistener.add(colorman); // Add logo color selector - const logoman = (mode: SystemDarkmodePreference) => { + const logoman = (mode: SystemDarkmodePreference | null) => { const logo = document.getElementById("logo"); const darksrc = logo?.getAttribute("data-src-darkmode"); const lightsrc = logo?.getAttribute("data-src-lightmode"); @@ -44,12 +44,12 @@ window.addEventListener("load", () => { return; let src = (mode === SystemDarkmodePreference.dark) ? darksrc : lightsrc; logo.setAttribute("src", src); - console.debug(`logo src changed to ${enumModeToStringMode(mode)}src`); + console.debug(`logo src changed to ${enumModeToStringMode(mode) ? enumModeToStringMode(mode) : "light since mode == null"}`); } darklistener.add(logoman); // Add player theme handler - const playerman = (mode: SystemDarkmodePreference) => { + const playerman = (mode: SystemDarkmodePreference | null) => { const shikwasa = document.body.querySelector('div[data-name="shikwasa"]'); shikwasa?.setAttribute("data-theme", enumModeToStringMode(mode) ? enumModeToStringMode(mode)! : "light"); console.debug(`shikwasa theme: ${shikwasa?.getAttribute("data-theme")}`); @@ -76,23 +76,32 @@ const invertDarkModeObj: Object = { 'light': 'dark' }; -const enumModeToStringMode = (i: SystemDarkmodePreference) => { +const enumModeToStringMode = (i: SystemDarkmodePreference | null) => { let keysArray = Object.keys(modeMap); let result = keysArray.filter(key => isValidKey(key, modeMap) && modeMap[key] === i); return result ? result[0] : undefined; }; class DarkmodeListener { - private _mode: SystemDarkmodePreference; + private _mode: SystemDarkmodePreference | null; private _handlers: ((mode: SystemDarkmodePreference) => void)[]; public constructor() { let darking = window.matchMedia('(prefers-color-scheme: dark)').matches; - this._mode = darking ? SystemDarkmodePreference.dark : SystemDarkmodePreference.light; + this._mode = darking ? SystemDarkmodePreference.dark : null; this._handlers = []; } public listen(): void { + let media = window.matchMedia('(prefers-color-scheme: dark)'); + let callback = (event: MediaQueryListEvent) => { + let mode = event.matches ? SystemDarkmodePreference.dark : null; + applyCustomDarkModeSettings(mode); + setLS(darkModeStorageKey, enumModeToStringMode(mode!)); + this._mode = mode; + }; + media.addEventListener("change", callback); + const rootElement = document.documentElement; const darkModeStorageKey = 'user-color-scheme'; const rootElementDarkModeAttributeName = 'data-user-color-scheme'; @@ -104,17 +113,26 @@ class DarkmodeListener { } // Partially taken from https://blog.skk.moe/post/hello-darkmode-my-old-friend, CC BY-NC-SA 4.0 - const applyCustomDarkModeSettings = (mode: any) => { + const applyCustomDarkModeSettings = (mode: SystemDarkmodePreference | null) => { // 接受从「开关」处传来的模式，或者从 localStorage 读取 - let LSSetting = getLS(darkModeStorageKey) == 'dark' ? SystemDarkmodePreference.dark : 'light' ? SystemDarkmodePreference.light : null; - let currentSetting: SystemDarkmodePreference = mode || LSSetting; + let LSSetting = getLS(darkModeStorageKey) == 'dark' ? SystemDarkmodePreference.dark : getLS(darkModeStorageKey) == 'light' ? SystemDarkmodePreference.light : null; + console.debug(`Got LSSetting: ${LSSetting}; mode: ${mode}`); + // 如果传入 mode != null (浏览器设置了prefers-color-scheme: dark)且 LocalStorage为空，则使用传入模式 + let currentSetting: SystemDarkmodePreference | null; + if (mode != null && LSSetting == null) { + currentSetting = mode; + } else { + // 否则，使用 localStorage 中的设置（可能为 null！） + currentSetting = LSSetting; + } console.debug(`applyCustomDarkModeSettings: ${currentSetting}`); - if (currentSetting === this._mode) { + let prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? SystemDarkmodePreference.dark : null; + if (currentSetting == prefersColorScheme && currentSetting != null) { // 当用户自定义的显示模式和 prefers-color-scheme 相同时重置、恢复到自动模式 resetRootDarkModeAttributeAndLS(); console.debug('Resetting to auto mode...'); } else if (currentSetting == SystemDarkmodePreference.dark || currentSetting == SystemDarkmodePreference.light) { - // 否则设置为用户自定义的显示模式 + // 否则设置为用户自定义的显示模式或传入的模式 rootElement.setAttribute(rootElementDarkModeAttributeName, enumModeToStringMode(currentSetting)!); console.debug('Setting prop: "data-user-color-scheme" in HTML...'); } else { @@ -146,12 +164,14 @@ class DarkmodeListener { }); console.debug('Light theme applied.'); } - + // 更新 this._mode + this._mode = currentSetting; } const toggleCustomDarkMode = () => { let currentSetting = getLS(darkModeStorageKey); if (currentSetting === null) { + // localStorage 啥都没有，从this._mode获取 let curMode = enumModeToStringMode(this._mode)!; currentSetting = isValidKey(curMode, invertDarkModeObj) ? invertDarkModeObj[curMode] : currentSetting; } else if (currentSetting == 'dark' || 'light') { @@ -163,24 +183,26 @@ class DarkmodeListener { } // 将相反的模式写入 localStorage setLS(darkModeStorageKey, currentSetting); - return isValidKey(currentSetting!, invertDarkModeObj) ? modeMap[currentSetting!] : null; + // 更新 DarkmodeListener._mode + this._mode = isValidKey(currentSetting!, modeMap) ? modeMap[currentSetting!] : this._mode; } - applyCustomDarkModeSettings(null); + applyCustomDarkModeSettings(this._mode); darkModeTogglebuttonElement?.addEventListener('click', () => { // 当用户点击「开关」时，获得新的显示模式、写入 localStorage、并在页面上生效 console.debug('User clicked button. Doing black magic now...'); - applyCustomDarkModeSettings(toggleCustomDarkMode()); + toggleCustomDarkMode(); + applyCustomDarkModeSettings(this._mode); }); } - public add(callback: (mode: SystemDarkmodePreference) => void): void { + public add(callback: (mode: SystemDarkmodePreference | null) => void): void { callback(this._mode); this._handlers.push(callback); } - public mode(): SystemDarkmodePreference { + public mode(): SystemDarkmodePreference | null { return this._mode; } }; |