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

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,14 @@
         applyState(state, { changedKeys: [], source: 'init' });
         cleanupFns.push(subscribeSettings(applyState, { immediate: false }));
 
+        var onThemeChanged = function() {
+            applyState(getSettings(), { changedKeys: ['theme'], source: 'subtitle-ui-theme' });
+        };
+        window.addEventListener('neko-theme-changed', onThemeChanged);
+        cleanupFns.push(function() {
+            window.removeEventListener('neko-theme-changed', onThemeChanged);
+        });
+
         if (window.i18next && typeof window.i18next.on === 'function') {
             var onLanguageChanged = function(nextLocale) {
                 updateSettings({ uiLocale: nextLocale }, {

tests/frontend/test_subtitle_incremental.py

@@ -27,6 +27,50 @@ 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(
+        """
+        () => {
+            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 },
+            }));
+            const lightBackground = display.style.background;
+            controller.destroy();
+            return { darkBackground, lightBackground };
+        }
+        """
+    )
+
+    assert "rgba(18, 29, 45, 0.8)" in result["darkBackground"]
+    assert "rgba(68, 183, 254, 0.8)" in result["lightBackground"]
+
+
 @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,6 +6,7 @@
 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"
@@ -39,6 +40,19 @@ 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_chat_surface_mode_preference_is_shared_with_electron():
     source = APP_REACT_CHAT_WINDOW_PATH.read_text(encoding="utf-8")