Skip to content
dsh marketplace

dsh-custom-css

Verified

dsh-custom-css · v0.12.0 · MIT · Web UI

DSH Web GUI 扩展：设置 → 通用 里的自定义 CSS 编辑器，以及一个不用写 CSS 的自定义壁纸面板。

Install

dsh plugin add dsh-custom-css

Confirm the layer applied with dsh --profile default --dump-config — see the install guide.

Source

Tags

Creators

Readme

dsh-custom-css

dsh-custom-css 图标：深色渐变圆角方块 + 白色花括号与三条声明行

设置行里的 CSS 编辑器：写完即生效，样式表就是磁盘上的 .css 文件

CI release npm version npm unpacked size GitHub stars License: MIT 插件生态：GitHub topic dsh-plugin 收录于 dshfind

支持的 DSH 版本：0.0.1-rc.1 ~ 0.2.1-rc.3（接口契约断言，37 个版本）；其中 0.1.2-rc.1 与 0.1.5-rc.1 与 0.2.0-rc.2 已真机验证

即时生效 DevTools 编辑器 键入补全 规则面板 格式校验 声明模板 元素拾取器 多文件管理 明暗自适应 属性字典 历史版本 查找替换 撤销重做 规则大纲 自定义壁纸 实时预览 令牌管理 效果预设

拾取元素 · 查找 · 文件下拉 · 更多操作，把 ~/.dsh/custom-css/ 下的样式表注入界面 ——
编辑器照 DevTools 的 Styles 标签页做：行号 gutter、语法高亮、键入补全、规则面板、格式校验、撤销重做、查找替换；
拾取器在界面里点选一个元素，直接给出跨版本尽量稳的选择器，并把它实际生效的令牌写成声明；
壁纸不用写 CSS：选一张本机图片即可，界面透明与明暗都由它自己调（插件详情页里那一节）。

DSH Web GUI 扩展：在 设置 → 通用 的「外观」下方增加一行 自定义 CSS —— 样式表以普通 .css 文件保存在宿主磁盘上，写进去即时应用到整个界面。

  • npm：dsh-custom-css（2026-09-13 首发，当前版本见上方徽章）
  • 收录：dshfind 插件超市 → 皮肤主题（徽章与展示卡由 dshfind 提供，/api/badge 与 /api/card）
  • 兼容：DSH 0.1.2-rc.1 ~ 0.2.0-rc.2 已真机验证；接口契约断言覆盖 0.0.1-rc.1 ~ 0.2.1-rc.3（共 37 个版本）；npm run compat 可复跑（见「兼容性」）
  • 许可：MIT
  • 形态：DSH profile 插件（host 半 + 浏览器半），无构建步骤，lib/*.js 即产物
dshfind 展示卡（440×200）

dshfind

装

前置：DSH 0.1.2-rc.1 ~ 0.2.0-rc.2（已真机验证；接口契约断言覆盖 0.0.1-rc.1 ~ 0.2.1-rc.3，见「兼容性」），Node.js ≥ 20、pnpm ≥ 10。

# 1) 装进 profile
dsh plugin --profile web add dsh-custom-css

# 2) 让它真的被加载：把包名加进 profiles/web/package.json 的 dsh.profile.bundles
#    "dsh": { "profile": { "bundles": [ ..., "dsh-custom-css" ] } }

# 3) 重启 GUI（重开会话不够，进程内模块缓存是旧的）

两步缺一不可：只装不列进 bundles → 那一行不出现且没有报错；只写 bundles 不装 → 启动直接失败。

装完打开 设置 → 通用，滚到「外观」下方的 自定义 CSS，写：

[data-dockkit-strip] {
  background-color: var(--dsw-alias-bg-layer-1);
  border-radius: var(--dsw-radius-sm);
}

不想抄类名就点 [拾取元素] 在界面里点你要的东西。

  • 换 GitHub 源、本机 link: 开发安装、卸载、换版本 → 安装
  • 装错了：每个症状对应哪一步漏了 → 安装 · 装错了

文档

按「想做什么」找，完整索引在 docs/index.md。

我在… 看这些
刚装上 安装 · 三分钟上手 · 已知坑
换张背景图（不写 CSS） 自定义壁纸 —— 入口在插件详情页里
写样式 编辑器 · 元素拾取器 · 规则面板 · 格式校验 · 控件
改插件 开发 · UI 组件库 · 测试与巡检 · 设计一致性 · 仓库结构 · 命名表
排查问题 已知坑与已知限制 · 兼容性 · host 侧文件接口
看预览与令牌 预览块 · 令牌管理 · 效果预设

另有可直接导入的示例：examples/acrylic.css —— 完整的亚克力皮肤（渐变壁纸 + 玻璃面板 + 背景模糊）； 想学怎么写就看 examples/showcase.css（60 行的最小示例）。 两者都由 examples/README.md 导览。

兼容性

插件与 DSH 的耦合面是刻意做窄的，所以它跨版本比多数插件活得久：浏览器半在运行时一个 @deepseek-ai/* 模块都不 require（只通过 dsh.client.inject 声明可用 id、并从 Context 取 slots 服务），host 半只挂 HTTP 路由。真正依赖的平台契约只有四条，全部记在 compat.json，由 npm run compat 逐个版本断言：

契约点 内容
槽位 settings.general.item（@deepseek-ai/dsh-client-ui-settings-general 里 GeneralSection 渲染的那个 seat）
声明的模块 id @deepseek-ai/dsh-client-ui-settings、@deepseek-ai/dsh-client-ui-settings-general
需要的服务 仅 slots
运行时 require 零

验证矩阵

DSH 版本 验证方式 结论
0.2.0-rc.2 真机运行：本机日常在用的实例（生产 profile web，插件以 link: 装入并实际渲染设置行）。实测 host 路由 GET /list、GET /read、GET /history 全部 200，返回的正是磁盘上的样式表与历史快照 通过
0.1.5-rc.1 真机运行（本仓库开发环境） 通过
0.1.2-rc.1 真机运行：独立 DSH_HOME 起实例，/dsh-custom-css/list、/write、/read 全部 200 且文件确实落盘 通过
0.0.1-rc.1 ~ 0.2.1-rc.3（共 37 个） 接口契约断言（npm run compat 解包该版本的 settings 包，核对槽位与 id） 通过

npm run compat 需要网络（要拉各版本的包），所以本地 npm test 保持离线可跑；CI 里单跑一档。

上表由 npm run compat:update 自动维护（GitHub Actions 每 6 小时检查一次 DSH 是否更新，有新版本就重新断言并提交这一节）。上次核对：2026-10-25，当时最新已发布版本 0.2.1-rc.3。

换代时的两种失效模式怎么判别（症状完全不同）：见 兼容性。

已知限制

  • 只能追加 CSS，不能修改内置样式表本身。
  • 规则面板只认顶层样式规则（@media 里的规则照常生效，只是面板编辑不到）。
  • 拾取器只能拾取当前文档里的元素，跨域 iframe 里拾取不到。
  • 壁纸一次只挂一张图；来源二选一 —— 上传本机文件（≤ 32 MiB），或贴一个 URL （https:// / file:/// / data:image/…，不下载、直接引用）。它自己会做界面透明，但皮肤若也设了 那几个 --dsw-alias-bg-* 令牌，皮肤优先（面板会说明）。

另外五条（含 host 接口不可达时的降级行为、令牌建议为什么可能一个都不给） 在 已知坑与已知限制。

参与

改动记录见 CHANGELOG.md。