修复字幕翻译窗口暗色模式样式，保持窗口外层透明，同时让字幕条运行时背景正确使用暗色渐变 (#1657)

* 修复字幕翻译窗口暗色模式样式，保持窗口外层透明，同时让字幕条运行时背景正确使用暗色渐变

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

* 在独立字幕页 templates/subtitle.html (line 7) 加载了 /static/theme-manager.js，放在字幕脚本之前。这样 /subtitle 打开时如果 localStorage.neko-dark-mode=true，会先初始化 data-theme="dark"，字幕背景内联渐变和透明暗色覆盖都能立刻生效

Author: MingTianSang

static/css/dark-mode.css

@@ -302,9 +302,9 @@ html #chat-container {
 
 /* ===== 暗色模式：字幕显示区域 ===== */
 [data-theme="dark"] #subtitle-display {
-  background: linear-gradient(135deg, rgba(42, 123, 196, 0.92) 0%, rgba(42, 123, 196, 0.88) 50%, rgba(60, 145, 220, 0.92) 100%);
+  background: linear-gradient(135deg, rgba(18, 29, 45, 0.95) 0%, rgba(22, 45, 68, 0.91) 52%, rgba(30, 74, 108, 0.95) 100%);
   border-color: rgba(255, 255, 255, 0.25);
-  box-shadow: 0 8px 32px rgba(42, 123, 196, 0.5),
+  box-shadow: 0 8px 32px rgba(6, 12, 24, 0.5),
     0 0 0 1px rgba(255, 255, 255, 0.2) inset;
 }
 
@@ -670,6 +670,13 @@ html #chat-container {
   }
 }
 
+/* 独立字幕窗口是透明 BrowserWindow；暗色移动端黑底规则会因 600px 窗口宽度命中。
+   这里在黑底规则之后重新钉住 html/body 透明，避免字幕翻译窗口露出整块黑底。 */
+html[data-theme="dark"].subtitle-window-host,
+html[data-theme="dark"].subtitle-window-host body.subtitle-window-host {
+  background: transparent !important;
+}
+
 /* ===========================================================
    子页面通用暗色模式覆盖
    适用于 character_card_manager, api_key_settings, memory_browser,

static/subtitle-shared.js

@@ -431,9 +431,20 @@
         };
     }
 
+    function isDarkThemeActive() {
+        return !!(
+            document.documentElement &&
+            document.documentElement.getAttribute('data-theme') === 'dark'
+        );
+    }
+
     function applyBackgroundOpacity(display, opacity) {
         if (!display) return;
         var alpha = clampOpacity(opacity) / 100;
+        if (isDarkThemeActive()) {
+            display.style.background = 'linear-gradient(135deg, rgba(18,29,45,' + alpha + ') 0%, rgba(22,45,68,' + Math.max(0, alpha - 0.04) + ') 52%, rgba(30,74,108,' + alpha + ') 100%)';
+            return;
+        }
         display.style.background = 'linear-gradient(135deg, rgba(68,183,254,' + alpha + ') 0%, rgba(68,183,254,' + Math.max(0, alpha - 0.05) + ') 50%, rgba(100,200,255,' + alpha + ') 100%)';
     }
 
@@ -869,6 +880,38 @@
         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() {
+            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) {
                 updateSettings({ uiLocale: nextLocale }, {

templates/subtitle.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>N.E.K.O. Subtitle</title>
+    <script src="/static/theme-manager.js"></script>
     <link rel="stylesheet" href="/static/css/subtitle.css">
     <link rel="stylesheet" href="/static/css/dark-mode.css">
 </head>

tests/frontend/test_subtitle_incremental.py

@@ -27,6 +27,93 @@ def _open_subtitle_harness(
     mock_page.goto(f"http://neko.test{path}")
 
 
+@pytest.mark.frontend
+def test_subtitle_background_opacity_tracks_dark_theme(
+    mock_page: Page,
+):
+    _open_subtitle_harness(
+        mock_page,
+        "subtitle-window-host",
+        """
+        <div id="subtitle-display">
+            <div id="subtitle-scroll"><span id="subtitle-text"></span></div>
+        </div>
+        """,
+    )
+    mock_page.evaluate(
+        """
+        () => {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            window.localStorage.setItem('subtitleOpacity', '80');
+        }
+        """
+    )
+    mock_page.add_script_tag(path=str(PROJECT_ROOT / "static/subtitle-shared.js"))
+
+    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');
+            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, 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
+def test_standalone_subtitle_background_uses_stored_dark_theme_on_open(
+    mock_page: Page,
+):
+    _open_subtitle_harness(
+        mock_page,
+        "subtitle-window-host",
+        """
+        <div id="subtitle-display">
+            <div id="subtitle-scroll"><span id="subtitle-text"></span></div>
+        </div>
+        """,
+    )
+    mock_page.evaluate(
+        """
+        () => {
+            window.localStorage.setItem('neko-dark-mode', 'true');
+            window.localStorage.setItem('subtitleOpacity', '80');
+        }
+        """
+    )
+    mock_page.add_script_tag(path=str(PROJECT_ROOT / "static/theme-manager.js"))
+    mock_page.add_script_tag(path=str(PROJECT_ROOT / "static/subtitle-shared.js"))
+
+    result = mock_page.evaluate(
+        """
+        () => {
+            const controller = window.nekoSubtitleShared.initSubtitleUI({ host: 'window' });
+            const display = document.getElementById('subtitle-display');
+            const background = display.style.background;
+            const theme = document.documentElement.getAttribute('data-theme');
+            controller.destroy();
+            return { background, theme };
+        }
+        """
+    )
+
+    assert result["theme"] == "dark"
+    assert "rgba(18, 29, 45, 0.8)" in result["background"]
+
+
 @pytest.mark.frontend
 def test_subtitle_incremental_translation_starts_when_sentence_punctuation_arrives(
     mock_page: Page,

tests/unit/test_react_chat_window_static.py

@@ -6,9 +6,11 @@
 APP_CHAT_EXPORT_PATH = Path(__file__).resolve().parents[2] / "static" / "app-chat-export.js"
 MUSIC_UI_PATH = Path(__file__).resolve().parents[2] / "static" / "music_ui.js"
 STATIC_INDEX_CSS_PATH = Path(__file__).resolve().parents[2] / "static" / "css" / "index.css"
+STATIC_DARK_MODE_CSS_PATH = Path(__file__).resolve().parents[2] / "static" / "css" / "dark-mode.css"
 REACT_CHAT_STYLES_PATH = Path(__file__).resolve().parents[2] / "frontend" / "react-neko-chat" / "src" / "styles.css"
 REACT_CHAT_APP_PATH = Path(__file__).resolve().parents[2] / "frontend" / "react-neko-chat" / "src" / "App.tsx"
 CHAT_TEMPLATE_PATH = Path(__file__).resolve().parents[2] / "templates" / "chat.html"
+SUBTITLE_TEMPLATE_PATH = Path(__file__).resolve().parents[2] / "templates" / "subtitle.html"
 COMPACT_EXPORT_HISTORY_PANEL_PATH = (
     Path(__file__).resolve().parents[2] / "frontend" / "react-neko-chat" / "src" / "CompactExportHistoryPanel.tsx"
 )
@@ -39,6 +41,26 @@ def assert_no_layout_transition(block: str) -> None:
         assert prop not in transition_section
 
 
+def test_subtitle_window_dark_mode_keeps_transparent_background():
+    source = STATIC_DARK_MODE_CSS_PATH.read_text(encoding="utf-8")
+    selector = (
+        'html[data-theme="dark"].subtitle-window-host,\n'
+        'html[data-theme="dark"].subtitle-window-host body.subtitle-window-host {'
+    )
+    assert selector in source
+    block = source.split(selector, 1)[1].split("}", 1)[0]
+
+    assert "background: transparent !important;" in block
+    assert source.index(selector) > source.index("background: #000 !important;")
+
+
+def test_standalone_subtitle_page_initializes_theme_before_subtitle_scripts():
+    source = SUBTITLE_TEMPLATE_PATH.read_text(encoding="utf-8")
+
+    assert '<script src="/static/theme-manager.js"></script>' in source
+    assert source.index('/static/theme-manager.js') < source.index('/static/subtitle-shared.js')
+
+
 def test_chat_surface_mode_preference_is_shared_with_electron():
     source = APP_REACT_CHAT_WINDOW_PATH.read_text(encoding="utf-8")