dsh-custom-css

1. 安装并启动 DeepSeek Harness：npx @deepseek-ai/dsh web
2. 在终端执行上面的安装命令（CLI 会解析插件并核验来源）
3. 用 dsh plugins list 确认已安装，必要时重启 Harness 生效

插件以当前 dsh 进程的权限运行，安装时可能执行代码。请先通读仓库源码与许可证，确认无破坏性命令与越权访问；本站只做索引，不对第三方插件安全性作担保。

事实信息来自公开插件目录快照（2026-10-01），介绍文案由本站再加工。

以下为插件仓库 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.1.2 与 0.1.5 已真机验证，接口契约断言覆盖到 0.0.1-rc.5]

  [图片: 即时生效]
 [图片: DevTools 编辑器]
 [图片: 键入补全]
 [图片: 规则面板]
 [图片: 格式校验]
 [图片: 声明模板]
 [图片: 元素拾取器]
 [图片: 多文件管理]
 [图片: 明暗自适应]
 [图片: 属性字典]
 [图片: 历史版本]
 [图片: 查找替换]
 [图片: 撤销重做]
 [图片: 规则大纲]

  拾取元素 · 查找 · 文件下拉 · 更多操作，把 ~/.dsh/custom-css/ 下的样式表注入界面 ——

  编辑器照 DevTools 的 Styles 标签页做：行号 gutter、语法高亮、键入补全、规则面板、格式校验、撤销重做、查找替换；

  拾取器在界面里点选一个元素，直接给出跨版本尽量稳的选择器，并把它实际生效的令牌写成声明。

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

- npm：[`dsh-custom-css`](https://www.npmjs.com/package/dsh-custom-css)（2026-09-13 首发，当前版本见上方徽章）
- 收录：[dshfind 插件超市 → 皮肤主题](https://dshfind.com/zh/plugins/FOX4096/dsh-custom-css)（徽章与展示卡由 dshfind 提供，`/api/badge` 与 `/api/card`）
- 兼容：DSH `0.1.2-rc.1` ~ `0.1.5-rc.1` 已真机验证，接口契约断言覆盖到 `0.0.1-rc.5`；`npm run compat` 可复跑（见「兼容性」）
- 许可：MIT
- 形态：DSH profile 插件（host 半 + 浏览器半），无构建步骤，`lib/*.js` 即产物
- 测试：`node tests/loader-smoke.cjs` / `node tests/host-api-smoke.mjs`

dshfind 展示卡（440×200）

[![dshfind](https://dshfind.com/api/card/FOX4096/dsh-custom-css?lang=zh)](https://dshfind.com/zh/plugins/FOX4096/dsh-custom-css?ref=badge)

## 位置与行为

- 注册在 `settings.general.item` 槽，`order: 12`。DSH 自带的 `ui-theme` 在这个槽上占了 `appearance`(order 10) 和 `font-size`(order 11)，所以这一行正好落在它们下面。
- 样式表由 **host 侧**读写，存放在 `~/.dsh/custom-css/`（`$DSH_HOME/custom-css`，`$DSH_HOME` 未设时为 `~/.dsh`）。是普通文件：可用任意编辑器改、可备份、可放进版本库。
- 当前活动文件名与**各文件的开关**记录在同目录的 `active.json`（如 `{"active":"custom.css","disabled":["dark-tweak.css"]}`）。
- 编辑内容**即时生效**（防抖 400ms 后写回文件并重绘页面）。编辑器自带**撤销/重做**（每次连续输入的停顿算一步）、**查找 / 替换**（Ctrl+F）、**Tab / Shift+Tab 缩进**、**Ctrl/Cmd+S 立即写盘**；补全列表打开时 Tab 是「采用建议」。
- **查找 / 替换**：「查找」按钮或 Ctrl+F 打开表头的查找栏 —— 查询取编辑器里选中的那段文字，`Aa` 控制大小写，命中在彩色层里被圈出来（当前那条更重），Enter / Shift+Enter 走命中，**替换** / **全部替换**都是一次编辑（一次 Ctrl+Z 全撤回）。查询是纯文本，不是正则。窄窗口下命中计数、按钮文字会依次让位（见「已知坑」）。
- **格式化**在「更多操作」里：一条规则一行、每层缩进两空格、去掉空行。它只重排行，不改一行里写的东西（缺分号留给校验器报）；括号不配对的表原样返回。
- **在文本编辑器里保存，插件跟着变（自动同步）**：每 1.5 秒（只在页面可见时）问一次宿主「这张表动过没有」，判据是宿主报的**修订号**（`size/mtime`），不是文本内容 —— 编辑器把同一份内容重写一遍（改行尾、重新保存）不会被误判成冲突，而「文件被 touch 了一下」也不会被漏掉。**编辑器干净时直接采用**磁盘那份；**有没保存的改动时不覆盖**，改成页脚问「重新载入 / 覆盖它」。宿主另外用 `fs.watch` 盯着样式表**目录**（不是单个文件：VS Code 默认写临时文件再改名覆盖，盯着旧文件的监听从此看不到任何东西），那只是让同步快一点 —— 起不来的文件系统上功能照旧，走轮询。
- **写盘前会先读一次** 同一套判据：文件在别处被改过且编辑器里有没保存的内容，就不写，页脚问你「重新载入 / 覆盖它」。页面从后台切回前台时也会查一次，但那条路径**只发现、不采用** —— 你可能正读到一半。
- **每次覆盖写盘前留一份快照**：被替换掉的内容存进同目录的 `.history/<文件名>/<毫秒戳>.css`，**每张表最多 20 份**（按时间从旧的开始剪）。内容与最新一份相同时不重复留档 —— 否则自动保存的防抖写盘会把有用的版本挤出去。整张表的任何一次覆盖都留档（编辑器的自动保存、导入、以及**恢复本身**），所以恢复是可逆的。从「更多操作 → 历史版本」可以查和回退（见下表）。
- 编辑器是 DevTools Styles 标签页的样式：左侧**行号 gutter**、**语法高亮**（注释 / 选择器 / 属性 / 值 / 标点）、输入时弹出**补全列表**。
  - 高亮用 DSH 自己的 shiki 配色 token（`--shiki-token-keyword/constant/string/comment/punctuation`），所以与 Markdown 代码块同色并随浅深主题切换；渲染前逐段 HTML 转义，样式表永远不可能变成标记。
  - **补全数据来自浏览器本身**：属性名是从 `CSSStyleDeclaration.prototype` 枚举出来的（即该引擎真正认识的全部属性，含厂商前缀与新增属性），不再依赖手写列表 —— 手写列表只在没有 DOM 的调用方（如测试）里兜底。属性值的枚举集合仍由插件维护，但每个候选都先过 `CSS.supports(prop, value)`，引擎不认的直接不显示。
  - `↑`/`↓` 选择、`Enter` 或 `Tab` 采用、`Esc` 关闭，鼠标按下即采用；补全只在规则块内提示属性名（选择器区域不打扰）。
  - **只在真正键入时出现**：靠 `InputEvent.inputType` 判断，删除、粘贴、移动光标都不会弹出列表（老引擎缺这个字段时回退为"文本变长了才算输入"）。
  - **一行里的多条声明只看当前那条**：`color: red; ` 之后（分号紧邻，还没开始写新属性）不再弹任何补全 —— 否则同一行的冒号会把光标所在位置误判成"值"。
- **规则面板**：编辑器里的**选择器本身就是按钮**（`.cm-peak-strip` 这样的选择器带悬停底色与指针光标），点它在编辑器右侧展开面板：
  - 顶部是**可重命名的选择器字段**（铺满面板宽度，**关闭按钮 `×` 在字段内部**、靠右）—— 改名会原地改写样式表里的选择器，注释与缩进不受影响；整个字段获得焦点时统一显示 `brand-primary` 聚焦环；
  - 中间是**这条规则已有属性的摘要**（不是一张空白表单）：
    - 解析规则块里真实存在的声明并逐条列出。枚举型属性显示**中文名 + 中文值下拉**（`flex-direction: row` → 「主轴方向：水平排列」）；非枚举型（`gap`、`margin-top`、`min-width`…）显示属性名 + **值输入框**，可以直接改。
    - 下拉里可选「（删除此项）」移除该声明；手工写的、不在选项里的值会被保留为当前选项，不会被静默改掉。
    - **未设置的属性不占行** —— 它们收在**属性列表下方**的「**＋ 添加属性…**」菜单里（只列当前还没设的；控件铺满面板宽度、文案靠左箭头靠右），菜单按用途分成 **布局 / 弹性与对齐 / 网格 / 尺寸 / 间距 / 文本 / 背景 / 描边与圆角 / 效果与动效 / 交互** 十组（整组都被设完时该组自动隐藏）。
    - **面板里所有下拉都是插件自绘的菜单**（DSH 原生菜单的底色 + 阴影 + 20px 圆角，与文件下拉同一套）：原生 `` 的弹出层不受 CSS 控制（方角、跟随系统配色），所以这里不用它。菜单以 `position: fixed` 按触发按钮的位置定位，**不会被容器或面板自身的滚动裁掉**，视口下方不够高时自动向上展开。
    - **控件规格对齐 DSH 自己的设置行**：值输入框与下拉触发按钮都是 36px 高、18px 圆角胶囊、14px/22px 字号、`bg-module-platform` 底 + `border-l2` 描边、聚焦时用 `brand-primary` 环；菜单项 36px 高。"＋ 添加属性…" 用 hover 底色区分它是动作而不是字段。
    - **属性行自适应多列**：最小列宽 200px，面板宽时一行能放两个属性（`上外边距 4px`、`最小宽度 0` 并排），窄面板自动回到一列。
    - **属性字典 112 条，三种形态**：枚举型（`display`、`position`、`justify-content`…）给**中文值下拉**，写入的是 CSS 值本身；长度 / 颜色 / 阴影 / 函数型（`gap`、`margin-top`、`font-size`、`box-shadow`、`grid-template-columns`…）给**中文标签 + 自由输入框**，选中即以一个可用的种子值写入（如 `gap: 8px`），输入框的占位文本就是该属性的取值提示（如 `0 / 8px / auto`）。字典里没有的属性也不会丢：仍然按原属性名给一个自由输入框。
    - **分量形态（简写属性）**：`flex` → 放大 / 收缩 / 基准尺寸三个框；`margin` / `padding` / `inset` / `border-radius` → 上 / 右 / 下 / 左四个框（占满整行）；`gap` → 行间距 / 列间距；`aspect-ratio` → 宽 / 高。每个分量是 `名字 [值]` 的**一对、排在同一行**，其中分量名渲染为**浅底小标签**（`--dsw-alias-markdown-tag` 底 + `--dsw-alias-label-secondary` 文字 + 6px 圆角），与行标题、字段值在视觉上分开（放大 [1] 收缩 [0] 基准尺寸 [auto]、上 [8px] 右 [12px] 下 [8px] 左 [12px]），框内占位只留取值提示（如 `auto / 0 / 240px`），改动任意一个框会与其余分量重新拼成一条声明。读取时按 CSS 的简写展开规则拆分（`margin: 8px 12px` → 8px / 12px / 8px / 12px），写回时**收敛成最短等价形式**（四个都是 8px 就写回 `margin: 8px`），所以编辑一个角不会把你的样式表改得啰嗦。`border-radius` 的斜杠形式（`8px / 12px`）表达的是两个轴向，一个角一个框表达不了，因此这种写法保留为自由输入框。
    - 规则里一条声明都没有时，面板显示「这条规则还没有声明」。
  - 面板**排在代码下方**（占满容器宽度），声明与模板都按**自适应网格**铺开：声明 `repeat(auto-fill, minmax(240px, 1fr))`、模板 `minmax(104px, 1fr)`；一条规则声明很多时面板自身限高 `260px` 内滚动，不会把整个设置行撑长。
  - 最下面是**声明模板**：容器 / 横向排列 / 居中 / 网格 / 文本 / 背景 / 描边 / 阴影 / 尺寸 / 间距 / 截断 / 滚动 / 吸顶 / 隐藏 —— 点一下按 2 空格缩进追加到块内（已有内容保留）。
  - **改属性是替换，不是叠加**：同一个属性反复改只会有一条，绝不堆成 `display: flex; display: grid;`。写入走的是"逐条声明"的扫描而不是正则替换 —— 声明之间是换行分隔、最后一条常常没有分号，任何假设 `;` 分隔的做法都会失手并追加重复。
  - 块在写入前会**规范化**：若某条声明缺了结尾的 `;`（老版本模板插入留下的、或手写的），自动补上再做编辑 —— 所以那种被粘连的老文件也能被逐次修正，不需要手工清理。
  - 面板**贴着编辑器的下沿**伸缩：拖编辑器右下角的 resize 手柄，两个框一起变高，不会一大一小。
  - 选择器按钮浮在高亮层上（该层其余部分仍然点击穿透到文本框），所以点选择器不会把光标打乱。
- **格式校验**：每次渲染都扫一遍 —— 括号与注释必须闭合、每条声明必须可解析、每个值必须被引擎接受（`CSS.supports`）。有问题时状态行变红并给出**行首问题 + 总数**（如 `第 3 行 color 的值无效：notacolor`、`第 73 行 syntax 必须是带引号的字符串，例如 '' 等 3 处`），最多看 5 处；正常时状态行保持中性色。
  - **变量体检**（停顿 600ms 后跑一次，需要读文档所以是异步的）：自定义属性是继承的，所以「这个变量有没有值」是个关于**元素**的问题 —— 编辑器把每条规则的选择器在页面里匹配一遍，再从命中的元素上读该属性，读不到就在同一份问题列表里报出来（`变量 --dsl-g-shadow-card 在这条规则命中的元素上读不到`）。别的插件在**自己卡片上**定义的令牌，在卡片外面用就是这么静默失效的。两种情况故意不报：规则没命中任何元素（没得问），以及 `var(--x, 备用值)`（有备用值就没有可丢的）。
  - 同一次巡检也产出**规则大纲**里那个「命中 N 个」的数字（见下一节）。
  - **描述符块走自己的规则**：`@property --x { syntax: ''; inherits: true; initial-value: … }` 里的 `syntax` / `inherits` / `initial-value` 是 **descriptor 而不是 CSS 属性**，`CSS.supports()` 一律不认 —— 早期版本就是把它们当声明判，于是一个完全合法的 `@property` 被报成 3 处错误。现在按块类型分流：`@property` 用描述符规则校（`syntax` 必须带引号、`inherits` 只能 `true`/`false`），`@font-face` / `@page` / `@counter-style` / `@viewport` / `@font-palette-values` / `@font-feature-values` 这些描述符块整块交给引擎，其余规则照旧逐条过 `CSS.supports`。
- 注入的 `