# dsh-bloom-theme 中文文档

规范地址：https://npmcn.com/package/dsh-bloom-theme/

版本：0\.22\.0
npm 元数据更新时间：2026-11-03T11:46:46.846Z
中文译文更新时间：2026-11-03T13:56:33.791Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/dsh-bloom-theme
原文对照：https://npmcn.com/package/dsh-bloom-theme/?lang=original
项目主页：https://github.com/webkubor/dsh-bloom-theme#readme
源码仓库：https://github.com/webkubor/dsh-bloom-theme

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：585 kB，26 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-09-17T11:42:36.121Z
- 最新版本发布：2026-11-03T11:46:46.403Z
- 已发布版本数：27（近 12 个月 27 个）

## 中文简介

Bloom for DSH — 玻璃+莫兰迪主题。12 套 OKLCH 配色（黛蓝/朱砂/桃夭/天青/竹青/赭石/青金/琥珀/落霞/青莲/草色/橙黄），明暗自适应；磨砂玻璃面板默认常开；微动效 + 版本/更新指示。零依赖、TypeScript、WCAG AA。

## 安装

```sh
npm install dsh-bloom-theme
```

也可以使用：`pnpm add dsh-bloom-theme`、`yarn add dsh-bloom-theme`、`bun add dsh-bloom-theme`

## README

![Bloom for DSH](https://img.webkubor.online/projects/dsh-bloom-theme/bloom-banner.png)

# 🌊 Bloom for DSH

**12 套莫兰迪中国风主题，配色全部实测达 WCAG AA**  
Ten Morandi palettes for DeepSeek Harness — every one measured against WCAG AA.

<table><tbody><tr><td align="center"><a href="https://github.com/webkubor/typora-Bloom-theme" rel="nofollow noopener noreferrer">🌸 Bloom for Typora</a><br><sub>24 套主题</sub></td><td align="center"><b>🌊 Bloom for DSH</b><br><sub>12 套配色 · 当前</sub></td><td align="center"><a href="https://github.com/webkubor/contrast-guard" rel="nofollow noopener noreferrer">🛡️ contrast-guard</a><br><sub>配色护栏</sub></td></tr></tbody></table>

同一套莫兰迪设计语言：两个宿主的主题，加一个守住它们配色的工具。  
_One Morandi design language — two themes, and the tool that keeps their colors honest._

[![npm](https://img.shields.io/npm/v/dsh-bloom-theme?style=for-the-badge&color=A873C4&logo=npm)](https://www.npmjs.com/package/dsh-bloom-theme) [![downloads](https://img.shields.io/npm/dm/dsh-bloom-theme?style=for-the-badge&color=92a8b3)](https://www.npmjs.com/package/dsh-bloom-theme) ![License](https://img.shields.io/github/license/webkubor/dsh-bloom-theme?style=for-the-badge&color=5fa8b2)

[![Awesome DSH Plugin](https://awesome-dsh-plugin.com/badge.svg)](https://awesome-dsh-plugin.com/) ![WCAG AA](https://img.shields.io/badge/WCAG-AA-6a9955?style=for-the-badge) ![zero dependency](https://img.shields.io/badge/dependencies-0-92a8b3?style=for-the-badge)

**中文** | [English](https://npmcn.com/package/dsh-bloom-theme/README.en.md)

把 [Bloom](https://github.com/webkubor/typora-Bloom-theme)（90★ Typora 主题）的莫兰迪质感搬进 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness)。  
**玻璃 + 莫兰迪**：12 套明暗双主题，磨砂玻璃面板，顶栏一键切换， 连 AI 思考的等待也跟主题一起呼吸。

## 📌 桌面端优先 —— 关于 DSH Web UI 的说明

**结论：Bloom 接下来的迭代优先兼容 DSH 桌面端；Web UI 不再主动适配，会逐步淡出。**

（0.16.0 及更早的版本是按 DSH Web UI 做的；**0.17.0 起适配桌面端**——这一版补上了 DSH 0.2.0 的选择器适配，并加了能自动发现这类失效的漂移门禁。）当前桌面应用使用 0.2.1-rc.5 时，切换器的版本提示读取桌面应用版本，而不是内嵌 DSH 包的旧版本；漂移门禁也优先检查本机已安装的桌面版本。

DSH 有了桌面端应用，我自己日常已经切过去了。主题这类东西的价值长在 UI 上——宿主怎么改界面， 配色和玻璃就得跟着长——所以迭代重心跟着挪到桌面端。

具体到你会遇到什么：

| 你在用 | 会发生什么 |
| --- | --- |
| **桌面端** | 新配色、新动效、视觉修复都优先在这里出。我每天都在用它，界面变了我就会跟。 |
| **Web UI** | 保持现状可用，但不再主动适配 DSH Web 端的新变化；DSH 若改了结构导致某处显示不对，我不一定及时跟。 |

两点补充，省得你按标题猜：

-   **已经装上的版本不会失效。** 停的是「跟着新界面继续长」，不是「把你现在能用的弄坏」。
-   如果你只能用 Web UI，欢迎开 issue 把场景说清楚——真实需求会改变我的判断，这句不是客套。

> **上一个版本（0.16.0）改了什么**：在跑的步骤接管主题色（扫光从灰换成 Bloom 三色）； 轮次状态的三色光谱重新接上（DSH 改名后它静默消失了）；修浅色模式下消息气泡没画出来的玻璃边； 修子串选择器自叠造成的「盒中盒」与「直角黑块 chip」；撤掉在跑步骤上的胶囊底色——状态不该靠盒子说话。

## 一句话

**给 DeepSeek Harness 的「玻璃 + 莫兰迪」主题。** 12 套配色，明暗自适应，顶栏一键切换；面板是真正的磨砂玻璃（半透 + backdrop 模糊 + 玻璃边缘）， 配色是低饱和莫兰迪（OKLCH 调色、WCAG AA），全站统一克制的微动效，零运行时依赖，前端 TypeScript 构建。

> 莫兰迪的气质不在 `--accent`，在 `--accent-rgb`。

## 快速开始

-   **DSH 桌面端**：应用内「插件管理」安装，重载页面即可 —— 顶栏右上角出现「黛蓝 ▾」按钮，12 套配色、明暗、壁纸都在那里切换。
-   **自建 profile（CLI / 服务器 / Web）**：`dsh plugin --profile <你的 profile> add dsh-bloom-theme`，接进 boot graph 后重启 DSH，三步细节见下方[安装](https://npmcn.com/package/dsh-bloom-theme/#readme-%E5%AE%89%E8%A3%85)。

## 🏆 为什么用它

|  | DSH 原生 | 普通主题插件 | **Bloom for DSH** |
| --- | --- | --- | --- |
| 配色数量 | 1 套 | 3-5 套 | **12 套莫兰迪，明暗各一套** |
| 配色依据 | 手工挑色 | 手工挑色 | **OKLCH 感知均匀调色** |
| 对比度 | 未声明 | 未声明 | **明暗主色对全部实测 ≥ 4.5:1（WCAG AA）** |
| 面板质感 | 实色 | 实色 / 简单半透 | **真磨砂玻璃（半透 + backdrop 模糊 + 玻璃边缘）** |
| 切换方式 | — | 改配置文件 | **顶栏一键切换，即时生效** |
| 动效 | 固定 | 无 / 硬编码 | **跟随主题三色光谱，支持 prefers-reduced-motion** |
| 运行时开销 | — | 常驻进程 / 依赖 | **零依赖，只注入 CSS 变量** |

## 截图

![Bloom · Sage (light)](https://img.webkubor.online/projects/dsh-bloom-theme/ui-sage-light.png) 竹青·亮色 —— 磨砂玻璃面板 + 莫兰迪绿，选中会话行以当前主题高亮

**12 套配色（亮色）**：点击任意一套，全站主色 / 背景 / 玻璃 / 动效色相一起切换。

<table><tbody><tr><td align="center">☁️ 黛蓝 Mist<br><img src="https://img.webkubor.online/projects/dsh-bloom-theme/ui-mist-light.png" width="100%" loading="lazy" decoding="async" referrerpolicy="no-referrer"></td><td align="center">🧧 朱砂 Cinnabar<br><img src="https://img.webkubor.online/projects/dsh-bloom-theme/ui-cinnabar-light.png" width="100%" loading="lazy" decoding="async" referrerpolicy="no-referrer"></td><td align="center">🌸 桃夭 Petal<br><img src="https://img.webkubor.online/projects/dsh-bloom-theme/ui-petal-light.png" width="100%" loading="lazy" decoding="async" referrerpolicy="no-referrer"></td><td align="center">🌊 天青 Ripple<br><img src="https://img.webkubor.online/projects/dsh-bloom-theme/ui-ripple-light.png" width="100%" loading="lazy" decoding="async" referrerpolicy="no-referrer"></td><td align="center">🌿 竹青 Sage<br><img src="https://img.webkubor.online/projects/dsh-bloom-theme/ui-sage-light.png" width="100%" loading="lazy" decoding="async" referrerpolicy="no-referrer"></td></tr><tr><td align="center">🧱 赭石 Stone<br><img src="https://img.webkubor.online/projects/dsh-bloom-theme/ui-stone-light.png" width="100%" loading="lazy" decoding="async" referrerpolicy="no-referrer"></td><td align="center">🔷 青金 Lapis<br><img src="https://img.webkubor.online/projects/dsh-bloom-theme/ui-lapis-light.png" width="100%" loading="lazy" decoding="async" referrerpolicy="no-referrer"></td><td align="center">🍯 琥珀 Amber<br><img src="https://img.webkubor.online/projects/dsh-bloom-theme/ui-amber-light.png" width="100%" loading="lazy" decoding="async" referrerpolicy="no-referrer"></td><td align="center">🌅 落霞 Afterglow<br><img src="https://img.webkubor.online/projects/dsh-bloom-theme/ui-aurora-light.png" width="100%" loading="lazy" decoding="async" referrerpolicy="no-referrer"></td><td align="center">🪷 青莲 Lavender<br><img src="https://img.webkubor.online/projects/dsh-bloom-theme/ui-lavender-light.png" width="100%" loading="lazy" decoding="async" referrerpolicy="no-referrer"></td></tr></tbody></table>

**每套都有对应暗色**（示例：琥珀·暗色）：

![Bloom · Amber (dark)](https://img.webkubor.online/projects/dsh-bloom-theme/ui-amber-dark.png)

## 安装

> **桌面端**：在应用内的插件管理里安装、升级。桌面 profile 由应用独占托管， 命令行的 `dsh plugin --profile desktop ...` 会直接报 `profile "desktop" is managed exclusively by the Electron application` —— 不是权限问题，是设计如此。

自建 profile（CLI / 服务器 / web）的装法

```bash
# 1) 装进你的 profile（profile 名按自己的改）
dsh plugin --profile <你的 profile> add dsh-bloom-theme

# 2) 接进 boot graph：把 "dsh-bloom-theme" 加进
#    ~/.dsh/profiles/<你的 profile>/package.json 的 dsh.profile.bundles 数组

# 3) 重启 DSH
```

装完刷新页面，顶栏右上角会出现「黛蓝 ▾」主题按钮。点击展开即可在 **12 套配色**间切换， 下拉底部显示当前版本号；npm 上有更新的版本时会亮一个 `↑ vX` 徽标（点它跳 Release 页）。

## 特性

| 特性 | 说明 |
| --- | --- |
| **磨砂玻璃面板（默认常开）** | 半透底 + `backdrop-filter` 模糊 + 玻璃边缘（顶部亮高光 / 半透描边 / 柔和外辉），明暗两档透明度自适应 |
| **12 套莫兰迪配色** | 黛蓝 / 朱砂 / 桃夭 / 天青 / 竹青 / 赭石 / 青金 / 琥珀 / 落霞 / 青莲 / 草色 / 橙黄，每套明暗双主题，一键切换 |
| **界面语言** | 面板里 中文 / English / Русский 一键切换，没手动选过时沿用原来的浏览器语言自动判断；只换文案，配色与对比度结论一概不动 |
| **双轨配色** | 可读轨保对比度（文字/按钮），气质轨专供氛围渐变，两轨分工不混用 |
| **微交互动效** | 菜单入场、选中态色条滑入、hover / 按压反馈；统一时长与缓动 token，全站一致 |
| **主题色推理动效** | `Deep diving…` 以当前主题三色光谱流动，不再固定 DeepSeek 蓝；`prefers-reduced-motion` 下自动静止 |
| **版本 / 更新提示** | 下拉底部显示当前版本；npm 有新版亮「↑ vX」；离版较旧时右下角弹更新横幅，桌面端提示在侧栏「插件」管理中更新 |
| **OKLCH 调色 + WCAG AA** | 感知均匀色彩空间，明暗切换不跳变；全部明暗主色对实测 ≥ 4.5:1 |
| **零依赖 · 纯 CSS 变量驱动** | 只注入 CSS 变量 + 少量切换逻辑，几乎零运行时开销 |
| **不抢占原生控件** | 切换器挂进 DSH 顶栏工具区，与原生按钮并排共存 |
| **TypeScript 构建** | `src/` 10 个模块 → node 侧 `tsc`（ESM）+ 浏览器侧 `esbuild`（IIFE 单文件）；`build / deploy / check / preflight` 一键脚本 |

## 设计原理：双轨色

Bloom 的核心不是「换个颜色」，而是一套**莫兰迪质感语言**：低饱和的氛围渐变、冷调的发光细线、 长距柔和的投影、克制的圆角与间距。

最容易被忽略（也最容易被做崩）的是**双轨色**：

-   **可读轨 `--bloom-accent`** —— 被刻意加深过，为了过 WCAG，用在文字 / 按钮 / 选中态；
-   **气质轨 `--accent-rgb`** —— 真正的莫兰迪色（低饱和、发灰），只用于大面积氛围渐变、冷光细线。

原版 14 处渐变全部用气质轨，从不用可读轨铺面。一旦把可读色拿去刷大面积， 桃夭就会从藕粉变成荧光洋红——莫兰迪感就没了。这个插件把两轨完整搬过来， 并在 `contrast-guard`（同系列工具）里用护栏守住「主色 + 底色」的对比度。

## 开发 / 构建（TypeScript）

```bash
npm install
npm run typecheck    # tsc --noEmit，全量类型检查
npm run build        # typecheck → tsc 出 lib/index.js → esbuild 出 lib/client.js
npm run deploy       # 门禁 → 备份 → 装进桌面端 desktop profile（不过门禁不部署）
npm run rollback     # 起不来时：恢复上一次 deploy 前 / rollback:npm 装回正式版
npm run dsh:status   # 现在装的是哪个版本、是不是开发版、近 24h 崩溃
npm run dev          # build + watch（每次保存先过门禁，不过不同步）
npm run package      # 一键打包（npm pack → .tgz）
npm run check        # 6 组静态闸门 + contrast-guard（每次提交都跑）
npm run preflight    # 发版前检查：版本五方一致 / git 状态 / 收录同步
```

源码 `src/` 是 10 个模块（`meta` · `appearance` · `palette` · `tokens` · `css/` · `dom` · `drag` · `version` · `switcher` · `client`），DSH 加载的是 `lib/` 里的产物。

**构建是双轨的**，两侧对模块格式的要求正好相反：

| 产物 | 谁编译 | 格式 | 为什么 |
| --- | --- | --- | --- |
| `lib/index.js`（node 侧） | `tsc` | **ESM** | cordis 的 plugin loader 按 ESM 读它 |
| `lib/client.js`（浏览器侧） | `esbuild` | **IIFE 单文件** | DSH 的插件 client.js 是当 classic script 执行的，出现 `import`/`export` 直接语法错误 |

所以浏览器侧源码可以随意拆模块，产物必须 bundle 回一个自包含文件。

版本号由 release-please 在 release PR 里连同 `package.json` 一起 bump（靠 `src/meta.ts` 行尾的 `x-release-please-version` 标记）；`scripts/sync-version.mjs` 只是本地 dev 的兜底同步，不在发布路径上。改动详见 [CONTRIBUTING](https://npmcn.com/package/dsh-bloom-theme/CONTRIBUTING.md)。

## 常见问题

**主题没生效？** 先硬刷新一次（`Cmd/Ctrl + Shift + R`）。若页面提示 `Failed to load plugins`， 说明该版本的 client 没能注册，请确认 `dsh plugin --profile <name> add` 那步无误，或换用最新版。

**能自定义颜色吗？** 目前通过「变体」选择整套色系；单色自定义在规划中（见 Roadmap）。

## 贡献 / 开源

-   加一个新配色：在 `src/client.ts` 的 `PALETTE` / `VARIANTS` / `VARIANT_LABELS` 里加一项即可， 其余（玻璃、动效、选中态、对比度护栏）全部自动跟上。
-   请先跑 `npm run build && npm run check`，确认 `contrast-guard` 全部达标再提 PR。
-   欢迎提 issue / PR / 好的想法。

## 支持

如果 Bloom 让你的 DSH 用起来更舒服，欢迎留下一颗 ⭐，或请我喝杯咖啡（赞助入口在下面的 [Sponsor](https://github.com/sponsors/webkubor) / 面板菜单里也有一处）。

## 🧩 DSH 插件全家桶

![DSH 插件全家桶：主题美化 / 模型管理](https://img.webkubor.online/projects/dsh-plugins/dsh-plugins-family.png)

[🎨 主题美化](https://github.com/webkubor/dsh-bloom-theme) · [⚡ 模型管理](https://github.com/webkubor/dsh-llm-hub)

一行装齐（只需 Node.js），装完重启 DSH 即可：

```bash
PROFILE=<你的 profile>
npx -y @deepseek-ai/dsh plugin --profile "$PROFILE" add dsh-bloom-theme @dsh-plugins/dsh-llm-hub && PROFILE="$PROFILE" node -e 'const f=(process.env.DSH_HOME||require("os").homedir()+"/.dsh")+"/profiles/"+process.env.PROFILE+"/package.json",p=require(f),b=p.dsh.profile.bundles;for(const n of Object.keys(p.dependencies))if(/^(dsh-bloom-theme|@dsh-plugins\/)/.test(n)&&!b.includes(n))b.push(n);require("fs").writeFileSync(f,JSON.stringify(p,null,2)+"\n")'
```

* * *

## Star History

[![Star History Chart for webkubor/dsh-bloom-theme](https://api.star-history.com/svg?repos=webkubor/dsh-bloom-theme&type=Date)](https://www.star-history.com/#webkubor/dsh-bloom-theme&Date)

## License

[MIT](https://npmcn.com/package/dsh-bloom-theme/LICENSE) — 借用 / 修改请保留版权声明。配色参考自 [typora-Bloom-theme](https://github.com/webkubor/typora-Bloom-theme)。

## 常见问题

### dsh-bloom-theme 是什么？

Bloom for DSH — 玻璃\+莫兰迪主题。12 套 OKLCH 配色（黛蓝/朱砂/桃夭/天青/竹青/赭石/青金/琥珀/落霞/青莲/草色/橙黄），明暗自适应；磨砂玻璃面板默认常开；微动效 \+ 版本/更新指示。零依赖、TypeScript、WCAG AA。

### 如何安装 dsh-bloom-theme？

在项目目录运行 npm install dsh-bloom-theme，或使用 pnpm add / yarn add / bun add。

### dsh-bloom-theme 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### dsh-bloom-theme 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### dsh-bloom-theme 可以商用吗？

dsh-bloom-theme 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### dsh-bloom-theme 还在维护吗？

最新版本 0\.22\.0 发布于 2026/11/03（今天）；至今共发布 27 个版本，其中过去 12 个月发布了 27 个；首次发布于 2026/09/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。