dsh-palenight-theme: DSH Harness Web UI 主題

前言¶

DSH 的 Web UI 提供了基礎的主題服務。如果希望在深色或淺色環境下工作，手動調整 CSS 變量既繁瑣又容易遺漏細節。dsh-palenight-theme 插件封裝了這一過程，提供了一套完整的主題覆蓋方案。

插件簡介¶

這是一個爲 dsh Harness Web UI 設計的主題插件，由 youyli03 維護。它以兩種形式交付：持久化 Bundle（推薦）和動態 Cordis 插件。

核心功能¶

雙模式支持：提供深色模式（基於 Community Material Theme Palenight）和淺色模式（暖中性）。
- 深色模式：靛藍表面 (#292D3E)，淡紫羅蘭色文字 (#A6ACCD)，青色強調色 (#80CBC4)。
- 淺色模式：羊皮紙背景 (#F5F4F0)，暖灰色文字 (#4F4B45)，青色強調色 (#00897B)。
變量覆蓋：覆蓋約 100 個主題變量，包括表面、標籤/頁眉、輸入框、菜單、文本層級、邊框、按鈕、交互狀態、代碼塊和滾動條。
演示組件：包含運行卡片面板和作曲家狀態行的演示 UI 組件。
熱更新：支持通過 dsh-client-hmr 進行熱更新，無需重啓宿主進程。
兩種形式：
- 持久化 Bundle：推薦形式，隨宿主重啓而保留。
- 動態 Cordis 插件：僅對當前會話有效，已標記爲廢棄。

安裝與啓用¶

官方推薦的安裝方式是使用 DSH 的包管理命令。

dsh plugin --profile web add dsh-palenight-theme

安裝後，重啓 dsh 以激活持久化 bundle。重啓後，主題將自動加載，並在宿主重啓時保持激活狀態。

使用方法¶

安裝並重啓後，可以通過代碼調用 theme.overrideTokens 來應用主題層。例如：

theme.overrideTokens('deepseek-palenight-theme', {
  '--dsw-alias-bg-base': { light: '#F5F4F0', dark: '#292D3E' },
  '--dsw-alias-brand-primary': { light: '#00897B', dark: '#80CBC4' },
  // ... 約 100 個 token
})

工作原理與注意事項¶

激活機制：客戶端 bundle 聲明瞭 inject: ['theme']，這要求 theme 服務必須可用。如果服務未就緒，ctx.get('theme') 將返回 undefined，導致樣式不生效。
持久化 vs 動態：持久化 bundle 將主題作爲宿主配置的一部分，重啓後依然存在；動態 Cordis 插件僅在會話期間激活，重啓即失效。
技術棧：插件代碼爲純 JavaScript（無 TS/JSX/import）。

獲取與反饋¶

該插件託管在 GitHub，同時也收錄在 SkillHub 社區目錄中。