经常使用 Obsidian 朋友会遇到一个问题，无论是哪个主题都无法满足自己的特殊需求，比如：一级标题、二级标题虽然加粗加大，但是依旧不是很明显，可以修改成带鲜艳颜色的文字吗？比如高亮的背景色比较暗淡，如何能修改成更加清晰的背景？加粗的文字不明显，可以换成其他颜色吗？等等这类修改 css 样式的问题。

添加自定义 css 文件

其实 Obsidian 早已经想到了这个问题，提供一个配置的方法，找到：设置 > 选项 > 外观 > CSS 代码片段（如下图）的位置，点击右侧的“文件夹”图标，进入：仓库文件夹（你自己仓库的名字）/.obsidian（注意这是一个隐藏文件夹）/snippets。

然后在 snippets 文件夹里面建立一个 css 文件，比如 styles.css。然后点击“CSS 代码片段”功能右侧的 “刷新” 图标按钮，就会把这个文件夹里面的 css 文件列出来，然后打开文件夹的右侧开关即可。（如下图）

我的 CSS 文件内容：

/* 标题文字颜色 */
.cm-header.cm-header-1 {
color: #f37b84;
}

.cm-header.cm-header-2 {
color: #ffd98c;
}

.cm-header.cm-header-3 {
color: #9ff369;
}

.cm-header.cm-header-4 {
color: #59d5c4;
}

.cm-header.cm-header-5 {
color: #2a8aff;
}

.cm-header.cm-header-6 {
color: #b99aff;
}

/* 修改加粗文字颜色 */
.cm-strong {
color: #9ff369;
}

/* 修改高亮背景和文字颜色 */
.cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight {
--text-highlight-bg: #ffd98c;
background-color: var(--text-highlight-bg);
color: #000;
}

修改 css 代码

我们已经知道了如何修改 Obsidian 的 css 样式，但是内部的 css class 命名是什么，我们怎么样才能知道呢？

打开 Obsidian，找到菜单中 View > Toggle Developer Tools。

会弹出如同 Chrome 浏览器一样的“开发者工具” 的控制台，选中要修改的地方，找到相对于的 css class 就可以了。当然，这里要有一点点 css 的基础知识，否则确实还不容易理解。

这样我们就可以轻松的讲文档中的各级标题文字、高亮等自定义颜色了（如下图看效果）：