Typora可通过自定义CSS主题实现字体、配色、标题编号、代码块等全方位样式定制：定位主题文件夹→新建my-theme.css→设置:root变量统一配色→用CSS计数器实现标题自动编号→美化代码块与行内代码。
你想让Typora的编辑界面彻底摆脱千篇一律的默认样式，用自己调好的字体、配色、标题层级和代码块风格来提升写作沉浸感和视觉舒适度，而不是在几个预设主题里反复切换却总差那么一点感觉。
定位并进入Typora主题文件夹
打开Typora → 点击顶部菜单栏“文件” → “偏好设置”（macOS为“Typora” → “Preferences”）→ 切换到“外观”选项卡 → 点击右侧“打开主题文件夹”按钮。
系统会直接打开一个路径明确的文件夹，Windows下通常是 C:\Users\[你的用户名]\AppData\Roaming\Typora\themes，macOS下是 ~/Library/Application Support/abnerworks.Typora/themes。这个文件夹就是你所有自定义CSS的唯一落脚点，别存错位置——存到其他地方的CSS文件Typora根本不会识别。
创建并启用你的专属CSS主题
在刚打开的主题文件夹里，右键 → 新建文本文档 → 重命名为 my-theme.css（后缀必须是 .css，不能是 .txt）。
用VS Code、Sublime Text或记事本（务必另存为UTF-8编码）打开它，粘贴一段基础样式测试是否生效：
body { background-color: #f9f9f9; }
保存文件 → 关闭并重启Typora → 回到“外观”设置 → 在“主题”下拉菜单中找到并选择 my-theme（注意不带.css后缀）。如果背景变成浅灰，说明主题已成功加载。
修改核心变量实现全局配色统一
Typora现代主题普遍采用CSS自定义属性（即 :root 变量）控制全局样式，这是最安全、最高效的修改方式。在 my-theme.css 文件开头添加以下结构：
:root {<br> --bg-color: #f5f7fa;<br> --text-color: #333;<br> --code-bg-color: #2d2d2d;<br> --code-text-color: #f8f8f2;<br> --quote-bg-color: #eef2f7;<br>}
这些变量会被Typora内部样式自动引用，改一处，全文档所有对应元素同步更新。不要直接写 pre { background: #2d2d2d; }——那样容易被内置样式覆盖，且维护困难。
⚠️ 注意：如果你同时启用了OrangeHeart等第三方主题，它的CSS可能未使用这套变量体系，此时需直接覆盖其选择器，优先级要加 !important 或用更具体的选择器，比如 #write pre { background: #2d2d2d !important; }。
定制标题编号与视觉层级
第一步：启用CSS计数器实现自动编号
#write { counter-reset: h1; }<br>h1 { counter-reset: h2; }<br>h2 { counter-reset: h3; }<br>h1:before { counter-increment: h1; content: counter(h1) ". "; font-weight: bold; }<br>h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". "; }
第二步：叠加视觉强化，让层级一目了然
给h2加橙心主题标志性的左色条：h2 { border-left: 4px solid #ff6b35; padding-left: 12px; margin-top: 1.8em; }。这一步必须放在编号代码之后，否则色条会压住编号数字。
第三步：微调h3缩进与字体粗细，避免和正文混淆：h3 { text-indent: 0.5em; font-weight: 600; color: #555; }。这里不加编号，因为三级以下标题通常不再需要数字索引，强行编号反而干扰阅读节奏。
美化代码块与行内代码
方法一：基础高亮（推荐新手）
直接覆盖Typora默认代码样式：
code { background: #eef2f7; padding: 2px 6px; border-radius: 3px; font-family: "Fira Code", monospace; }<br>pre { background: #2d2d2d; color: #f8f8f2; padding: 16px; border-radius: 6px; overflow-x: auto; }
方法二：添加行号与阴影（需配合CSS伪元素）
在 pre 内部插入行号逻辑较复杂，建议先用轻量方案：pre { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }。这行代码能让代码块从文档中自然“浮起”，比纯色背景更有层次感，且不增加渲染负担。
方法三：区分语言类型（进阶）
利用Typora导出时保留的 language class，例如 ```python 块会生成
pre.language-python { border-left: 3px solid #4B8BBE; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
