Obsidian主题样式修改半入门教学

开篇导语

我是Blue Topaz的作者,很多人叫我“3F”,姑且就这么称呼我吧。这个教程是给毫无css经验但又想对诸如“字体”、“颜色”进行微调的用户写的。可能你遇到过这些情况:我很喜欢某个主题,但是我希望加粗/斜体能是红色的,但是不知道怎么改,也不想花太多时间学习css;我想改主题找乐子,但不知道如何下手/快速入门……这个教程写给你们,里面没有专业名词与太多功能介绍,但是相对的,这篇教程深度也非常有限,只能供改改字体、颜色时使用。

另一方面,Blue Topaz自发布以来也有一年多了,期间我也是遇到了形形色色的人,大部分都是礼貌谦虚的人,我很高兴Blue Topaz对他们的笔记有所帮助。但是样本量上去了,总会特别的 :勒令我按Ta的要求改的;找茬吐槽主题丑的;酸葡萄说风凉话的……他们总是自以为提出的是“建设性的意见/批评”,可惜他们无法区分什么是“建设性的”,最后呈现的只是无能狂怒式的自我宣泄。我没有能力教导他们,也没有精力与他们纠缠,所以这个教程也是写给他们的,自己丰衣足食多好,至少在说别人都是“垃圾”的时候能放张图,再配一句“我做的这个才是真正的好看,你们这群丑货”。

第一步,安装工具

首先,安装Visual Studio Code (VScode) https://code.visualstudio.com/ 作为调试css的工具。然后使用VScode打开主题css文件,不出意外的话,你会看到一堆不同颜色的代码,如图所示
fig 1

我不会逐个解释这些是做什么的、怎么使用的,所以也不必担心,只是简单调色不会用到这些。

第二步,找到自己要改的地方

现在,打开Obsidian,按下**“CTRL+SHIFT+I”**,唤出开发者工具,如下图

看着依旧很“吓人”,一堆乱七八糟、不知所云的代码。无处下手?没事,你不需要读懂这些,只需要点击一下下图红框中的按钮

然后,移动你的鼠标到你想修改的元素上,例如移动到标题上,会出现如下内容,可以截个图,以防自己遗忘这个名称
fig 4

点击一下,右边的开发者工具发生了变化,变成了所点击元素的相关“样式代码”(css)
fig 5

首先是一串不知干什么的东西……然后还记得刚才标题的名称吗?里面有个“header-3”,下面有个“.cm-header-3”,里面还有个“color”,颜色跟要改的标题好像是一样的。

好的,那就验证一下,复制这个.cm-header-3,转到打开的主题css里,按“CTRL+F”唤出搜索框,搜索“.cm-header-3”,你会找到:
fig 6

第三步,修改

从这里开始有两种操作步骤,一、直接在主题css里修改(不推荐);二、新建css片段修改(推荐)。除非你打算重新做一个自己的主题,否则我不推荐直接在主题css里修改,因为很多的社区主题的作者仍然在维护主题,如果后续更新主题,会丢失自己已修改的地方,或者出现要重新修改一遍的尴尬情况。因为这篇教程是写给未入门的新手的,所以我强烈建议你们建一个css片段(css snippet)存放自己的个性化修改。

Obsidian设置里“外观”->“css片段”,点击右侧红框里这个文件夹图标,会打开片段文件夹

在里面新建一个txt文件(文本文档),文件名随意,把后缀.txt 改成.css,这就是你的css片段了,使用VScode打开这个.css文件,把你要修改的东西从主题css里粘贴过去,比如之前的标题代码:
fig 8

这时候,你可能会有个疑问:“为什么color后面是个var(–h3-color),这怎么改?”var()是用来使用css变量的[var==>variable (变量)],--h3-color是自定义的名称,当作是x就行,color: var(--h3-color);可以看作颜色为x。那么,这个x在哪?搜一下吧!
fig 9
fig 10
fig 11

会看到这些东西,除了中间的图(全绿了),别的都有颜色预览。绿色的部分是被注释掉的部分,在css里被/* */包裹在中间的部分是注释,不会对样式起作用。没有被注释掉的,有颜色预览的就是我们要找的,但是为什么有两组?因为他们分别对应了黑暗与明亮模式。同时,在css里,所有的样式更改、自定义变量必须要被{}包起来,我们在上图中滚动鼠标滑轮向上找,会分别找到下图内容:

fig 12

fig 13

因为这个{}很长,在找--h3-color的时候没法看到,必须在这提一下。那么,在css片段里修改--h3-color就需要先这样(把–h3-color和后面的颜色都复制到片段里):
fig 14

然后,鼠标移动到颜色代码上,会跳出一个颜色选择框,选择你要的颜色,然后就改好了!
fig 15
fig 16

字体修改

字体的修改也是一样,font-family控制字体;font-size控制字体大小;font-weight控制字体粗细。这里以font-family为例,在主题css里搜索--font-family-h3

这些是在:root里面的,所以在片段里粘贴
fig 18

var(--default-font)是软件设置的默认字体,因为你正在自定义字体,所以删掉它就行,输入自己要设置的字体名称,例如“微软雅黑”,如果字体名称超过一个汉字,或者中间有空格、数字、标点符号(除了连字符-),需用引号(双引号或单引号)括起来,如:"Microsoft YaHei Light", "Times New Roman", Arial, sans-serif
fig 19

改好了!


本教程到此结束,当你觉得这些你已经会了,想要深入了解css知识时,你已经半入门了,后面的路就要你自己走了。

87 个赞

非常适合ob用户折腾修改字体、颜色。3F保姆式教程

7 个赞

试来试去,还是习惯Blue Topaz主题。使用方便,不折腾。

6 个赞

我就是这么做的自己的主题(抄了部分3F)的代码,自定义了大部分界面,效果很好,自己做的才是最适合自己的。
当然,对大部分人来说,自定义最大的好处是可以修改主题的痒点。有些主题很好,但就一两个点自己不习惯,这时就可以自己改掉。

4 个赞

谢谢!喜欢Blue Topaz,咱们就是朋友了:cat::rocket::cat::bust_in_silhouette:

8 个赞

:smiling_face_with_three_hearts: Blue Topaz 就是最好看最好用的主题,没有之一!!

1 个赞

Blue Topaz必推

1 个赞

非常实用,解决了我好久的一个痛点,谢谢up主哈!

1 个赞

一步步学下来,要整个适合自己的主题出来~谢谢楼主的分享!

我把自己创建的css文件放入theme文件夹下了,但是重启ob后,发现没有变化,是什么问题哈?

1 个赞


启用你的主题了吗?

找到问题了,我用错了…
css局部代码段应该放入snippet文件夹下, 然后再配置里打开开关


谢谢哈!

好的,不用谢,你自己搞定的,我什么也没做:blush:

这里有一些常见的css snippet,可以下载使用,很方便,推荐给大家:

1 个赞


请问这个数字显示不全是哪一部分的问题啊,字体嘛? 找了两天了 心累

请教一下,我用这个方法,找到kanban里面添加的时候,提示框的背景,找到这个class=“kanban-plugin__autocomplete-item-active kanban-plugin__ignore-click-outside”,但是在主题里没有找到这个字段,比如看板-plugin,ignor-click-outside之类的字段,请教一下.

它可能不属于主题,是插件带的。

换别的主题,kanban的背景就变了。

Blue Topaz 用的是真的舒服,今天才知道是国人开发的,超赞,感谢3F大佬分享手把手教程