typora-Bloom-theme

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

typora-Bloom-theme

★ 90 Open GitHub ↗

A calm Typora theme for long-form writing, focused reading, and aesthetic markdown publishing.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![banner](https://cdn.jsdelivr.net/gh/webkubor/picx-images-hosting@master/blog/projects/typora-bloom-theme-banner/cs-token4ai-1784197429494387000.png)

<h1 align="center">Bloom for Typora</h1>

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

<a href="https://bloom.webkubor.online">预览官网</a> ·
 <a href="https://github.com/webkubor/typora-Bloom-theme/releases/latest">下载最新版本</a> ·
 <a href="https://github.com/webkubor/typora-Bloom-theme/issues/22">🗳️ 配色投票</a>

## Bloom 是什么

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

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

当前版本为 `v1.3.5`。

## 为什么用 Bloom

## 主题一览

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

<table>
 <tr>
 <td align="center" width="50%">
 <img src="website/assets/screenshots/petal.png" alt="petal 花瓣" />
 <code>petal</code> 花瓣 · <code>petal-dark</code> 花瓣·暗夜
 </td>
 <td align="center" width="50%">
 <img src="website/assets/screenshots/mist-dark.png" alt="mist-dark 雾蓝·暗夜" />
 <code>mist</code> 雾蓝 · <code>mist-dark</code> 雾蓝·暗夜
 </td>
 </tr>
 <tr>
 <td align="center" width="50%">
 <img src="website/assets/screenshots/verdant.png" alt="verdant 草木" />
 <code>verdant</code> 草木 · <code>verdant-dark</code> 草木·暗夜
 </td>
 <td align="center" width="50%">
 <img src="website/assets/screenshots/stone-dark.png" alt="stone-dark 暖石·暗夜" />
 <code>stone</code> 暖石 · <code>stone-dark</code> 暖石·暗夜
 </td>
 </tr>
 <tr>
 <td align="center" width="50%">
 <img src="website/assets/screenshots/wheat.png" alt="wheat 麦穗" />
 <code>wheat</code> 麦穗 · <code>wheat-dark</code> 麦穗·暗夜
 </td>
 <td align="center" width="50%">
 <img src="website/assets/screenshots/ink.png" alt="ink 水墨" />
 <code>ink</code> 水墨 · <code>ink-dark</code> 水墨·暗夜
 </td>
 </tr>
 <tr>
 <td align="center" width="50%">
 <img src="website/assets/screenshots/amber-dark.png" alt="amber-dark 琥珀·暗夜" />
 <code>amber</code> 琥珀 · <code>amber-dark</code> 琥珀·暗夜
 </td>
 <td align="center" width="50%">
 <img src="website/assets/screenshots/lapis.png" alt="lapis 青金" />
 <code>lapis</code> 青金 · <code>lapis-dark</code> 青金·暗夜
 </td>
 </tr>
 <tr>
 <td align="center" width="50%">
 <img src="website/assets/screenshots/ripple-dark.png" alt="ripple-dark 涟漪·暗夜" />
 <code>ripple</code> 涟漪 · <code>ripple-dark</code> 涟漪·暗夜
 </td>
 <td align="center" width="50%">
 <img src="website/assets/screenshots/cinnabar.png" alt="cinnabar 丹红" />
 <code>cinnabar</code> 丹红 · <code>cinnabar-dark</code> 丹红·暗夜
 </td>
 </tr>
 <tr>
 <td align="center" width="50%">
 <img src="website/assets/screenshots/sage-dark.png" alt="sage-dark 鼠尾草·暗夜" />
 <code>sage</code> 鼠尾草 · <code>sage-dark</code> 鼠尾草·暗夜
 </td>
 <td align="center" width="50%">
 <img src="website/assets/screenshots/spring.png" alt="spring 紫语" />
 <code>spring</code> 紫语 · <code>spring-dark</code> 紫语·暗夜
 </td>
 </tr>
</table>

## 快速安装

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

## 本次版本更新

`v1.3.5` 主要包括：

- 新增麦穗 (Wheat) 浅色/深色主题。
- 修复深色模式标题栏、快速打开列表、源码模式对比度问题。
- 修复表格列宽拖拽 UI 错位。
- 开发工具链增强，统一发版流程。

完整更新日志见 [CHANGELOG.md](CHANGELOG.md)。

<details>
<summary>开发与构建</summary>

### 本地开发

```bash
pnpm install
npm run dev
```

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

```bash
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 目录为：

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

然后在仓库中运行：

```bash
npm run dev:typora
```

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

### 官方 toolkit 浏览器预览

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

```bash
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](docs/theme-color-standard.md)。

### 仓库结构

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

</details>

## License

[MIT](LICENSE)

## Author

[webkubor](https://github.com/webkubor)

typora-Bloom-theme

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README