obsidian使用技巧
如何给浅色模式和深色模式写不同的 css 样式
插件ID：%E5%A6%82%E4%BD%95%E7%BB%99%E6%B5%85%E8%89%B2%E6%A8%A1%E5%BC%8F%E5%92%8C%E6%B7%B1%E8%89%B2%E6%A8%A1%E5%BC%8F%E5%86%99%E4%B8%8D%E5%90%8C%E7%9A%84-css-%E6%A0%B7%E5%BC%8F
%E5%A6%82%E4%BD%95%E7%BB%99%E6%B5%85%E8%89%B2%E6%A8%A1%E5%BC%8F%E5%92%8C%E6%B7%B1%E8%89%B2%E6%A8%A1%E5%BC%8F%E5%86%99%E4%B8%8D%E5%90%8C%E7%9A%84-css-%E6%A0%B7%E5%BC%8F
%E5%A6%82%E4%BD%95%E7%BB%99%E6%B5%85%E8%89%B2%E6%A8%A1%E5%BC%8F%E5%92%8C%E6%B7%B1%E8%89%B2%E6%A8%A1%E5%BC%8F%E5%86%99%E4%B8%8D%E5%90%8C%E7%9A%84 css-%E6%A0%B7%E5%BC%8F：
如何给浅色模式和深色模式写不同的 css 样式
在 obsidian 中，我们可以写 css 文件为页面中的元素定制各种样式，那么如何分别给深色模式和浅色模式中设置不同的样式呢
ctrl shift i 打开开发者模式，在元素的最上方 body 中可以看到有一个类 .theme-light 或者 .theme-dark。当 obsidian 处于浅色模式下，body 存在前者，处于深色模式下时存在后者。我们可以借助这个区别来编写 css 分别给深色模式和浅色模式中设置不同的样式。
举个例子，写两个选择器分别选中深色和浅色模式，然后给他们添加同一个变量但是给不同的变量值。然后再选择器中使用这个变量，这样，当当前 body 处于浅色模式时，存在 .theme-light 类，变量值为 #2222222，深色模式同理。
body.theme-dark {
a-color-variable: #FFFFFF;
}
body.theme-light {
a-color-variable: #222222;
}
(选择器) {
background-color: var(--a-color-variable);
}当然，我们也可以直接写成：
body.theme-dark ... {
background-color: #FFFFFF;
}
body.theme-light ... {
background-color: #222222;
}讨论
若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。
