前言¶

給 Web 界面換主題，常見做法是直接改構建產物，或者對着一個個組件類名寫覆蓋樣式。前者升級就被沖掉，後者換個版本類名就失效。DSH 的理念是「一切皆插件」，主題這件事同樣可以交給插件來做。

下面介紹的 dsh-krill-theme 就是一個純客戶端 CSS 主題插件：一個插件同時覆蓋 DSH Web 的深色和亮色兩套外觀，深色對應深海世界，亮色對應淺海世界，另帶一層浮游生物動畫背景。不改 dist、不碰組件邏輯。

這是什麼¶

dsh-krill-theme 由 i1j 維護，MIT 許可證，當前版本 v1.0.0（2026-08-15）。定位是「浮游主題」：深色模式是深海世界，以光的亮度編碼信息重要程度，越重要越亮；亮色模式是淺海世界，以清澈度編碼，越重要越清。除配色外，還包含對話欄的浮游生物動畫背景、生成期間的深潛（Deep diving…）工作態增強，以及一個水母形狀的參數入口。

核心功能¶

雙模式一體¶

深、亮兩段樣式寫在同一個樣式表裏，選擇器互斥，跟隨系統外觀自動切換，不需要手動切主題。

token 級零侵入覆蓋¶

DSH Web 的組件統一讀取 token。插件只在 body 上重定義約 95+ 個 token 聲明（--dsw-alias-* / --dsw-specific-* / --shiki-*），一處生效全站：側欄、對話欄、dock、浮層、菜單、設置全部跟隨。因爲不改 dist、不依賴具體組件類名，升級換代時只需要複查 token 鍵名和 3 個組件哈希類名（wSkVaW_root / Sxvs8a_body / hHd-Xa_root，來自 @deepseek-ai/dsh-client-ui-conversation dist）。

浮游生物動畫背景¶

對話欄背景是一層 canvas 繪製的浮游生物動畫：預渲染髮光 sprite，無任何依賴。粒子由洋流驅動——全體同向漂移，流向和流速週期性變化，個體只有微小的遊動擾動，安靜、不干擾閱讀。系統開啓 prefers-reduced-motion 時自動退化爲靜態幀。

深潛工作態增強¶

生成期間全體粒子以約 40× 流速近乎豎直上衝，疊加約 3.1s 呼吸節奏的週期性湧浪；額外湧出更小更亮的光點；整體亮度 ×1.15；對話欄再疊一層下深上白的豎向漸變輝光脈動。開銷方面，預渲染漸變僅在 resize 時重建，每幀只多 1 次 drawImage。

水母參數入口¶

對話欄右上角有一隻水母按鈕，點擊彈出參數面板：粒子數、透明度、流速、流向、擺動、潮汐脈動、深潛倍率等全部可調，即時生效，無需重啓。

全站一致的細節¶

側欄文字降噪；狀態色按深海色板統一（成功熒光綠 / 警告深海琥珀 / 錯誤珊瑚紅）；發送按鈕深海脈動；代碼高亮雙模式適配（深色 shiki 熒光系、亮色白底可讀系）；markdown 配色段雙模式生效。

安裝與啓用¶

先做社區安裝。在 profile 目錄（如 ~/.dsh/profiles/web）執行：

dsh plugin --profile web add git+https://github.com/i1j/dsh-krill-theme.git

國內可以用 Gitee 鏡像，速度更快：

dsh plugin --profile web add git+https://gitee.com/elite1j/dsh-krill-theme.git

然後把 dsh-krill-theme 加入 profile 的 dsh.profile.bundles。經過上面的步驟，重啓 dsh web 主題即生效。

不走 git 安裝的話，也可以在 <profile>/package.json 的 dependencies 裏手動聲明：

{
  "dependencies": {
    "dsh-krill-theme": "link:/path/to/dsh-krill-theme"
  }
}

同時在 dsh.profile.bundles 數組加入 "dsh-krill-theme"，然後在 profile 目錄執行 pnpm install，重啓 dsh web。

倉庫已打上 GitHub dsh-plugin 主題標籤，可以通過社區插件搜索（find_dsh_plugin / dsh-recommend 榜單）找到。

需要自行構建的話，先裝依賴、跑類型檢查，再打包：

pnpm install
pnpm typecheck
pnpm bundle                    # tsdown → lib/index.js + lib/client.js
npx tsc -p tsconfig.build.json # 生成類型

使用與調參¶

浮游生物動畫支持三種調參方式。

第一種，加載前配置（例如注入腳本或書籤），適合把默認參數固定下來：

window.__DSH_DEEPSEA_PLANKTON__ = { speed: 0.0004, count: 70 }

關閉動畫同樣是加載前設置：

window.__DSH_DEEPSEA_PLANKTON__ = false

第二種，加載後即時調參，無需重啓：

window.__DSH_DEEPSEA__.setPlankton({ speed: 0.001, baseAngle: -1.2 })
window.__DSH_DEEPSEA__.getPlankton()

第三種，在自己的樣式表裏覆蓋 CSS 變量：

:root { --dsh-plankton-speed: 0.0004; --dsh-plankton-angle: -1.2; }

可調參數及默認值（節選）：count=90（--dsh-plankton-count）、opacity=0.32（--dsh-plankton-opacity）、speed=0.0007（--dsh-plankton-speed）、baseAngle=-1.28（--dsh-plankton-angle）、swing=0.18、swingPeriod=55、flowPulse=0.45、flowPulsePeriod=42、diveCountScale=1.6、diveBrightness=1.15、diveGlow=0.22（0 表示關閉）。不想寫代碼，直接用水母按鈕的參數面板調即可。

適用場景與注意¶

適合誰：

• 想要一套同時覆蓋深/亮外觀、升級不容易壞的主題；
• 希望界面有一點氛圍但不干擾閱讀——動畫透明度低，且支持降級；
• 只要純深色主題的話，註釋樣式文件末尾的淺海段即可。

幾點注意：

1. 範圍：本插件只做主題與顏色。佈局類改動（寬對話欄 1360px、用戶氣泡對齊、隱藏 tool-call 節點、隱藏 reasoning、wide.dock 雙欄）由 dsh-wide-dock 插件承接，兩者可以配合使用。
2. 亮色模式下粒子仍使用深海熒光色板，不做主題切換；亮色模式默認淺海化。
3. 無障礙：prefers-reduced-motion 時浮游生物動畫與深潛動畫均退化爲靜態幀。
4. 機制：樣式在 bundle 求值時注入 document.head（冪等 style 守衛），晚於 dist token 樣式表加載，同特異性下後寫覆蓋先寫。
5. 安全：插件以當前 dsh 進程的權限運行，安裝前請自行檢查源碼與許可證（本項目爲 MIT）。

結尾¶

dsh-krill-theme 的價值在於把「換主題」從改 dist 變成了裝插件：一個樣式表管兩套外觀，token 級覆蓋把升級成本壓到幾個鍵名和類名，動畫和調參入口都是可關可調的附加項。

• 目錄頁（獨立社區目錄，與 DeepSeek / 幻方無官方從屬關係）：https://www.skillhub.cn/plugins/i1j/dsh-krill-theme
• GitHub：https://github.com/i1j/dsh-krill-theme