新增 MutationObserver 监听 data-theme，并用去重逻辑避免和自定义事件重复刷新

Author: MingTianSang

static/subtitle-shared.js

@@ -880,13 +880,37 @@
         applyState(state, { changedKeys: [], source: 'init' });
         cleanupFns.push(subscribeSettings(applyState, { immediate: false }));
 
+        var observedThemeDark = isDarkThemeActive();
+        var applyThemeStateIfChanged = function(source) {
+            var nextThemeDark = isDarkThemeActive();
+            if (nextThemeDark === observedThemeDark) return;
+            observedThemeDark = nextThemeDark;
+            applyState(getSettings(), { changedKeys: ['theme'], source: source });
+        };
         var onThemeChanged = function() {
-            applyState(getSettings(), { changedKeys: ['theme'], source: 'subtitle-ui-theme' });
+            applyThemeStateIfChanged('subtitle-ui-theme-event');
         };
         window.addEventListener('neko-theme-changed', onThemeChanged);
         cleanupFns.push(function() {
             window.removeEventListener('neko-theme-changed', onThemeChanged);
         });
+        if (window.MutationObserver && document.documentElement) {
+            var themeObserver = new MutationObserver(function(mutations) {
+                for (var i = 0; i < mutations.length; i += 1) {
+                    if (mutations[i].attributeName === 'data-theme') {
+                        applyThemeStateIfChanged('subtitle-ui-theme-attribute');
+                        break;
+                    }
+                }
+            });
+            themeObserver.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['data-theme']
+            });
+            cleanupFns.push(function() {
+                themeObserver.disconnect();
+            });
+        }
 
         if (window.i18next && typeof window.i18next.on === 'function') {
             var onLanguageChanged = function(nextLocale) {

tests/frontend/test_subtitle_incremental.py

@@ -52,23 +52,25 @@ def test_subtitle_background_opacity_tracks_dark_theme(
 
     result = mock_page.evaluate(
         """
-        () => {
+        async () => {
             const controller = window.nekoSubtitleShared.initSubtitleUI({ host: 'web' });
             const display = document.getElementById('subtitle-display');
             const darkBackground = display.style.background;
             document.documentElement.removeAttribute('data-theme');
-            window.dispatchEvent(new CustomEvent('neko-theme-changed', {
-                detail: { darkMode: false },
-            }));
+            await new Promise((resolve) => setTimeout(resolve, 0));
             const lightBackground = display.style.background;
+            document.documentElement.setAttribute('data-theme', 'dark');
+            await new Promise((resolve) => setTimeout(resolve, 0));
+            const darkBackgroundAfterAttributeChange = display.style.background;
             controller.destroy();
-            return { darkBackground, lightBackground };
+            return { darkBackground, lightBackground, darkBackgroundAfterAttributeChange };
         }
         """
     )
 
     assert "rgba(18, 29, 45, 0.8)" in result["darkBackground"]
     assert "rgba(68, 183, 254, 0.8)" in result["lightBackground"]
+    assert "rgba(18, 29, 45, 0.8)" in result["darkBackgroundAfterAttributeChange"]
 
 
 @pytest.mark.frontend