Markdown Theme Hub

🎨 收录 Markdown 主题资源文件，直接下载使用

• 来源状态总表：themes/SOURCES.md
• 收录进度台账：themes/THEME_INVENTORY.md

---

⚡ 快速开始

方式一：直接下载

# 克隆仓库
git clone https://github.com/kaelinda/markdown-theme-hub.git
cd markdown-theme-hub

# Typora 主题目录
themes/typora/

# 内容平台主题目录
themes/content-platform/

# 复制到你需要的编辑器主题目录
# Typora: 打开偏好设置 → 外观 → 打开主题文件夹
# 复制 themes/typora/*.css 到 Typora 主题目录

方式二：使用下载脚本

# 列出可用主题
./download-theme.sh list

# 下载单个主题
./download-theme.sh vue

# 下载所有主题
./download-theme.sh all

方式三：在线预览主题

# 方式 1: 本地打开预览页面
open preview.html

# 方式 2: 使用简单 HTTP 服务器
python3 -m http.server 8080
# 然后访问 http://localhost:8080/preview.html

# 方式 3: GitHub Pages 在线预览
# 访问 https://kaelinda.github.io/markdown-theme-hub/preview.html

预览页面功能：

• 🎨 主题切换：实时预览所有主题效果
• 📂 分类浏览：按类别筛选（内容平台、Typora、极简、Apple 风格、代码高亮）
• 🌓 暗色模式：自动适配暗色主题背景
• 💾 记忆选择：自动保存上次浏览的分类与主题，下次打开页面时恢复（详见下方 💾 偏好记忆 (localStorage)）

---

💾 偏好记忆 (localStorage)

预览页面 (preview.html) 会将你最近一次选择的分类与主题写入浏览器 localStorage，下次打开时自动恢复，不需要任何登录或后端服务。

存储位置

记忆数据存放在打开 preview.html 的那个浏览器域 (origin) 的 localStorage 中：

• 本地直接打开：file:// 协议下，每个浏览器独立保存
• 本地服务器：例如 http://localhost:8080，按 host:port 隔离
• GitHub Pages：https://kaelinda.github.io 域下保存

存储字段

Key	类型	含义	默认值
preview-category	string	当前选择的分类 ID	content-platform
preview-theme	string	当前主题 CSS 文件名（含子路径）	simple.css

preview-category 取值范围：content-platform / typora / minimal / apple-platform / code-highlight。

preview-theme 是 CSS 文件名，例如 simple.css、apple-notes-light.css，代码高亮分类下会带子目录前缀，如 prism/prism-vsc-dark-plus.css。

读写时机

• 读取（页面初始化时）：init() 调用 localStorage.getItem('preview-category') 与 localStorage.getItem('preview-theme')，缺失时回退到默认值。
• 写入（每次切换主题时）：applyTheme() 调用 localStorage.setItem(...) 同步保存当前选择。
• 降级行为：如果某次升级后保存的主题已不在主题列表中（例如主题被移除或重命名），页面会自动回退到该分类的第一个主题，不会报错。

清除偏好

如果你想恢复到默认主题（simple.css），可在浏览器开发者工具的 Console 中执行：

localStorage.removeItem('preview-category');
localStorage.removeItem('preview-theme');
location.reload();

或者直接清空整个站点 / 文件来源的本地存储：浏览器设置 → 隐私 → 清除浏览数据 → 仅勾选"站点数据"。

隐私说明

• 偏好仅保存在你本地的浏览器中，不会上传到任何服务器
• 仓库不内置任何分析、埋点或第三方脚本
• 切换浏览器或清除浏览数据会自动重置为默认主题

---

📦 已收录主题

Typora 编辑器主题

主题	文件	风格	来源
Vue	vue.css	💚 Vue 文档风格	blinkfox/typora-vue-theme
Vue Dark	vue-dark.css	💚 Vue 暗色模式	blinkfox/typora-vue-theme
GitHub Night	github-night.css	🐙 GitHub Dark	kinoute/typora-github-night-theme
Lapis	lapis.css	💙 清爽蓝色调	YiNNx/typora-theme-lapis
Autumnus	autumnus.css	🍂 中文优化	Soanguy/typora-theme-autumnus
Notion Light Enhanced	notion-light-enhanced.css	📝 长文发布 / 博客正文 / Notion 风格	adrian-fuertes/typora-notion-theme
Dracula ⭐新增	dracula.css	🧛 暗色主题	dracula/typora
One Dark ⭐新增	onedark.css	🌑 Atom One Dark	sweatran/typora-onedark-theme
Drake Dark ⭐新增	drake-dark.css	🌑 简约暗色	liangjingkanji/DrakeTyporaTheme
Drake Ayu ⭐新增	drake-ayu.css	🌑 Ayu 暗色	liangjingkanji/DrakeTyporaTheme
Drake Material ⭐新增	drake-material.css	🌑 Material 暗色	liangjingkanji/DrakeTyporaTheme
Cobalt ⭐新增	cobalt.css	🌑 Cobalt 暗色	elitistsnob/typora-cobalt-theme
Forest ⭐新增	forest.css	🌲 森林暗色	sylviaxgj/typora-forest-theme

公众号/内容平台主题 ⭐用户选择

主题	文件	推荐度	适用场景
锤子便签	smartisan.css	⭐⭐⭐⭐⭐	长文阅读、温暖风格
Typo	typo.css	⭐⭐⭐⭐	中文排版、公众号文章
Heti（赫蹏） ⭐新增	heti.min.css	⭐⭐⭐⭐⭐	中文专属优化、古文诗词、竖排
Simple.css	simple.css	⭐⭐⭐⭐⭐	中文长文、技术文章、classless
Tufte CSS	tufte.css	⭐⭐⭐⭐⭐	学术论文、技术文章、深度阅读
LaTeX.css	latex.css	⭐⭐⭐⭐	学术风格、技术博客、LaTeX 视觉
锤子便签暗色	smartisan-dark.css	⭐⭐⭐⭐	夜间阅读
GitHub Light	github-light.css	⭐⭐⭐	技术博客、开发者文档
GitHub Dark	github-dark.css	⭐⭐⭐	暗色主题、夜间阅读
Sakura	sakura.css	⭐⭐⭐⭐	极简长文、独立博客、纯阅读页
Water Light	water.css	⭐⭐⭐⭐	通用内容页、博客正文、低配置站点

用户选择：锤子便签风格（简洁优雅，移动端友好）

推荐安装方式：mdnice 一键导入

详见 公众号主题安装方案

极简主题（Classless CSS）⭐新增

无装饰、无 JS 依赖、轻量级，零 class 即可美化 HTML

主题	文件	大小	Stars	适用场景
MVP.css	mvp.css	10KB	5K+	快速原型、现代设计、组件丰富
new.css	new.min.css	4.8KB	4K+	简单博客、Markdown 渲染、暗色模式
sp.css	sp.css	1.8KB	966	纯阅读页、最轻量、暗色模式
concrete.css	concrete.min.css	3.1KB	636	表单页面、文档、简约设计

特点：

• ✅ 无需 class，直接美化 HTML
• ✅ 零 JavaScript 依赖
• ✅ 支持暗色模式（prefers-color-scheme）
• ✅ 极小体积，秒级加载
• ✅ 适合快速原型、纯阅读页、技术文档

推荐场景：

• 快速原型开发 → mvp.css
• 简单博客/Markdown 渲染 → new.min.css
• 纯阅读页（最轻量）→ sp.css
• 表单/文档页面 → concrete.min.css

详见 极简主题方案

Apple 风格主题 ⭐新增

主题	文件	类型	推荐度	适用场景
Apple Notes Light	apple-notes-light.css	inspired-original	⭐⭐⭐⭐⭐	公众号长文、知识内容、产品文档
Cupertino Clean	cupertino-clean.css	inspired-original	⭐⭐⭐⭐	品牌文章、发布稿、视觉型内容
Apple Notes Dark	apple-notes-dark.css	inspired-original	⭐⭐⭐	夜间阅读、站外网页
Obsidian Cupertino	theme.css	source-original	-	真实上游 Obsidian 主题源文件，MIT，可追溯收录
Typora Notes Theme (Light)	notes-light.css	source-original	-	真实上游 Typora Apple Notes 主题 CSS，Apache-2.0（仅镜像 CSS 源文件）
Typora Notes Theme (Dark)	notes-dark.css	source-original	-	真实上游 Typora Apple Notes 主题 CSS，Apache-2.0（仅镜像 CSS 源文件）

我的推荐：apple-notes-light.css

为什么推荐：最稳、最耐读、最不挑平台，最接近 Apple Notes 的克制高级感。

为什么不首推其他两个：

• cupertino-clean.css 视觉更强，适合品牌稿，但不如 Notes 风格耐读
• apple-notes-dark.css 更适合站外网页，不是内容平台主流场景

重要说明：当前 Apple 目录已同时包含两类资源：

• 三套 Apple 风格启发的整理版：apple-notes-light.css / cupertino-clean.css / apple-notes-dark.css
• 一套 真实上游源文件：themes/apple-platform/obsidian-cupertino/theme.css，来源 aaaaalexis/obsidian-cupertino，MIT
• 一组 更接近 Apple Notes 的 Typora 上游 CSS：themes/apple-platform/typora-notes-theme/，来源 shakex/typora-notes-theme，Apache-2.0（仅镜像 CSS / README / LICENSE，字体资产未收录）

详见 themes/apple-platform/UPSTREAM.md、themes/apple-platform/CANDIDATES.md 与 themes/SOURCES.md。

详见 Apple 风格主题方案

代码高亮主题 ⭐新增

专为技术文档、开发者博客、API 文档设计

主题	文件	风格	来源
VS Code Dark+	prism-vsc-dark-plus.css	🌑 VS Code 默认暗色	PrismJS/prism-themes
Atom Dark	prism-atom-dark.css	🌑 Atom 编辑器暗色	PrismJS/prism-themes
One Dark	prism-one-dark.css	🌑 Atom One Dark	PrismJS/prism-themes
Darcula	prism-darcula.css	🌑 IntelliJ Darcula	PrismJS/prism-themes
GitHub Colors	prism-ghcolors.css	☀️ GitHub 语法高亮	PrismJS/prism-themes

重要说明：

• 这些主题仅用于代码块语法高亮，不包含完整的 Markdown 文档样式
• 需要配合 content-platform/ 目录下的完整文档主题使用
• 需要配合 Prism.js 库使用
• 所有主题均为 MIT 许可

推荐组合：

• 技术博客：simple.css + prism-vsc-dark-plus.css
• GitHub 风格：github-light.css + prism-ghcolors.css
• 暗色主题：github-dark.css + prism-one-dark.css
• 学术风格：tufte.css + prism-ghcolors.css

详见 代码高亮主题方案

---

🎨 快速推荐

场景	推荐主题
公众号文章	typo.css + smartisan.css + simple.css
中文专属优化	heti.min.css / typo.css / autumnus.css
古文/诗词/竖排	heti.min.css（赫蹏，专为中文设计）
技术博客	github-light.css / simple.css / tufte.css / latex.css / autumnus.css
技术文档 / API 文档	simple.css + prism-vsc-dark-plus.css / github-light.css + prism-ghcolors.css
开发者博客	simple.css + prism-one-dark.css / github-dark.css + prism-atom-dark.css
README / 项目文档	github-light.css + prism-ghcolors.css
学术论文 / 深度阅读	tufte.css / latex.css
夜间阅读	github-dark.css / smartisan-dark.css / simple.css（暗色模式）
中文文档	typo.css / simple.css / autumnus.css / heti.min.css
独立博客 / 长文阅读	simple.css / sakura.css / water.css / tufte.css
Typora 长文写作 / 发布前预览	notion-light-enhanced.css / autumnus.css / notes-light.css
快速原型	mvp.css（极简现代，组件丰富）
纯阅读页	sp.css（1.8KB，最轻量）
极简博客	new.min.css（4.8KB，暗色模式）

---

🔧 安装主题

Typora

# 1. 下载主题 CSS 文件到本地
# 2. 打开 Typora → 偏好设置 → 外观 → 打开主题文件夹
# 3. 复制 CSS 文件到主题文件夹
# 4. 重启 Typora，从菜单选择主题

公众号/网页使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>我的文章</title>
  <!-- 基础重置 -->
  <link rel="stylesheet" href="normalize.css">
  <!-- 选择一个主题 -->
  <link rel="stylesheet" href="smartisan.css">
</head>
<body>
  <article class="markdown-body">
    <h1>标题</h1>
    <p>内容...</p>
  </article>
</body>
</html>

---

🤝 贡献主题

欢迎提交 PR 添加更多主题资源文件！

贡献方式：

1. Fork 本仓库
2. 添加主题 CSS 文件到对应目录
3. 更新 README.md 主题列表
4. 提交 PR

注意事项：

• 确保主题有开源许可
• 在 commit message 中注明原作者和来源
• 文件命名使用小写加连字符（如 vue-dark.css）

---

📄 许可证

本仓库仅收集主题资源文件，各主题版权归原作者所有。 具体许可证请查看各主题的原仓库。