前言¶
DeepSeek Harness (DSH) 採用了插件化架構，允許開發者通過擴展功能來定製界面。當默認的 Web 界面樣式無法滿足特定需求時，直接注入自定義 CSS 是最直接的解決方案。該插件在設置面板中新增一行，提供開關控制與實時編輯區域，將 CSS 注入到 Web 界面中。
基本信息¶
- 插件名：
dsh-plugin-custom-css - 核心價值：Settings 面板中提供開關與實時 CSS 文本區域
- 維護者：nguyenduclong-ict
- 分類：趣味換裝
- 許可證：MIT
核心功能¶
- 設置入口：在設置模態框的左側導航欄註冊一行 “Custom CSS”（排序 40）。
- 開關控制：通過開關啓用或禁用 CSS 注入，關閉開關不會清除已保存的代碼。
- 實時注入：在文本區域輸入時，CSS 會經過 500ms 防抖後注入，失焦時刷新到主機。
- 存儲機制：配置存儲在
~/.dsh/plugins/dsh-plugin-custom-css/config.（若設置了$DSH_HOME環境變量，則優先使用該目錄）。 - HTTP API：提供
GET/POST /api/custom-css/config接口用於讀寫配置。 - 設計標記：支持使用 Harness 的 CSS 變量（如
--dsw-alias-brand-primary、--dsw-font-*）進行主題定製。
安裝與啓用¶
安裝後，插件必須在啓動時被激活（包含在 dsh.profile.bundles 中），否則 Harness 將無法加載該插件。
1. 安裝依賴¶
進入 Web 配置文件目錄，使用 pnpm 安裝插件包：
Windows:
cd "$env:APPDATA\dsh-desktop\harness\profiles\web"
& "$env:APPDATA\dsh-desktop\harness\.desktop-bin\pnpm.cmd" add <path-to-this-package>
macOS:
cd "$HOME/Library/Application Support/dsh-desktop/harness/profiles/web"
"$HOME/Library/Application Support/dsh-desktop/harness/.desktop-bin/pnpm" add <path-to-this-package>
Linux:
cd ~/.config/dsh-desktop/harness/profiles/web
~/.config/dsh-desktop/harness/.desktop-bin/pnpm add <path-to-this-package>
2. 註冊插件¶
編輯 profiles/web/package.json，在 dsh.profile.bundles 數組中添加插件名：
{
"dsh": {
"profile": {
"bundles": [
"@deepseek-ai/dsh-base",
"@deepseek-ai/dsh-web-app",
"dsh-plugin-custom-css"
]
}
}
}
3. 重啓應用¶
安裝完成後重啓 DSH Desktop。
使用方法¶
- 打開 設置，點擊左側導航欄的 Custom CSS。
- 打開 Enable custom CSS 開關。
- 在文本區域粘貼或編寫 CSS。內容會實時生效。
- 關閉模態框，樣式保持應用，並在下次啓動時恢復。
示例代碼¶
利用 Harness 的設計標記重置品牌主色：
:root {
--dsw-alias-brand-primary: #22d3ee;
}
/* 調整字體大小 */
[data-conversation-scroll] {
font-size: 15px;
line-height: 1.7;
}
技術細節與注意事項¶
- 注入目標：CSS 被注入到
<head>末尾的<style id="dsh-custom-css-style">元素中，確保覆蓋啓動時 Harness 添加的樣式。 - 不修改安裝：插件僅修改運行時配置，不改動 Harness 安裝目錄。
- 重置配置：若需清空配置，請刪除
~/.dsh/plugins/dsh-plugin-custom-css/config.。 - 外部樣式：其他來源注入的樣式不會被移除。
