两步搞定Obsidian的自定义主题外观

概述

本文旨在帮助Obsidian用户通过安装主题和插件来改变笔记应用的外观。

整个过程分为两大步：下载主题CSS文件与安装配置Style Settings插件。接下来，我将详细介绍每一步骤的具体操作方法。

第一步：下载主题CSS文件（手动下载）

1. 访问社区资源：
   • 访问Obsidian官方论坛或直接前往GitHub上的Obsidian Themes仓库https://github.com/obsidianmd/obsidian-releases/tree/master/community-themes
   • 浏览可用的主题，并选择符合你审美的样式。
   • 其实我选择是

     GitHub - Akifyss/obsidian-border: A theme for obsidian.mdA theme for obsidian.md. Contribute to Akifyss/obsidian-border development by creating an account on GitHub.https://github.com/Akifyss/obsidian-border

2. 获取CSS文件：

• 在选定的主题页面上，通常会有一个“Download”按钮或链接指向.css文件。点击下载并将文件保存到Obsidian仓库的theme目录

  • 

第二步：安装Style Settings插件及导入CSS

安装Style Settings插件

1. 打开Obsidian设置：
   • 启动Obsidian后，点击左下角齿轮图标进入设置界面。
2. 启用社区插件支持：
   • 在左侧菜单栏选择“核心插件”，确保“社区插件”已被勾选。
3. 浏览并安装插件：
   • 切换至“浏览插件”选项卡，在搜索框内输入“Style Settings”查找插件。
   • 找到结果后点击“安装”，然后重启Obsidian以完成安装。
   • 如果国内网络无法访问，将插件zip放置到Plugins目录里。
4. 
5. 激活插件：
   • 重启后回到设置中的“已安装插件”列表，找到“Style Settings”并开启它。

导入CSS文件

1. 启动Style Settings：
   • 在侧边栏找到新增加的“Style Settings”图标（通常是一个画笔图案），点击打开。
2. 
3. 添加新json片段：

例如：

{
  "Appearance-light@@card-layout-open-light": true,
  "Appearance-light@@accent-light": "#2db492",
  "Appearance-light@@accent-color-override-light": true,
  "Appearance-light@@mod-left-split-background-select-light": "mod-left-split-background-transparent-light",
  "Appearance-light@@mod-right-split-background-select-light": "mod-right-split-background-transparent-light",
  "Appearance-light@@mod-root-split-background-select-light": "mod-root-split-background-primary-light",
  "Appearance-light@@background-underlying-select-light": "background-underlying-CSS-light",
  "Appearance-light@@background-underlying-CSS-light": "radial-gradient(100% 100% at 49% 83%, rgb(78, 179, 222) 0%, rgb(141, 224, 166) 100%), radial-gradient(100% 100% at 70% 31%, rgb(242, 124, 124) 0%, rgb(141, 224, 166) 100%), radial-gradient(100% 100% at 18% 44%, rgb(141, 224, 166) 0%, rgb(222, 82, 140) 100%), linear-gradient(161deg, rgb(141, 224, 166) 0%, rgb(78, 179, 222) 12%, rgb(78, 179, 222) 15%, rgb(78, 179, 222) 21%, rgb(222, 82, 140) 28%, rgb(141, 224, 166) 43%), linear-gradient(161deg, rgb(242, 124, 124) 0%, rgb(222, 82, 140) 33%, rgb(252, 240, 159) 51%), linear-gradient(161deg, rgb(141, 224, 166) 0%, rgb(252, 240, 159) 30%), radial-gradient(100% 100% at 38% 59%, rgb(252, 240, 159) 0%, rgb(252, 240, 159) 100%)",
  "Appearance-light@@background-underlying-CSS-blend-mode-light": "screen, difference, color-burn, difference",
  "Appearance-light@@indicator-remove": true,
  "Appearance-light@@Active-states-file-explorer-select-light": "activated-file-tab-style-light"
}

• 调整设置：
  • 文件成功加载后，你可以通过提供的选项对主题进行微调，如修改颜色、字体等。
  • 不断尝试直到获得满意的效果。

效果：