DeepSeek HarnessHub
提交插件

X9wd09ncc/dsh-x9-theme ↗★ 1

dsh-x9-theme

DeepSeek Harness WebUI 主题插件：提供 6 种预设风格、背景图上传、分区独立样式定制、透明度及自定义 CSS 等全套外观定制。

AI 分析

核心用途是为DSH Web界面提供全方位的外观与主题个性化定制。适合追求视觉美感、想要自定义背景、毛玻璃特效或配色风格的用户。

視覺介面
套件
dsh-x9-theme
版本
9.2.0
授權
MIT
最近更新
2026年8月15日

安裝

$npx -p @deepseek-ai/dsh dsh plugin --profile web add github:X9wd09ncc/dsh-x9-theme

說明文件

閱讀完整 README ↗

重启服务后恢复默认外观；删除插件目录下的 config.json 即彻底清除个人配置


## 截图

| 主题面板 | 背景与分区样式 |
| --- | --- |
| ![主题面板](https://raw.githubusercontent.com/X9wd09ncc/dsh-x9-theme/0bff59b4f7a35f22db601946ba7c35815a306901/assets/screenshots/settings-theme.png) | ![背景与分区样式](https://raw.githubusercontent.com/X9wd09ncc/dsh-x9-theme/0bff59b4f7a35f22db601946ba7c35815a306901/assets/screenshots/background.png) |

## 功能特性

- **可折叠设置分区**：每组标题带 ▲/▼ 折叠箭头；预览卡吸顶常驻，改动即见
- **风格预设**：极光 Aurora / 午夜 Midnight / 樱花 Sakura / 森林 Forest / 琥珀 Amber / 石墨 Mono + 默认，每套覆盖 40+ 设计 token（浅色/深色双值）
- **明暗模式**：跟随系统 / 浅色 / 深色（官方 `theme.setTheme`，持久保存）
- **分区独立样式**：

  | 分区 | 可选样式 |
  | --- | --- |
  | 侧边栏 | 默认 / 毛玻璃 / 渐变 / 无底色极简 / 霓虹描边 / 斜纹 |
  | 输入框 | 默认 / 浮雕 / 描边 / 发光 / 毛玻璃 / 渐变 / 霓虹 / 极简无边框 |
  | 对话气泡（用户消息） | 默认圆角 / 毛玻璃 / 描边 / 方角扁平 / 渐变 / 霓虹 / 柔和阴影 |
  | 对话框（AI 输出） | 默认无底 / 卡片 / 毛玻璃 / 描边卡片 / 霓虹卡片 |
  | 页面背景 | 默认 / 赛博网格 / 流光渐变 / 噪点纹理 / 落日 / 深海 / 薄荷 / 糖果 / 星空 |

- **背景图片**：
  - 统一"图片地址"字段：本地路径 / 插件资源 `/x9-theme/asset/` / `https://` 外链 / `data:` URI 智能分流
  - **本地上传**（存入插件 `assets/` 目录，重启不丢；单个上限 20 MB）
  - 本地文件路径直接读取（扩展名白名单 `jpg/jpeg/png/gif/webp/avif/svg/bmp`，不超过 8 MiB）
  - 4 种内置渐变；铺满 / 完整 / 原始 / 平铺、位置、模糊（0–20px）、不透明度、暗色遮罩
  - 输入地址后**真实探测并提示** ✓ 已加载 / ✗ 失败（提示显示在输入框正下方）
- **四区透明度滑块**：主区 / 侧边栏 / 卡片浮层 / 输入区各自独立调节（0%–100%，0 = 完全透明）；启用背景后自动调到参考值（55% / 60% / 85% / 85%）让背景透出，手动拖动后以手动值为准
- **分区自定义 CSS（免 F12）**：侧边栏 / 输入框 / 用户气泡 / AI 输出 / 页面背景各自独立编辑器；
  打开即显示该区域**当前页面实际样式**（自动读取计算值并格式化成 CSS，可直接复制修改），
  选择器模板随占位提示给出；输入即生效、与预设同优先级时以自定义为准；清空即恢复；随 `config.json` 分享
- **字体**：界面字体下拉（霞鹜文楷 / 思源宋体 / 鸿蒙黑体 / 微软雅黑 / 衬线经典）+ 自定义栈；
  代码字体下拉（JetBrains Mono / Fira Code / Cascadia Code / Consolas / SF Mono）+ 自定义栈；字号缩放 85%–120%
- **配色**：强调色浅色/深色分设（✕ 一键恢复跟随预设）
- **动效与阴影**：动画速度 25%–150%、阴影强度 0–200%（0 = 扁平）
- **持久化与分享**：所有设置自动写入插件目录 `config.json`（本地路径经 `import.meta.url` 定位，与宿主设置白名单无关）；
  面板"高级"区提供配置 JSON 导出 / 复制 / 导入 / 一键重置——把 `config.json` 发给别人即可复刻整套主题

## 使用指南

设置 → **主题**（调色板图标）。所有控件改动即生效、自动保存，顶部预览卡实时预览配色与背景。

### 分区自定义 CSS 示例

每个分区底部有折叠的"自定义 CSS"编辑器，打开后上半部分是**当前实际样式**（页面计算值，可复制修改），下半部分直接填写：

```css
/* 侧边栏：圆角 + 半透明毛玻璃 */
.pI_x6G_sidebarCol {
  border-radius: 0 20px 20px 0;
}
.hHd-Xa_root {
  background: rgba(255, 255, 255, 0.6);
}

/* 用户气泡：强调色发光 */
.gdEzaW_bubble {
  box-shadow: 0 0 12px var(--x9-accent-soft);
}

/* 输入框：更圆润 */
.uV2eYG_card {
  border-radius: 24px;
}

支持 --dsw-* 主题变量与本插件变量（如 --x9-accent-soft）；清空对应编辑框即恢复预设。

背景风格层说明

赛博网格、星空等 8 种背景风格层均为深色底：选择后自动切换深色模式保证文字可读；切回"默认（纯色/图片）"时恢复你选择的明暗模式。

目录结构

dsh-x9-theme/
├── package.json        # dsh.bundle + dsh.client 声明（v9.2.0）
├── cordis.patch.yml    # 组合层：插入 ui-x9-theme 行
├── lib/
│   ├── index.js        # Host 半边：/x9-theme 路由（config / asset / upload / bg）
│   └── client.js       # 浏览器半边：主题引擎 + 设置页
├── assets/
│   ├── screenshots/    # README 截图
│   └── bg.jpg          # 默认背景图（可替换；上传的图片也会存入此目录）
├── config.json         # 运行时生成：个人配置持久化（已 gitignore，可复制给他人导入）
├── LICENSE
└── README.md

仓库自带默认背景 assets/bg.jpg（安装后默认背景来源），可自行替换或删除。公开分发前请确认你拥有该图片的分发权利。

config.json 字段（节选）

配置自动生成，无需手写；分享时直接复制整个文件，对方在"高级 → 导入配置"粘贴即可：

字段含义
presetId / scheme预设风格（none 或预设 id）/ 明暗模式（system/light/dark）
accentL / accentD强调色（浅色/深色），空 = 跟随预设
sidebarStyle / inputStyle / bubbleStyle / aiStyle四分区样式
bgStyle背景风格层（default/cyber/aurora/noise/sunset/ocean/mint/candy/galaxy）
bgMode / bgUrl背景来源（none/g1–g4/url）与图片地址
bgSize / bgPos / bgBlur / bgOpacity / bgTint背景显示方式 / 位置 / 模糊 / 不透明度 / 遮罩浓度
opacityMain / opacitySidebar / opacityCard / opacityInput + glassAuto四区透明度与自动参考值开关
fontFamily / codeFont / fontScale界面字体栈 / 代码字体栈 / 字号缩放
shadowScale / motionScale阴影强度 / 动画速度
cssSidebar / cssInput / cssBubble / cssAi / cssBg分区自定义 CSS（旧版 customCss 全局字段仍兼容生效）

HTTP 端点（Host 半边）

方法路径说明
GET / POST/x9-theme/config读取 / 校验并保存 config.json（无则返回 {}）
GET/x9-theme/asset/伺服 assets/ 下图片（路径穿越防护）
POST/x9-theme/upload上传 data URI 图片 → assets/（不超过 25 MiB），返回 { url }
GET/x9-theme/bg?p=按本地路径伺服图片（扩展名白名单，不超过 8 MiB）

常见问题

Q：安装并重启后，设置里没有"主题"分区？ 页面的客户端插件清单只在整页加载时获取，服务器重启后的自动重连不会更新它。请按 Ctrl+F5 或关闭标签页重新打开页面。（"插件"列表里能看到本插件是实时查询服务器的结果，不代表页面已加载它。）

Q：升级 DSH 后某个分区样式失效了？ 分区样式依赖少量产品 CSS 类名（如 .pI_x6G_sidebarCol、.uV2eYG_card），DSH 大版本升级后哈希类名可能变化。打开对应分区的"自定义 CSS"编辑器，顶部"当前实际样式"里显示的就是新选择器，参照它即可适配；也欢迎提 Issue。

Q：本地路径背景不显示？ 检查扩展名是否在白名单（jpg/jpeg/png/gif/webp/avif/svg/bmp）且文件不超过 8 MiB。图片地址框下方会实时显示 ✓/✗ 探测结果；上传到插件 assets/ 的图片不受此限制。

Q：背景太淡 / 太浓 / 看不清？ 调节"四区透明度"（主区 55% / 侧边栏 60% / 卡片 85% / 输入 85% 为参考值）与背景分区的"不透明度""遮罩浓度"；背景风格层会自动切深色模式保证可读。

Q：配置想恢复默认？ 面板"高级 → 重置全部"，或删除插件目录下的 config.json 后刷新页面。

开发

  • 纯 JavaScript，无构建步骤；node --check lib/client.js 可做语法自检
  • 安装方式为符号链接（link:），直接改源码目录即可；lib/client.js 改动刷新页面生效，lib/index.js 改动需重启服务
  • 分区样式选择器集中在 lib/client.js 的 effectsCss()；"自定义 CSS"编辑器会动态展示页面上的真实选择器，便于适配
  • 设置导航"主题"分区的调色板图标按导航第 2 项定位（.VOzbGW_navCell:nth-of-type(2)）；如有其他插件以更小 order 插入设置分区，需相应调整该序号
  • README 截图放 assets/screenshots/，界面大改后替换同名文件

License

MIT

使用指南

设置 → 主题（调色板图标）。所有控件改动即生效、自动保存，顶部预览卡实时预览配色与背景。

分区自定义 CSS 示例

每个分区底部有折叠的"自定义 CSS"编辑器，打开后上半部分是当前实际样式（页面计算值，可复制修改），下半部分直接填写：

/* 侧边栏：圆角 + 半透明毛玻璃 */
.pI_x6G_sidebarCol {
  border-radius: 0 20px 20px 0;
}
.hHd-Xa_root {
  background: rgba(255, 255, 255, 0.6);
}

/* 用户气泡：强调色发光 */
.gdEzaW_bubble {
  box-shadow: 0 0 12px var(--x9-accent-soft);
}

/* 输入框：更圆润 */
.uV2eYG_card {
  border-radius: 24px;
}

支持 --dsw-* 主题变量与本插件变量（如 --x9-accent-soft）；清空对应编辑框即恢复预设。

背景风格层说明

赛博网格、星空等 8 种背景风格层均为深色底：选择后自动切换深色模式保证文字可读；切回"默认（纯色/图片）"时恢复你选择的明暗模式。