因为对目前的样式非常满意且相当喜欢，所以做一个简单的分享。
注意
：不是系统性教程，如果需要学习CSS写法，请看Obsidian主题样式修改半入门教学。如果希望实现更多丰富的效果，善用MDN。
ToC
- 善用变量
- 一些方便的属性
- filter
- opacity
- 插件（主要分享CodeblockCustomizer）
图片展示：
- 日间
- 夜间
善用变量
变量很好用。一是具有语义，通过变量名可以清楚地知道这个变量是做什么用的，例如：
/* 日间 */
.theme-light {
--heading-color: #2f5f5d; /* 主题色 */
--highlight-color: #366268; /* 强调色 */
}
二是非常方便，有时一些属性值会被反复使用，使用变量便于全局快速修改某个属性。
三是省力，通过变量嵌套可以省去很多不必要的代码（如果你有关注过原始UI的样式代码，会发现嵌套了多层变量）。例如：
:root {
--rem-15: 1.5rem;
--rem-20: 2.0rem;
--h1-size: var(--rem-20);
}
@media (max-width: 768px) {
:root {
--h1-size: var(--rem-15);
}
}
h1 {
font-size: var(--h1-size);
}
/* 一级标题可以根据窗口宽度自动改变字体大小 */
你甚至可以这样写（但不推荐），一个变量最好只存一个属性值：
:root {
--border: 1px solid #fff;
}
h1 {
border-bottom: var(--border);
}
一些方便的属性
filter
可以当调色板用，如果不希望设置太多的颜色值。常用的相关值有：
- brightness（明度）
- grayscale（灰度）
- saturate（饱和度）
还可以通过`blur`做出剧透效果，适用于记背复习。示例：
.markdown-rendered del {
filter: blur(10px);
transition: filter 0.3s ease;
}
.markdown-rendered del:hover {
filter: blur(0);
}
/* 文本添加删除线后变得模糊，只有当光标悬停在文本上时才恢复正常 */
opacity
不透明度。可以用于设计简单的聚焦效果（复杂一点的如高亮当前正在编辑的段落需要用到JS）。例如：
.markdown-rendered p:not(:hover) {
opacity: 0.5;
}
.markdown-rendered p:hover {
opacity: 1;
background-color: blue;
}
/* 光标悬停在某一段落时该段落完全不透明且背景高亮，其它段落半透明。 */
插件
美观程度大于实用程度！
- Mininal（https://github.com/kepano/obsidian-minimal）
- Mininal-Theme-Settings（https://github.com/kepano/obsidian-minimal-settings）
前两个没什么好说的，CodeblockCustomizer ( GitHub - mugiwara85/CodeblockCustomizer: Codeblock Customizer plugin for Obsidian · GitHub ) 可以：
- 折叠代码块
- 给代码块取标题
- 高亮某行代码
- 显示行数
- 把代码块复制为图片
CSS 所见即所得，反馈感强，折腾起来还是很好玩的。论坛里有不少实用又好看的 snippet 分享，在前人的基础上自己 DIY 成就感也会很强。