🌸 Bloom for Typora 24 套主题 · 当前

🌊 Bloom for DSH 15 套配色

🛡️ ui-craft 配色护栏

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

Bloom for Typora

为长期写作准备的 Typora 主题。
更安静的页面，更稳定的层级，更统一的代码与文档视觉。

预览官网 · 下载最新版本 · 🗳️ 配色投票

Bloom 是什么

Bloom 是一套面向长文写作的 Typora 主题集合，围绕三个核心目标打磨：

• 让正文更耐看，减少连续写作时的视觉疲劳。
• 让代码块、引用、表格、YAML Frontmatter 等高频模块风格统一。
• 让浅色和深色主题切换时，亮度与层次依然稳定。

当前版本为 v1.7.2（badge 由 github/v/release 动态同步）。

为什么用 Bloom

特性	说明
24 套主题矩阵	12 套浅色和 12 套深色主题，覆盖温润、克制、自然、夜间等写作场景。
OKLCH 调色	采用更接近人眼感知的色彩空间，减少主题切换时的亮度跳变。
统一模块语言	代码块、HTML Block、YAML Frontmatter、Alert 等模块共享同一套层级与圆角逻辑。
为 Typora 优化	针对 Markdown 编辑、预览阅读和深色模式对比度做过专门调整。

主题一览

12 套配色，每套都有浅色和深色（-dark）两个版本，共 24 个主题。

petal 花瓣 · petal-dark 花瓣·暗夜	mist 雾蓝 · mist-dark 雾蓝·暗夜
verdant 草木 · verdant-dark 草木·暗夜	stone 暖石 · stone-dark 暖石·暗夜
wheat 麦穗 · wheat-dark 麦穗·暗夜	ink 水墨 · ink-dark 水墨·暗夜
amber 琥珀 · amber-dark 琥珀·暗夜	lapis 青金 · lapis-dark 青金·暗夜
ripple 涟漪 · ripple-dark 涟漪·暗夜	cinnabar 丹红 · cinnabar-dark 丹红·暗夜
sage 鼠尾草 · sage-dark 鼠尾草·暗夜	spring 紫语 · spring-dark 紫语·暗夜

快速安装

1. 在 Releases 下载 Bloom-theme.zip。
2. 在 Typora 中打开 偏好设置 -> 外观 -> 打开主题文件夹。
3. 将压缩包中的所有 bloom-*.css 文件和 bloom/ 文件夹复制到主题目录。
4. 重启 Typora，或从 主题 菜单切换到 Bloom。

主题 菜单里看不到 Bloom？

• Typora 只列出直接放在主题目录里的 .css 文件。不少解压工具会多套一层 Bloom-theme/ 文件夹；若 bloom-*.css 落在里面，请把它们移到上一层，与其他主题并列。
• bloom/ 文件夹要和 .css 文件放在一起，主题字体从这里加载。
• 拷贝完成后完全退出 Typora 再重新打开。
• 每套配色分浅色、深色两个文件（如 bloom-ink.css 与 bloom-ink-dark.css），在 主题 菜单里选择需要的那一个。

最新版本（v1.7.2）

v1.7.2（2026-09-10）：

• WCAG AA 链接色护栏：6 套浅色主题的链接色补足 AA 对比度，并把 accent 纳入 CI 守门。
• CI 改用 pnpm：release-please workflow 改 pnpm 配套。

v1.7.0 起更早的关键节点：

• v1.4.0 — 编译 oklch/color-mix 到静态 sRGB 兼容老 Typora；代码块滚动 / 发版流程统一；主题 alerts / 打印清理。
• v1.5.0 — 新增 Ink / Amber / Lapis 主题 + palette wall（GitHub 配色投票面板），共 24 套。
• v1.6.0 — CJK 阅读 measure / 字距 / 作用域过渡；WCAG CI 上线。
• v1.7.0 — fluent 风格 sidebar file tree。

完整更新日志见 CHANGELOG.md。

开发与构建

本地开发

pnpm install
npm run dev

npm run dev 会按 Typora 官方 toolkit 的方式准备本地浏览器预览：拉取 typora/typora-theme-toolkit，把当前主题 CSS 复制到 html-preview/theme/test.css，并打开 toolkit 的 HTML 预览页。指定主题：

npm run dev -- wheat-dark

常用命令

• npm run build: 重新生成 dist/ 主题文件和站点主题数据。
• npm run dev: 使用官方 toolkit 路径进行本地浏览器预览与截图。
• npm run dev:site: 构建并打开官网展示页本地服务。
• npm run sync:typora: 构建后同步主题 CSS 和 bloom/ 资源到 Typora 主题目录。
• npm run dev:typora: 监听主题源码变化，自动构建并同步到 Typora 主题目录。
• npm run validate:themes: 按 mist / wheat 标准校验主题变量与新增颜色定义。
• npm run package: 生成发布包 Bloom-theme.zip。

Typora 实机调试

首次调试先在 Typora 中进入 偏好设置 -> 外观 -> 打开主题文件夹，确认主题目录存在。默认 macOS 目录为：

~/Library/Application Support/abnerworks.Typora/themes

然后在仓库中运行：

npm run dev:typora

修改 theme-src/ 后脚本会自动构建并同步到 Typora 主题目录。Typora 未刷新时，切换到其他 Bloom 主题再切回来，或重启 Typora。需要检查具体 CSS 选择器时，在 Typora 中开启调试模式后用 DevTools 查看元素。

官方 toolkit 浏览器预览

浏览器预览只作为本地调试与截图手段，不随官网部署开放：

npm run dev -- petal

脚本会把生成后的 dist/bloom-<theme>.css 写入 .cache/typora-theme-toolkit/html-preview/theme/test.css，并复制 bloom/ 资源目录。这个路径与 Typora 官方 toolkit 的推荐调试位置一致。

wheat / wheat-dark 这类生成型主题的颜色入口在 scripts/theme-list.js，构建时会自动生成主题 CSS 和站点主题数据，避免同时维护多份颜色值。主题颜色必须遵守 Theme Color Standard。

仓库结构

• theme-src/: 主题源码，包含基础样式和各主题变量。
• dist/: 构建产物，Typora 实际使用的 CSS 文件。
• bloom/: 字体等静态资源。
• scripts/: 构建、打包和站点数据脚本。
• website/、_pages/: 展示站资源。

配套

Bloom 管写字的环境。内容本身怎么写 —— 结论先行、SCQA、MECE、语气姿态 —— 见 writing-standard-skills；写完要出 PDF 或长图，见 facet。三者互不重复定义：环境 / 方法 / 渲染。

Star History

License

MIT

Author

webkubor