没有满意的 Obsidian 主题？不妨自己动手做一个

最近，我正在研究使用 Obsidian，想看看大名鼎鼎的「卡片盒笔记法」是否真的能解决我读书过目就忘的困扰。不过困扰还不知道能不能解决，我就发现了新的问题。

Obsidian 有许多优点，其中一个就是自带社区主题库，用户可以随意更换样式，不再天天看千篇一律的外观。然而，尽管社区主题库里有很多主题样式，说实话，没有一个能百分之百令我满意的。

比如「Things」这个主题，我很喜欢它的简洁风格，但是它每一级的标题颜色却似乎并不遵循某种规律，甚至莫名其妙地在二级标题下多出了一条下划线，这一点让完美主义的我无比介意。

我明白，主题风格毕竟只是制作者的个人喜好，肯定是做不到让所有使用者都百分之百满意的。那么，有没有什么办法，可以让我自己来自定义主题呢？

答案是有的，Obsidian 设置中的「CSS 代码片段」这个功能就是为用户对外观进行自定义而准备的。

▍HTML 与 CSS

Obsidian 的外观本质上是由 CSS 代码所决定的。

我们可以打开 Obsidian 的窗口，按下Ctrl + Shift + I，即可开启开发者工具（Developer Tools），这个操作和在浏览器中开启开发者工具是一样的，展示出来的也同样是 HTML 文档。

HTML，全称「HyperText Markup Language」，又称为「超文本标记语言」，它的作用就是告诉浏览器这个网页该怎么渲染，比如这段文字是一级标题，这一段文字是正文，而这一段文字是链接，可以跳转别的网页。

听起来和 Obsidian 所使用的 Markdown 很像。没错，Markdown 也是一种标记语言，只不过比 HTML 更轻量级。我们可以将 Obsidian 理解成一个浏览器，它既读得懂 Markdown，也读得懂 HTML。

我们也可以在 Obsidian 笔记里写 HTML 格式的笔记，从编辑视图切换成阅读视图后，会发现它显示出来的效果和 Markdown 并无二致。

当我们在 Obsidian 使用 Markdown 语法撰写笔记时，实际上，Obsidian 是将其渲染成了 HTML 的格式。当我们使用开发者工具时，将选择元素的鼠标移动至文档外的其他地方，也是能够查看到它们的 HTML 源码的。

那么说回来，HTML 和 CSS 之间究竟是什么关系呢？可以简单理解为，HTML 用来读懂格式，CSS 用来修饰格式，比如说 CSS 可以决定正文的字体颜色是什么，字体尺寸是多少等等。

所以，当我们在 Obsidian 的设置中查看已安装的主题，打开主题文件夹后，会发现下载下来的外观其实都是 CSS 格式的文件，正是由这些 CSS 文件来决定当前 Obsidian 仓库的主题外观会长什么样。

按理来说，如果我们想要修改 Obsidian 的外观，就直接对对应的 CSS 文件进行修改，比如我现在正在使用「Things」这个主题，那么我就改「Things.css」这个文件，就可以了。

但其实这样是不妥的，一来是怕牵一发而动全身，如果我们意外改错一个地方，可能就会导致整个文件出错，进而不能正常使用，二来是主题文件如若还在更新，则可能一不小心一下就把辛苦修改的文件覆盖掉。

其实，Obsidian 已经把这些情况考虑到了，并贴心地准备好了「CSS 代码片段」这个功能，以供用户可以更进一步地自定义外观，并且不影响原外观文件，原理就是「CSS 代码片段」的优先级比原文件更高。

比如，假设原文件设置了「--h1-color」这个变量的值为绿色，并让一级标题的颜色由「--h1-color」这个变量来决定，也就是说一级标题应为绿色，但我们在自定义的 CSS 文件里将「--h1-color」这个变量的值改为红色，当 Obsidian 遇到一级标题时，它知道要去找「--h1-color」这个变量，但自定义 CSS 文件和原文件都有「--h1-color」这个变量，值却不一样。那么，谁说了算？自定义 CSS 文件说了算，最后一级标题就会显示成红色。

更多 HTML 和 CSS 知识，我推荐观看 B 站 UP 主 DasAutoooo 的入门视频，可快速对两者有个大致的了解。

▍准备工作

解释完大致的概念之后，我们就可以来到准备阶段了。

我们首先要做的，就是要给电脑安装一个 CSS 编辑器。在此，我强烈推荐使用微软开发的 Visual Studio Code。因为一个 VS Code，就可以顶无数个不同语言的编辑器，且它自身功能非常强大且实用。

第二步，我们可在 Obsidian 外观设置的页面中，找到「主题」一栏，点击文件夹图样的按钮，即可打开存放外观主题 CSS 文件的文件夹，在此文件夹中就能找到外观主题 CSS 文件。

第三步，我们可点击「CSS 代码片段」一栏右侧的文件夹按钮，在此文件夹中新建一个 CSS 文件，比如新建一个 txt 格式的文档，对其重命名，将后缀改为「.css」即可，创建成功后点击「CSS 代码片段」一栏右侧的刷新按钮就会显示此 CSS 文件，打开开关就能将效果实时应用至外观上。

请注意，Obsidian 每个仓库的外观设置都是独立的，仓库与仓库之间互不影响，所以如果我们另开了一个新的仓库，需要套用相同的外观设置，只要将自建的 CSS 文件复制到新仓库的「CSS 代码片段」文件夹中即可。

最后，我们可打开 VS Code，将原 CSS 外观文件和自建的 CSS 代码片段直接拖拽进去软件里，就能查看或修改 CSS 文件了。

一个小贴士：对于第一次使用 VS Code 的朋友们，修改完 CSS 文件后记得按 Ctrl + S 进行手动保存，或开启自动保存功能。

▍修改过程

01修改文字颜色

在「Things」这个主题中，每一级的标题并不遵循某个规律，六级标题使用了五种颜色，我始终无法理解为什么二级标题和三级标题是同一种颜色。为了我的身心健康，我第一个要改的，就是各级标题的颜色。

按住Ctrl + Shift + I，打开开发者工具，点击窗口左上角的「选择网页中的相应元素即可进行检查」，回到 Obsidian 的窗口，此时鼠标移动至任何地方都会有高亮突出显示。

我已经事先准备好了六级标题的文本，移动鼠标点选「一级标题」的字样，开发者工具窗口就会高亮显示此处的 HTML 元素。不仅如此，右侧的样式窗口会展示所有与这个 HTML 元素相关的 CSS 样式。

值得注意的是「