Look & theme plugin for the DSH Web UI: built-in palettes, light/dark/follow-system appearance modes, Open VSX theme search & install, and VS Code theme import with a persisted theme library.
Install
# from GitHub (first run asks for allowBuilds approval — follow the hint, retry)
dsh plugin --profile web add github:MangMax/dsh-themes
Any plugin you install runs third-party code with your own permissions — it can read your files, use your credentials, and reach the network, and tool approvals don’t sandbox it. GitHub-sourced plugins also run build scripts at install time. Only install sources you trust, and pin a commit (github:owner/repo#sha).
README
dsh-themes
English | 中文
DSH(DeepSeek Harness)运行时的外观与主题插件:内置调色板、明 / 暗 / 跟随系统外观模式、Open VSX 搜索安装、VS Code 主题导入,主题库持久化。
主题引擎(语义角色映射、双种子生成、对比度求解、OKLCH 感知导入映射)的架构灵感来自 t3code

功能
- 主题卡片模型:每个主题含明色/暗色两个变体槽,槽内聚合全部明色/暗色变体可选;导入的扩展聚合为一个主题卡片
- 默认主题卡片:DSH 原生外观也是可选主题;删除使用中的导入主题或点击「恢复默认主题」均回退到它
- 变体选择器:多色融合球列表(参照 t3code ThemePreviewCircle),选中放大(固定槽位不跳动)、溢出左右箭头导航、悬停显示变体名
- 外观模式:跟随系统 / 浅色 / 深色,明暗变体随模式自动切换
- 搜索安装(Open VSX):单请求搜索,展示图标/作者/许可证/评分/更新时间;悬浮名称或图标查看详情卡片,点击打开扩展页或仓库;「导入」一步完成下载、解析(include 合并)与聚合导入,版本化缓存重复导入秒开
- VS Code 导入:本地扩展扫描、URL 获取、粘贴 JSON;OKLCH 感知引擎派生表面,workbench 指定值对比度门控,操作色独立于 accent
- 状态动画色:运行状态点阵(
--dsh-state-ongoing→--dsw-static-deepseek-450)跟随主题 - 设置页导航图标:设置面板「主题」菜单图标替换为调色板图标(取自 reicon 图标集,https://github.com/dqev/reicon)
- 中英文界面:设置页文案与提示跟随 DSH 语言设置(设置 → 通用 → Language),切换即时生效;主题库持久化数据保持语言中立,展示时自动本地化
- 持久化:主题库保存到
~/.dsh/dsh-themes.json,重启后恢复 - 跨平台(Windows / macOS / Linux):网络与本地文件全部在宿主进程内完成(全局
fetch+ node 内置模块 +fflate内存解压),不依赖 shell 的 curl/mkdir/unzip 等 Unix 命令,Windows(pwsh)下同样可用
开发
源码为 TypeScript 模块,由 VitePlus(vp)打包为 DSH 插件函数体(vite.config.ts 的 pack 块负责构建)。
bash scripts/install.sh # 一键:vp pack 构建 → 组装 npm 插件包 → dsh plugin 安装到 web profile
bash scripts/install.sh --pack-only # 只构建并打包,不安装
vp pack # 仅构建 dist/client/index.cjs 与 dist/host/index.cjs
vp check # 语法检查
结构
client/src/ # 浏览器半区(设置页 UI、调色板引擎)
color-utils.ts # RGB/HSL/WCAG 对比度、双种子调色板
oklch.ts # OKLCH 感知引擎(导入派生)
chat.ts # t3 chat 调色板(t3.chat 界面取色,颜色保持原样)
vs-import.ts # VS Code 主题解析与映射
palette.ts # token 清单、默认外观、内置主题
styles.ts # 设置页样式
index.ts # 入口:状态/覆盖层/设置页/编辑器/注册
host/src/ # Node 半区(RPC)
util.ts # shell/curl 工具工厂
index.ts # 入口:扫描/读取/搜索/详情/安装/持久化
scripts/
install.sh # 一键构建 + 组装 npm 插件包 + 安装
安装
方式一(从 npm registry,已发布后):
dsh plugin --profile web add dsh-themes
方式二(本地一键构建安装,适合开发迭代):
bash scripts/install.sh
两种方式安装后均需重启 dsh web,然后进入 设置 → 主题 使用。
使用
- 外观模式:跟随系统 / 浅色 / 深色;主题库默认未指定时由 DSH 默认主题兜底
- 明暗独立归属:点击变体只设置该侧外观的主题,不切换外观模式;浅色与暗色可来自不同主题;点击卡片名称则明暗两侧同时使用该主题
- 颜色编辑器:主题卡片「修改」进入二级页面——改名、明暗切换、分组 token 色块与 hex 编辑(即时生效)、重置修改
- 内置主题「复制」:复制为自定义副本后再编辑,内置主题不可直接修改
- 从 VS Code 导入:扫描本地扩展(
~/.vscode/extensions、~/.vscode-insiders/extensions、~/.cursor/extensions)、URL 获取、粘贴 JSON;导入主题可修改、删除 - 搜索安装(Open VSX):搜索、查看卡片内简介与链接、一键导入(缓存秒开)
卸载
移除插件:
dsh plugin --profile web remove dsh-themes
或删除 profile 依赖后重启 dsh web。卸载后调色板覆盖层自动移除,外观恢复默认。
Links
More in this category
Small-tailqwq/dsh-deep-whale★ 884
Whale-girl skin series for the DSH Web UI (maid-atelier).
KinGao294/dsh-skin★ 11
Codex-style skin switcher plus a custom wallpaper layer with opacity and blur controls.
RevolutionLA/dsh-dream-skin★ 6
One-command skin plugin: 8 original themes, translucent wallpaper with opacity/blur, per-user accent, and shareable theme-pack import/export, favorites and surprise-me — purely native on DSH's token system.
tianyhjg-lab/dsh-font★ 6
Font switcher for the DSH Web GUI: 99 UI fonts and 31 code fonts with CJK-Latin pairing stacks, instant apply and localStorage persistence.
starslittle/dsh-blue-whale★ 6
A DeepSeek Chat-style blue-whale color skin. Light and dark follow the built-in appearance.
PAKIKNOWLEDGE/dsh-client-ui-skin-claude★ 5
Claude-style skin with a warm-black canvas, clay accent, and serif UI that follows the native light and dark themes.