前言

自从 typora 收费后就不香了，急需一个替代品，然后就入坑 Obsidian 了，由于有插件机制，功能比 typora 多，真香。接下来我们来讲讲如何美化 Obsidian，本文主要内容分为两部分：

修改主题；
自定义文件目录图标。

先来张展示图，美化前：

SMMS

美化后：

SMMS

修改主题

修改主题比较简单，科学上网之后，在主题库选就行了，具体操作流程：

打开设置里面的外观，点击管理：
点击管理后，就能看到各种各样的主题，挑一个自己喜欢的安装就行了（PS：我现在使用的主题是Everforest）：
然后选择下载好的主题即可：

修改文件目录图标

修改文件夹图标有两个方案，优缺点各不一样，这里比较推荐方案 2。

方案 1

使用Obsidian Icon Folder插件修改图标。

优点：修改方便，无需改代码。
缺点：每建一个新的文件夹或文件都要手动改一次图标。步骤：

关闭第三方插件的安全模式，默认是开启状态的，如果没有关闭过就关一下：
安装插件，步骤和安装主题差不多：
开启插件，这里的开关默认是关闭的，点击打开：
进去插件设置页面，点右边的插件名称或者点设置按钮都行：
下载图标，选择想要的图标库，会自动下载好：
使用图标，右键文件或文件夹点击 Change Icon 切换自己想要的图标即可：

方案 2

自定义 css 样式。Obsidian 是用 Electron 开发的，所以可以通过修改 css 样式来修改外观。Obsidian 本身也支持功能。

优点：设置一次即可在所有文件夹和文件上生效。
缺点：需要懂一点 css 代码（不懂也可以照着后面的步骤抄）。步骤：

获取图标 svg 代码，打开Remix Icon - Open source icon library，选择自己喜欢的图标，可以设置颜色和大小，然后点击复制 Copy SVG。
将 SVG 转换成 css 代码，打开URL-encoder for SVG，复制刚刚的代码到 1 的位置，然后位置 2 的代码会自动生产，再复制 2 的代码。
建立 css 样式表，点击“打开代码段文件夹”，进入文件夹，创建一个名为custom-icons-files-and-folders.css的文件，叫其他名字也行，不过这样比较规范。
创建完成后，会发现 css 代码片段会有刚刚创建的文件，点击启用。
编辑custom-icons-files-and-folders.css，复制下面代码进去：

/* 文件样式 */
.nav-folder-children .nav-file-title-content:first-child::before {
  content: "";
  margin-right: 5px;
  width: 18px;
  height: 18px;
  /* 把这里替换成步骤2复制的内容 */
}

/* 文件夹打开样式 */
.nav-folder .nav-folder-title-content::before {
  content: "";
  margin-right: 5px;
  width: 18px;
  height: 18px;
  /* 把这里替换成步骤2复制的内容 */
}

/* 文件夹关闭样式 */
.nav-folder.is-collapsed .nav-folder-title-content::before {
  content: "";
  margin-right: 5px;
  width: 18px;
  height: 18px;
  /* 把这里替换成步骤2复制的内容 */
}

/* 父类样式 */
.nav-file-title-content,
.nav-folder-title-content {
  display: flex;
  align-items: center;
  overflow: visible;
}

然后将步骤 2 复制的内容粘贴进来就行。如果想偷懒，省掉第 1、2 步，直接用我写好的也行：

/* 文件样式 */
.nav-folder-children .nav-file-title-content:first-child::before {
  content: "";
  margin-right: 5px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm4 12.5v-4l2 2 2-2v4h2v-7h-2l-2 2-2-2H5v7h2zm11-3v-4h-2v4h-2l3 3 3-3h-2z' fill='rgba(25,188,155,1)'/%3E%3C/svg%3E");
}

/* 文件夹打开样式 */
.nav-folder .nav-folder-title-content::before {
  content: "";
  margin-right: 5px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M3 21a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2H20a1 1 0 0 1 1 1v3H4v9.996L6 11h16.5l-2.31 9.243a1 1 0 0 1-.97.757H3z' fill='rgba(241,196,14,1)'/%3E%3C/svg%3E");
}

/* 文件夹关闭样式 */
.nav-folder.is-collapsed .nav-folder-title-content::before {
  content: "";
  margin-right: 5px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12.414 5H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2z' fill='rgba(241,196,14,1)'/%3E%3C/svg%3E");
}

/* 父类样式 */
.nav-file-title-content,
.nav-folder-title-content {
  display: flex;
  align-items: center;
  overflow: visible;
}

进阶

不懂 css 的可以跳过。由于 Obsidian 是用 Electron 开发的，所以可以打开调试工具（快捷键：cmd + option + I）查看布局。 SMMS

能看到 html 就好办了，上面的教程只是修改了文件夹和文件的图标，这里你可以更细化的定制，比如通过属性选择器，给不同类型的文件提供不同类型的图标，例如：

/* md文件图标 */
.nav-folder-children
  .nav-file-title[data-path$=".md"]
  .nav-file-title-content:first-child::before {
  content: "";
  margin-right: 5px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm4 12.5v-4l2 2 2-2v4h2v-7h-2l-2 2-2-2H5v7h2zm11-3v-4h-2v4h-2l3 3 3-3h-2z' fill='rgba(25,188,155,1)'/%3E%3C/svg%3E");
}

/* excalidraw文件图标 */
.nav-folder-children
  .nav-file-title[data-path$=".excalidraw.md"]
  .nav-file-title-content:first-child::before {
  content: "";
  margin-right: 5px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0H24V24H0z'/%3E%3Cpath d='M20 3c.552 0 1 .448 1 1v1.757l-2 2V5H5v8.1l4-4 4.328 4.329-1.327 1.327-.006 4.239 4.246.006 1.33-1.33L18.899 19H19v-2.758l2-2V20c0 .552-.448 1-1 1H4c-.552 0-1-.448-1-1V4c0-.552.448-1 1-1h16zm1.778 4.808l1.414 1.414L15.414 17l-1.416-.002.002-1.412 7.778-7.778zM15.5 7c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5S14 9.328 14 8.5 14.672 7 15.5 7z' fill='rgba(50,152,219,1)'/%3E%3C/svg%3E");
}

然后就能看到这样的效果：

SMMS

不光是图标，主题也可以随便改，打开主题文件夹，会发现里面只是一个配置文件manifest.json和样式文件theme.css。想改别人的主题，只要修改里面的theme.css即可。

SMMS

❤️ 支持

如果本文对你有帮助，点赞 👍 支持下我吧，你的「赞」是我创作的动力。

Obsidian美化教程

前言

修改主题

修改文件目录图标

方案 1

方案 2

进阶

❤️ 支持