Day 06 : 操作基础篇 3 - 认识「主题」与 CSS 客制化设定

前言

这是 Obsidian 使用教学 — 基础篇的第 3 篇文章。

在上一篇我详细介绍了「Settings (设定)」介面，包含 2 大区块：

• Options
• Plugin Options

这一篇来介绍「Themes (主题)」介面，这个功能让你的 Obsidian 介面变得非常独特！我将分成 3 个区块介绍：

• 一般设定
• Themes
• CSS snippets

请留意：  
  
1. Themes 会让许多人花很多时间调整自己的介面，我建议先挑一款自己喜欢的使用即可。  
  
2. 以下内容都将使用「英文版」介面介绍，若有需要看中文版的朋友，可在 Settings > About > Language 自行调整。

一、Obsidian Themes 一般设定

要调整 Obsidian 的 Themes，请到 Settings > Appearance。我先解说以下内容：

• Base theme
• Apply custom CSS
• Translucent window
• Font size
• Quick font size adjustment

1. Base theme

可调整 Theme 的 Light (明亮模式) 或 Dark (暗黑模式)。请留意并非每个 Theme 都有这 2 个设定，有些只有 Light、有些只有 Dark。

我个人偏好 Dark 。

2. Apply custom CSS

套用客制化 CSS，这个选项可不开启。

CSS：网页的样式定义。你可以想成是 Obsidian 编辑器的介面样式设定，後面还会稍微提到。

3. Translucent window

半透明介面，会让介面的亮度下降。我个人觉得萤幕会变的很暗，因此不开启。

4. Font size

字体大小，透过拉杆可调整 Obsidian 显示文字的大小。这个可不做调整，直接用下方的 Quick font size adjustment 调整即可。

5. Quick font size adjustment

快速调整字体大小，可透过 ctrl + 滑鼠滚轮 或 触控板缩放 来调整字体大小，建议开启。

二、Obsidian Themes

接下来是重头戏 — Themes 设定，一共有 4 个功能：

• Reload themes
• Open theme folder
• Theme
• Community themes

1. Reload themes

重新载入 Theme，用於切换 Theme 但却没有正常运作时。

2. Open theme folder

开启 Theme 所在的资料夹。在 Obsidian 中的 Theme 都是以 .css 的档案格式储存在特定的资料夹。

从 Obsidian 下载的主题会直接存到这个资料夹中 ; 未来若我们从网路上下载其他人的 Theme，也是将档案放到这个资料夹中使用。

3. Theme

显示目前可更换的 Obsidian Theme，即上方的 .css 档案。若想切回 Obsidian 预设的主题样式，选择「None」即可。

4. Community themes

点击 Browse 後，可浏览 Obsidian 社群热心人士提供的 Theme。可调整由上角的「Dark themes only」筛选出有提供 Dark 的 Theme。

点击「Preview」会载入该 Theme 的样式让你预览，再次点击「Stop Previewing」即可取消 ; 点击「Use」可使用该 Theme。

这边要特别提醒大家，每组 Theme 都是一份 .css 档案。

该 Theme 作者除了修改样式，也可能会加入一些原 Obsidian 没有提供的样式功能。因此你可能会发现 A 主题的「标签面板」跟 B 主题长的不相同、甚至不同到你以为是某种新功能，但实际上都是透将 CSS 去控制的。

三、CSS snippets

用来单独控制特定 CSS 的区域，主要有 2 大功能：

• Reload snippets：重新载入 CSS snippets。
• Open snippets folder

Snippets 指的是片段的程序指令，通常是可拆分、重复使用的程序小区块。  
  
打个比喻， Snippets 有点像是小插件，透过在自己的程序中贴上这个程序小区块，我们就可以使用这个小插件的功能。

Open snippets folder

开启 CSS snippets 所在的资料夹。在 Obsidian 中的 CSS snippets 都是以 .css 的档案格式储存在特定的资料夹。

如果你有将 CSS snippets 放到该资料夹，就会在 Obsidian 显示开关。

加入 CSS Snippets

想在 Obsidian 加入 CSS Snippets 的步骤如下：

1. 点击 Appearance > CSS snippets > Open snippets folder 的 icon ，此时系统自动打开 Obsidian 软件的 Snippets 资料夹（系统预设是隐藏）
   

2. 系统自动打开 Snippets 资料夹
   

3.开启任何的文字编辑器，贴上相对应的 CSS 程序码。你也可以单纯开一个记事本 (Windows)、文字编辑 (Mac)，将程序码贴上後储存成 .css 档案

4. 将档案储存成 .css 格式的档案（例如 xxx.css，并放到刚才的 css snippets 资料夹。
5. 如果成功，可在 Obsidian > Setting > Appearance 的 CSS snippets 下方看到一个开关，名称是你刚才储存 CSS 的档案名称
   

增加 CSS 功能 : Theme vs CSS snippets

有趣的问题来了：如果我要修改 Obsidian 的 CSS 样式，到底要在 Theme 的 .css 直接修改、还是以 CSS Snippets 的 .css 修改呢？

我的想法是：如果你确定自己都会使用同一个主题，那麽就直接在单一 Theme 的 .css 档案中修改 ; 如果你会时常换 Theme 使用、或是需要将某项 CSS 设定分享给其他人，那就使用 CSS Snippets 的 .css 修改。

以我自己的使用经验来说，我选择在 Theme 中直接修改。

四、总结

目前我使用的 Theme 为 YouTuber — Bryan Jenks 修改的 Theme，名称为「Bryans Gruvbox」，必须要手动安装 Theme，Community themes 目前没有上架。

此 Theme 其实是以 Community themes 中的「Obsidian gruvbox」主题修改，加入了大量 Bryan Jenks 的自行修改的功能。

若有需要的朋友，可自行透过此网址订阅 Bryan Jenks 的电子报 即可获得他的 Theme。

最後一点建议。

Bryan Jenks 的 Theme 有非常大量的 CSS 修改，对於刚开始使用 Obsidian 的人可能会觉得过於复杂。我建议还是先采用 Community Themes 的简单主题，等熟悉 Obsidian 的操作後在使用他的 Theme 会比较好。