前言¶
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.。 - 外部样式：其他来源注入的样式不会被移除。
