1 files changed, 33 insertions, 10 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) {