dsh-custom-ui
DSH 主题画廊:8 套 open-design 主题(OpenCode/Linear/Notion/Claude/NVIDIA/GitHub)全量 token 映射 + 设置页一键切换 + 偏好持久化与守护
- Stars
- 0
- Language
- JavaScript
- Created
- Sep 4, 2026
- Updated
- Sep 4, 2026
Introduction
@dshp-inx/custom-ui —— DSH 定制 UI 套件
主题画廊是第一个模块:23 套主题(14 套品牌适配 + 9 套原创)+ 设置内一键切换。后续字体、布局、交互等定制模块都归入本包。
主题清单(label/desc/swatch 以 lib/themes/*/meta 为准;token 单源 lib/themes/,Host 经 GET /themes 下发,client 只存 meta——改色只改 lib,跑 scripts/check-themes.mjs 校验三处一致)
| 主题 id | 模式 | 风格 | 来源 |
|---|---|---|---|
opencode-terminal-dark | 纯暗 | 暖黑 #201d1d + Apple 蓝 + 全站 Berkeley Mono | opencode-ai |
opencode-terminal-light | 纯亮 | 暖白 #fdfcfc 纸感 + 暖灰层次 | opencode-ai |
linear-dark | 纯暗 | 近黑 #08090a + Indigo #5e6ad2,半透明白边框 | linear-app |
notion-light | 纯亮 | 纯白 + 暖灰 + Notion Blue,whisper 边框 + 微阴影 | notion |
claude-parchment-light | 纯亮 | 羊皮纸 #f5f4ed + 赤陶 #c96442,ring 型深度 | claude |
nvidia-dark | 纯暗 | 纯黑 #000 + 信号绿 #76b900(悬停绿→青惊喜) | nvidia |
github-dark | 双模式 | #0d1117 + Primer 蓝 #2f81f7 + 绿色主按钮 | github |
github-light | 纯白 + #0969da + 发丝线 #d0d7de | github | |
replicate-light | 纯亮 | 纯白 #ffffff + 品牌红 #ea2804,全站胶囊感 | replicate |
cisco-dark | 纯暗 | 藏青 #0f1720 + 信号蓝 #049fd9,企业级深色 | cisco |
neobrutalism-light | 纯亮 | 奶油 #fff4cf + 橘红 #d24b1f,硬偏移阴影 | neobrutalism |
mission-control-dark | 纯暗 | 深空 #090b12 + 指挥蓝 #60a5fa,霓虹青点缀 | mission-control |
levels-light | 纯亮 | 米纸 #fbf7ef + 代谢绿 #2f8f46 | levels |
arc-light | 纯亮 | 蜜桃 #fdf3ec + 珊瑚 #ff5f5f | arc |
luxury-dark | 纯暗 | 曜石 #080706 + 鎏金 #c6a15b | luxury |
skeumorphism-light | 纯亮 | 陶土 #f7eee6 + 陶釉 #b46a46,柔和拟物阴影 | skeumorphism |
wechat-light | 纯亮 | 浅灰 #ededed + 微信绿 #07c160 | |
xiaohongshu-light | 纯亮 | 米灰 #f5f5f5 + 种草红 #ff2442 | xiaohongshu |
discord-dark | 纯暗 | 深灰 #313338 + Blurple #5865f2 | discord |
supabase-dark | 纯暗 | 墨黑 #171717 + 翡翠绿 #3ecf8e | supabase |
nebula-dark | 纯暗 | 紫黑 #0d0a1a + 霓紫 #8b5cf6(原创) | 原创 |
sakura-light | 纯亮 | 樱白 #fff9fa + 樱粉 #e75480(原创) | 原创 |
tide-dark | 纯暗 | 深青 #062a2c + 潮汐 #2dd4bf(原创) | 原创 |
每套主题 ~110 个 --dsw-* token 全量映射:背景 / 边框 / 品牌 / 按钮 / 交互态 /
文字 / 语义色 / Markdown / 滚动条 / 侧栏 / 气泡 / 浮层 / 阴影 / 字体栈。
结构
dsh-custom-ui/
├── package.json # @dshp-inx/custom-ui,dsh.client 声明
├── cordis.patch.yml # bundle 挂载行
├── lib/
│ ├── index.js # Host 半:settings 持久化 + 同源路由(state/themes/theme/config)+ 主题 allowlist(动态派生自目录)
│ ├── shared.js # Host 三件套(settingsNamespace/json/sameOrigin/readBody,六插件逐字相同)
│ └── themes/
│ ├── index.js # 主题目录聚合(THEME_CATALOG)
│ ├── shared.js # 字体栈常量 + 字体 token 批量填充 + FLAT_SHADOWS
│ ├── opencode.js # OpenCode 双模式(dark + light)
│ ├── linear.js # Linear 纯暗
│ ├── notion.js # Notion 纯亮
│ ├── claude.js # Claude 纯亮
│ ├── nvidia.js # NVIDIA 纯暗
│ └── github.js # GitHub 双模式
│ ├── replicate.js # Replicate 纯亮
│ ├── cisco.js # Cisco 纯暗
│ ├── neobrutalism.js # Neobrutalism 纯亮(硬阴影例外)
│ ├── missioncontrol.js # Mission Control 纯暗
│ ├── levels.js # Levels 纯亮
│ ├── arc.js # Arc 纯亮
│ ├── luxury.js # Luxury 纯暗
│ ├── skeumorphism.js # Skeumorphism 纯亮(柔和阴影例外)
│ ├── wechat.js # WeChat 纯亮
│ ├── xiaohongshu.js # 小红书 纯亮
│ ├── discord.js # Discord 纯暗
│ ├── supabase.js # Supabase 纯暗
│ ├── nebula.js # Nebula 纯暗(原创)
│ ├── sakura.js # Sakura 纯亮(原创,柔粉阴影)
│ ├── tide.js # Tide 纯暗(原创)
│ ├── photo.js # 壁纸 MD3 引擎(seed→ref 调色板→sys→DSW,含 MD3 导出)
├── scripts/
│ └── check-themes.mjs # 三处一致性校验(lib 目录 / Host allowlist / client 画廊 meta)
└── client.js # Client 半(__ModuleLoader__:画廊 UI;只存主题 meta,token 按需问 Host 要)
主题数据单源 lib/themes/(规范源码,ESM、带注释)。client 半无法 require
本地 lib,主题 token 由 Host 经 GET /ext/dshp-inx-custom-ui/themes 下发
(内存缓存一次);client 只保留 id/colorScheme/label/desc/group/swatch,
卡片渲染走 swatch。新增主题三步:lib/themes/ 加一文件 →
lib/themes/index.js 加 import + expand → client THEMES 加一条 meta,
然后跑 node scripts/check-themes.mjs。
挂载
cd ~/.dsh/profiles/web
pnpm add --offline "@dshp-inx/custom-ui@link:../../plugins/dsh-custom-ui"
rm -rf node_modules/@dshp-inx/custom-ui
ln -s "$HOME/.dsh/plugins/dsh-custom-ui" node_modules/@dshp-inx/custom-ui
# cordis.patch.yml 已由 bundle 自带(cordis.patch.yml),profile 层无需再插行
# 重启 dsh web
使用
设置 → 外观定制(两块):
- 主题画廊:色卡预览 + 点击即切,
theme/change事件驱动"使用中" 徽标实时跟随;内置浅色/深色也可在画廊顶部查看当前态并随时切回。 - 壁纸取色(Material You):独立配置区,不占主题卡片位。上传壁纸→
提取 seed→生成 5 组 ref 调色板 × 亮/暗 sys 色彩,色调条 + 角色预览,
一键启用;
复制 MD3导出--md-ref-palette-*+--md-sys-color-*-light/dark(与 MD3 令牌命名兼容,可直接用于 MD3 项目)。持久化只存 seed(兼容旧数据)。 - 全局圆角:三档(-1 跟随主题 / 0 全锐角 / 12 统一圆润),保存即生效,无需刷新。
背景与外观(壁纸上传/视频/毛玻璃):已退役(见aebe395)。settings.yaml里残留的wallpaper.*/glass.*仅做不透明透传保留数据,不再有 UI; 取色请用上面的壁纸取色(MD3 动态配色)。
持久化
官方 theme 服务的 settings schema(ui-theme.preference)只接受
light/dark/system——自定义主题 id 只写内存,重启即丢。本插件补上持久化:
- Host 半:注册
dshp-inx-custom-uisettings 命名空间 (settings.yaml 顶层,themeId/photoPalette/radius字段; 退役的wallpaper/glass仅透传保留),同源路由GET /ext/dshp-inx-custom-ui/state(偏好快照)、GET /ext/dshp-inx-custom-ui/themes(目录全量 token 下发)、POST /ext/dshp-inx-custom-ui/theme(切主题)、POST /ext/dshp-inx-custom-ui/config(圆角/取色) - Client 半:启动时读 state 恢复主题(注册完成后再 setTheme,静默容错); 画廊点击时先 setTheme 再 POST 保存,保存失败会提示(重启后回退内置偏好)
- 清空持久化:把 settings.yaml 里
dshp-inx-custom-ui.themeId置空串, 即完全跟随官方外观偏好(system/light/dark) - 白名单校验:Host 半只接受目录内的 23 个主题 id(+ 虚拟
photo:custom),未知 id 拒写
已知限制
- 动态插件版(会话内 cordis_define)与静态版并存会 WEB_DUPLICATE_PROVIDER,
静态挂载前先
cordis_undefine动态版。