Obsidian 的 CSS 代码片段

主题可以帮助你获得更加的视觉和交互体验，除了通过 设置 > 外观 > 主题，中安装的主题外。

Obsidian 还支持一种外部样式代码引用的方式。

位置

打开笔记仓库的 .obsidian 文件夹，其中如果没有 snippets 文件夹则创建。

在 Obsidian 中的 CSS snippets 都是以 .css 的档案格式储存在特定的文件夹。如果你有将 CSS snippets 放到该文件夹，就会在 Obsidian 显示开关。

使用

1. 别人给你的，或者你看到不错的代码片段（CSS）文件，放进 snippets 文件夹就行。或者自己建立一个 CSS 文件，书写你自己的样式当然需要一点 CSS 代码基础。
2. Obsidian > 设置 > 外观，最后一项【CSS 代码片段】，刷新一下，会显示出新增的文件，把后面的切换按钮打开即可。
3. 如果你使用的网站上复制的内容，那么可以尝试先把内容放到一个文本文件（.txt），然后将文本文件的文件类型（后缀名）改为 .css 即可。然后重复 步骤 1 和 步骤 2

涉及软件界面的修改，有时候可能需要重启软件生效。

视频教程

Obsidian CSS 主题自定义教程

• 如何给浅色模式和深色模式写不同的 css 样式

CSS 修改优秀范例

ICON

• 回归原始的Obsidian图标
• Obsidian样式-自定义待办图标

界面元素

• Obsidian样式-悬浮两侧菜单栏
• Obsidian样式-悬浮侧边栏自动弹出，提升工作流效率
• Obsidian样式-专注标签页边框
• Obsidian样式-多彩便笺背景
• Obsidian样式-给Obsidian设置护眼的暖色模式
• Obsidian样式-多行标签页堆叠显示
• Obsidian样式-全宽的图谱搜索框样式

大纲 (Outline)

• Obsidian样式-实时编辑下大纲等级符号居右以及Border标题CSS
• Obsidian样式-核心大纲outline标题显示自动编号

编辑器

• Obsidian样式-minimal主题Cards卡片布局
• Obsidian样式-编辑模式下当前行高亮
• Obsidian样式-加粗粗体样式优化
• Obsidian样式-美化代码域对编程语言的样式展示
• Obsidian样式-自定义选中文本部分高亮颜色
• Obsidian样式-使用CSS-HTML实现分栏
• Obsidian样式-用分割线实现分栏
• Obsidian样式-笔记页内标题居中
• Obsidian样式-实时编辑下大纲等级符号居右以及Border标题CSS
• Obsidian样式-分割线样式美化
• Obsidian样式-给笔记添加随机背景图
• Obsidian样式-美化高亮样式
• Obsidian样式-修复1.3.7版本标题语法高度问题
• Obsidian安卓上利用css修改界面字体
• Obsidian样式-缩减栏宽模式下美化笔记内部背景
• Obsidian样式-iPhone-Obsidian自定义字体
• Obsidian样式-实现TiddlyWiki故事河
• Obsidian样式-完成任务时如何取消任务文本的删除线
• Obsidian样式-借助CSS打造独立的大屏表格页面
• Obsidian样式-使用CSS为白板增加可选的标记功能
• Obsidian样式-隐藏 markdown 标记
• Obsidian 样式-表格优化
• Obsidian样式-笔记内容居左或居中切换
• Obsidian样式-分栏分列布局 (Column-Page)
• Obsidian样式-在Obsidian内实现网格背景

代码块

• Obsidian样式-美化行内代码样式
• Obsidian样式-编辑模式代码块显示行号
• Obsidian样式-圆角代码块样式

列表

• Obsidian样式-自定义大纲缩进线样式
• Obsidian样式-给列表添加动态引导线
• Obsidian样式-ITS主题列表样式
• Obsidian样式-标题-列表-图片美化
• Obsidian样式-书签列表样式
• Obsidian样式-无序列表卡片式美化

图片

• Obsidian样式-图片点击长按放大
• Obsidian样式-调整图片不同布局样式
• Obsidian样式-如何让插入笔记中的图片水平居中
• Obsidian样式-hover出现图片描述
• Obsidian样式-限制笔记内的所有图片宽度

callout

• Obsidian样式-Callout样式
• Obsidian样式-如何实现Blue-topaz自带类表格时间线样式
• Obsidian样式-MCL Multi Column
• Obsidian样式-用Callout实现的边注
• Obsidian样式-PLN主题的callout
• Obsidian样式-Vicious主题的callout
• Obsidian样式-tabbed Callout
• Obsidian样式-使用 Callout 进行正文旁注
• Obsidian样式-Minimal主题的Outline Callout

Properties（老称呼 Front-matter，metadata）

• Obsidian样式-如何在阅读模式下隐藏Properties
• Obsidian样式-修复banner和Properties高度冲突以及多余留白改善
• Obsidian样式-控制属性面板(YAML)的显示状态
• Obsidian样式-FrontMatter读书笔记

状态栏

• Obsidian样式-悬浮状态栏
• Obsidian样式-状态栏美化

搜索框

• Obsidian样式-像VSCode一样显示搜索替换框

设置面板

• Obsidian样式-设置面板样式调整

链接

• Obsidian网址前自动加图标
• Obsidian样式-修改内链的链接颜色
• Obsidian样式-自定义链接前缀图标
• Obsidian样式-内链与外链样式

文件管理器

• Obsidian样式-文件浏览器样式
• Obsidian样式-文件管理名称滚动效果
• Obsidain样式-自定义文件夹图标
• Obsidian样式-超长文件名换行
• Obsidian样式-分割文件管理器
• Obsidian样式-粘性文件夹(Sticky Folder)

段落

• Obsidian样式-如何自定义段落前后间距
• Obsidian样式-特殊标签-让Markdown的文本多彩多色
• Obsidian样式-段落首行增加缩进

待办

• Obsidian样式-待办完成样式
• Obsidian样式-自定义待办图标
• Obsidian样式-待办事项美化复选框

引用

• Obsidian样式-隐藏块引用ID
• Obsidian样式-引用框样式

嵌入样式

• Obsidian样式-简约的嵌入样式
• Obsidian样式-修改悬浮预览框的大小

表格样式

• Obsidian样式-表格样式简明方法

标签 Tag 样式

• Obsidian样式-多彩tag样式

标签页

• Obsidian样式-标签页Tab样式
• Obsidian样式-固定标签页样式美化
• Obsidian样式-隐藏右侧标签页标题

标签页标题栏

• Obsidian样式-标签页标题栏的隐藏
• Obsidian样式-更小的标签页标题栏

PDF

• Obsidian样式-给内置PDF浏览器增加反色功能

白板（Canvas）

• Obsidian样式-canvas白板卡片中文字居中
• Obsidian样式-Canvas样式的修改及增强卡片的显示效果
• Obsidian样式-使用CSS为白板增加可选的标记功能

移动端

• 通过css在移动端右下角添加源码和阅读转换按钮
• Obsidian样式-通过css修改安卓上的搜索框宽度
• obsidian安卓上利用css修改界面字体

语法拓展

• Obsidian样式-调整HTML的detail样式为简单评论区
• Obsidian样式-给mermaid添加横向滚动条

插件样式

• Obsidian样式-Calendar插件的样式修改
• Obsidian样式-DataView在table视图下标签出现错位断裂的修复
• Obsidian样式-简单更改Excalidraw工具栏布局
• Obsidian样式-HoverEditor插件弹窗中隐藏Properties属性面板
• Obsidian样式-建立书籍电影的卡片化视图
• Obsidian样式-简单更改Excalidraw工具栏布局
• Obsidian样式-可滚动的Dataview表格视图

Thino

• Obsidian样式-给Thino加个滚动条
• Obsidian样式-给Thino搭配10种热力图颜色
• Obsidian样式-Thino单文件时间轴样式
• Obsidian样式-Thino样式
• Obsidian样式-Thino插件隐藏标志位
• Obsidian样式-Thino伪悬浮编辑框
• Obsidian样式-Thino展开增强
• Obsidian样式-Thino列表模式日期样式调整

Admonition

• Admonition样式-彩色跑马灯框

Kanban

• Obsidian样式-看板样式

自定义 CSS 简单上手指南

如果你正在设计你个性化的 CSS，你可以通过使用开发者工具来获得更多元素信息，提高设计效率。使用开发者工具

• 在 Windows 或 Linux 下，使用快捷键 Ctrl+Shift+I；
• 在 macOS 下，使用快捷键 Cmd+Opt+I 即可。

按下后会出现类似下图的样式。不用被这些代码吓住，这其实就是当前页面的 css 代码。

比如这里你想修改标题颜色只需要点击这个箭头

然后把鼠标指向要修改的元素，这里指向标题

这里的 span.cm-header.cm-header-1 就是标题对应的 css 选择器。

同时左侧调试窗口的内容也变成了 标题对应的 css 设置。

在这里我们发现一条规则 .HyperMD-header-1, .inline-title[data-level='1'], .HyperMD-list-line .cm-header-1 里面包含了 .cm-header-1 就是我们要修改的选择器。

.HyperMD-header-1, .inline-title[data-level='1'], .HyperMD-list-line .cm-header-1 {
    font-variant: var(--h1-variant);
    letter-spacing: -0.015em;
    line-height: var(--h1-line-height);
    font-size: var(--h1-size);
    color: var(--h1-color);
    font-weight: var(--h1-weight);
    font-style: var(--h1-style);
    font-family: var(--h1-font);
}

通过字母含义不难看出 color 就是负责颜色的。 这里的值为 var(--h1-color) 其实用了 css 的高级写法，我们先不用管它怎么写，双击 var(--h1-color) 这个值，删除后浏览器预设一些颜色值，可供选择，这里的颜色可以输入名称，也支持十六进制色值。

设置好颜色后，会立马在 Obsidian 看到修改后的效果，但这个只是临时效果，重启后就消失了，要永久生效，需要把规则保存为 css 代码片段。

对这条 css 右键 - 复制规则，即可把 css 片段内容复制到剪贴板中。

`

新建一个 css 文件 比如 my.css 把复制的内容粘贴进去，保存即可。

然后参考这里 Obsidian css代码片段 启用 my.css 片段 就可以看到效果了。

延伸阅读

修改样式目前有下面几种途径

• 使用社区主题，根据主题带的设置项调整
• 根据上面教程 自己找到 css 选择器，自己写 css 片段
• 找到别人分享的 css 片段的内容，复制到自己的片段中
• 通过 style setting 插件修改，建议安装 obsidian-style-settings 并使用默认主题片段

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。