一、前言
Obsidian的 Blue Topaz 主题用久了感到有点乏味了，怎么办？当然可以重新下载主题，或者自己下载CSS Snippet来修改啦。那怎么来修改现在的主题或应用新的主题或Snippet 呢？刚好今天自己也修改过，所以顺便写一下如何个性化 Obsidian 主题、样式、颜色、字体及字号吧。
二、直接在软件上调整样式
如下是我的软件设置外观配置项：大家按我图上标识步骤操作，可以下载新的主题及启用新的主题和样式；也可以修改全局的编辑器字号，同时可以通过CSS代码片段来增加一些新的显示效果(比如：为大纲标题添加竖线效果，用不同的颜色来区分、或在标题前面用 H1-6来文字标识是几级标题等)。下载新主题使用或用插件辅助调整，获取CSS Snippet在Obsidian中启用能最方便的满足我们需求。
1.直接下载及更换主题 2.通过插件界面调整主题 3.下载CSS Snippet片段增强效果
这几个操作估计大家都会，不会也没关系，这里我直接在B站找到几个操作的视频方便你在不操作样式源代码文件的情况下快速调整自己的需求。
一般的主题下载后是不会在设置项里有插件配置项用于直观的调整样式的，除了部分为自家主题提供了配置插件的除外。如下的 minimal主题它就配置了自家的插件，用于在 Obsidian中调整个性化主题的展示效果。所以你可以搜索一下主题方是否提供了插件能够帮助你方便修改。
minimal 一款极简主题及其设置插件| 笔记神器 Obsidian 完全指南_哔哩哔哩_bilibiliwww.bilibili.com/video/BV1X84y1F7E9
极简主题 + 彩色标题 | Obsidian 完全指南_哔哩哔哩_bilibiliwww.bilibili.com/video/BV1rb4y1r75v
Obsidian 完全指南之 更换主题字体_哔哩哔哩_bilibiliwww.bilibili.com/video/BV13N411o7g5
另外还可以通过CSS 代码样式来为你的笔记添加显示效果，只要下载并启用额外的样式文件即可，如上面说的大纲竖线效果，颜色及H1-6显示效果等。要记住的是，有些主题是默认集成了这些CSS 代码样式的了，比如我用的 Blue Topaz, 它自己就有了大纲的竖线效果，所以如果你要是想实现更多的效果，使用已集成代码片段功能的新主题，会比配置多个CSS 片断更方便达到需求。
⭐Obsidian：神奇的 CSS Snippets 代码段_哔哩哔哩_bilibiliwww.bilibili.com/video/BV1eK4y1M7K9/
Obsidian 小技巧 | 不会css如何自定义主题？_哔哩哔哩_bilibiliwww.bilibili.com/video/BV1P3411676a/
可能是 Obsidian 最完美的主题 | 善用佳软_哔哩哔哩_bilibiliwww.bilibili.com/video/BV1nv4y1f7Hh/
如上，除了套用满足你需求的新主题、使用主题方提供的插件修改、或者下载新的CSS样式使用外，我们还可以对主题样式配置文件进行直接的修改。
三、通过代码文件修改样式
比如说我用的 Blue Topaz 主题要进行样式的修改，如上图所示，我们(设置中点击主题配置项右侧文件夹图标)进入样式文件，找到Blue Topaz.css 样式文件并用visual studio code打开。
=== 提示：操作前请先备份一份再修改！！===
查找主题的配置样式文件
1.修改字体类型
在root 结点下，我们可以修改字体变量定义，其它地方都会引用这里的变量值。如下：我把所有的字体都改成了手札体-简 常规体。如果你想精细化的定制显示效果，则只需修改不同属性的值即可。
查找系统字体的英文名称
说明：设置全局的字体 --default-font: 'HannotateSC-W5', serif !Important; /*全局字体*/
修改主题样式的字体类型
2.修改字体大小
修改字体大小，同样也是在root区域，因为没有发现代表字体大小属性的全局参数，我直接把例举的字体都作了调整，你可按自己的需求来设置。
修改主题样式的字体大小
3.调整字体颜色
对字体颜色的调整，我们在.theme-dark类样式下修改，如果你用vs code来编辑的话能方便直观的调整色彩值，操作如下：
调整主题样式的字体颜色
4.查看最终效果：
修改完成后，最好重新加载一下主题，或者重启一下Obsidian应用软件，确保配置最终生效。
在设置中刷新主题配置
通过以上的字体、字号、颜色调整，我们最终的效果如下，看起来已经比之前界面舒服多了。
笔记主界面的显示效果
设置面板中的显示效果
四、更多的样式配置项
在Blue Topaz 中也提供了作笔记时可用的丰富字体及背景样式项，以及图片、便签、挖空等样式。语法大部分都是块代码的写法，和我们之前介绍的Admonition插件一致，我们可以在笔记中直接使用，以便丰富我们的笔记样式。具体你可以参考如下：
图片排列及大小可设置
==========================
=====标签 Special tags=====
==========================
#dailynote
#weeklynote
#important
#重要
#inprogress
#进行中
#complete
#完成
#questions
#ideas
==========================
========图片 images========
==========================
用法
在图片末尾加上 “|left” 或 “|right” 可以让图片左或右对齐
xxx.jpg|left
-------------------
可用变体：
left/Left/LEFT/L
right/Right/RIGHT/R
如：xxx.png|L
-------------------
如果同时调整图片大小，需要把调整大小的数值放在最后
xxx.png|right|200
使用 “|inlineL” 或 “|inlineR” 可以将图片嵌入在文字中,L左，R右
xxx.png|inlineL
-------------------
可用变体：
inlineL/InlineL/INLINEL/inlL
inlineR/InlineR/INLINER/inlR
如：xxx.png|inlR
-------------------
===========================
=====笔记框 Note blocks=====
===========================
----------------------------------------------------------------------
---------------不同颜色背景 Colourful note backgrounds-----------------
----------------------------------------------------------------------
语法：```note-xxx-bg 或```note-xxx-background
---------------------------------------------
```note-orange-bg
正文text
```
```note-yellow-bg
正文text
```
```note-green-bg
正文text
```
```note-blue-bg
正文text
```
```note-purple-bg
正文text
```
```note-pink-bg
正文text
```
```note-red-bg
正文text
```
```note-gray-bg
正文text
```
```note-brown-bg
正文text
```
-----------------------------------------------------
----------不同笔记颜色 Colourful note texts------------
-----------------------------------------------------
```note-orange
正文text
```
```note-yellow
正文text
```
```note-green
正文text
```
```note-blue
正文text
```
```note-purple
正文text
```
```note-pink
正文text
```
```note-red
正文text
```
```note-gray
正文text
```
```note-brown
正文text
```
-----------------------------------------------------------
------------记忆笔记框 Recall/cloze note blocks-------------
-----------------------------------------------------------
可鼠标点击显示笔记内容 To show text by clicking
-----------------------------------------------------------
```note-cloze
正文text
```
--------------------------------------------------------
------------重要笔记框 important note blocks-------------
--------------------------------------------------------
有笔记外框 Different block style
--------------------------------------------------------
```note-imp
正文text
```
=========================
=======列表 list=========
=========================
Just show vertical line instead of border
显示竖线，不显示框线
Use the following code to create a css snippet and activate in Obsidian
使用以下代码创建css snippet，在软件中启用
ul ul,
ol ul,
ul ol,
ol ol {
position: relative;
}
ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before {
content: '';
border-left: 2px solid var(--background-modifier-border);
position: absolute;
}
ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before {
left: -13px;
top: 0;
bottom: 0;
}
li > p:not(.task-list-item) {
margin-top: 0;
margin-bottom: 0;
}
ul > li:not(.task-list-item) {
padding-left: 0px;
margin-bottom: 8px;
padding-right: 0px;
margin-block-start: 0.3em;
border-left: none !important;
}
ol {
padding-inline-start: 2.1em;
margin-left: 0px;
margin-bottom: -9px;
}
ol > li {
margin-left: 2px;
padding-left: 0px;
border-left: none !important;
}
=========================================
================stickies=================
=========================================
thanks to death_au, Gabroel and Lithou from Obsidian Members Group on Discord
用法
Usage
用以下格式，可以得到不同的样式
<p class="stickies"\> 你自己的文字 </p>
<p class="stickies2"\> 你自己的文字 </p>
<p class="to-recall"\> 你自己的文字 </p>
Use the following formats, you can obtain some special styles.
<p class="stickies"\> Your words </p>
<p class="stickies2"\> Your words </p>
<p class="to-recall"\> Your words </p>
=============================
==== <aside> </aside> =======
=============================
thanks to dcoales from obsidian member group on discord
https://discord.com/channels/686053708261228577/702656734631821413/794236352857374764
Use
<aside><h1> Your words </h1></aside>
<aside><h2> Your words </h2></aside>
to get a right-side note block
*/
样式后续：
除了Blue Topaz主题样式外，Obsidian样式可使用Admonition进行定制，可参考如下视频：
obsidian 主题定制-P1_哔哩哔哩_bilibiliwww.bilibili.com/video/BV1MB4y1T7MQ
obsidian 主题定制-P2_哔哩哔哩_bilibiliwww.bilibili.com/video/BV1hy4y1K7Vc
参考链接补充：
给笔记的列表加上漂亮的层级线条 | 笔记神器 Obsidian 完全指南_哔哩哔哩_bilibili
A Typora-like editing mode (edit and preview at the same time) - Feature requests - Obsidian Forum
How to change font? - Resolved help - Obsidian Forum
Getting comfortable with Obsidian CSS - Share & showcase - Obsidian Forum
"How to achieve" CSS code snippets - Share & showcase - Obsidian Forum
此文结束：
我们就先到这里，如果对你有所帮助，点赞支持一下吧.... 欢迎小伙伴们一起探讨和评论!
网友评论