如何在不懂 CSS 的情况下魔改 Typora 主题

type

status

date

slug

summary

前期准备

一个基础主题：毫无疑问，都说了不会写 CSS 了。我选择的依旧是最喜欢的 Lapis 主题。

VS Code 或者其他能编辑 CSS 代码的 IDE

（Optional）AI 助手，例如 ChatGPT 和 Github Copilot。

第一步：确定你需要的效果

魔改的目的是让已有的东西更好地适应我们的需要。那你首先就得清楚自己想要什么样式。

以我为例，我的要求如下：

字体：换上我最喜欢的霞鹜文楷。

界面颜色：调得柔和一些，Lapis 原本的白色有点刺眼。

标题样式：间距统一；二级标题样式修改；低级标题字体大小调整；二到六级标题加上标注，等等。

引用块：样式调整，去掉左侧的 bar，换成另一个配饰。

代码高亮：采取更加自然柔和的配色方案。

第二步：观察主题结构

工程结构

我们进入 Typora 的主题文件夹，简单观察下 Lapis 主题的组成部分。可以发现只有两部分：控制样式的 lapis.css 文件和存放字体的 lapis 文件夹。

`.css` 文件结构

这步有点艰难，不仅需要一定的英语水平，还需要瞎猜的胆识。

在 IDE 中打开文件，耐心地从头看到尾。如果你的英语水平足够好，你应该可以猜出很多部分的功能。举几个例子：

开猜。这段明显是定义字体的，引入了 Cantarell，Source Han Serif CN（思源宋体）和 JetBrains Mono 三种字体。根据每一部分的格式，我们可以猜测，我们在引入新的字体时的格式为：

同时注意到，粗体字需要单独引入。

再比如：

H2 显然是二级标题，background-color 是背景颜色的意思，其值是前面定义的 --header-span-color；颜色是 --bg-color，和背景颜色一样，说明想制造出镂空的效果；padding 是内边距的意思；border-radius 看着似乎和圆角大小有关；display 也许是指展示方式，不用管。总而言之，这应该是用来定义二级标题样式的。

诸如此类，一直猜就可以。看不懂不要紧，如果看起来不是和你要改的东西相关就不用管，如果相关，可以询问 AI 助手或者 CV 过去查字典/搜索。

example

第三步：开改

终于到了开始改的时候了。我会以我的过程为例讲解一下改动的基本思路。

字体修改

在 lapis 文件夹中加入字体文件：

然后在 @font-family 处引入字体文件代替思源宋体：

在 #write（基本配置区）中加入字体的名称：

同时修改下文的目录、标题等处除代码块外所有内容的字族为 'Cantarell', 'LXGWWenKaiGB'。

根据 Github Copilot 的回答，CSS 中会优先使用靠前的字族，在字符搜索不到时递补到后面的字族进行搜索。Cantarell 是纯拉丁字体，没有中文字，这样就可以实现中英文字体分别设置。当然，如果你的字族是中英文混合的，例如 LXGWBrightGB（霞鹜文楷 GB 和 Ysabeau 的融合字体，相当好看），就可以只设置一个。

修改颜色

颜色代码位于文件开头处 6-42 行（行数为相对于原始文件而言，下同）：

大家按照自己的喜好修改即可。VS Code 有颜色预览，非常方便。

标题样式

这个比较复杂。首先定位控制标题的代码，位于文件 208-305 行，header 注释的下方。代码太多，我省略了一部分。

首先修改标题字重为粗体（strong）。事实上只需要去掉原本 H4-H6 的设置，因为标题默认是粗体。

下面修改 H2 的样式。请教了 Github Copilot 后，我得到了这样的代码：

下面删除除一级标题间距外的间距（margin）代码，加入我们设置的统一间距：

调整字体大小：

为二至六级标题加上 H2-H6 角标。此时需要使用这样的代码：

前面的一坨是统一的样式，后面是内容。

引用块样式修改

对应源代码的 blockquote 部分。还是询问 AI 助手后得到如下灵感：

分割线样式修改

对应于 dividing line 部分。与前面的 H2 一样使用渐变方案：

代码块

这是最让我头大的一部分，头大的原因不是技术问题，而是如何配色。在请教了 AI 助手，并且查了一堆颜色对照表之后，我简单定出了这个方案：

其中的 !important 应该是高优先级的意思。这套方案不是很好看，但也还行。

总结

我还对文件进行了一些小修改，就不多说了。由于我的修改比较多，我干脆照着原本的文件重写了一个，变成了一个新的主题，这也就是开头那张图。根据我的配色和原本的主题 Lapis（天青石），我把主题命名为 Marble（大理石）。

主题现已开源至 Github 和 Gitee，欢迎大家前去下载尝试。如果可以的话，想要一颗 star (^▽^)。

这些修改看着复杂，实际上主要还是依靠猜代码含义和借助 AI。

后记

总体而言，魔改主题还是挺费事的。不过只要有足够的耐心，虽说写出全新的主题比较难，但是改出一些自己喜欢的效果还是可以的。

Marble 主题我会尽力维护，但是由于不懂 CSS+平时事的确比较多，更新就随缘了。

感谢原始的 Lapis 主题。

https://github.com/YiNNx/typora-theme-lapis

下一步似乎可以用这种方式魔改 Obsidian 的主题……算了我还是去学学 HTML 和 CSS 吧（乐）