在深色模式下自动切换 SVG 的颜色

发表于 分类于 阅读次数： 本文字数： 747 阅读时长 ≈ 2 分钟
使用透明背景的 svg 图片，并在深色模式下自动反色

在之前的几何相关的文章中，我把图片格式从 png/webp 切换到了 svg，这样得到的图片更清晰，而且还可以无损缩放，但图片大小反而更小。

具体的工作流程如下：

graph LR
A(TikZ) --> |lualatex| B([PDF])
B --> |pdftoppm| E([PNG]) --> |cwebp| F(WebP)
B --> |pdf2svg| C([SVG]) --> |svgo| D(minified SVG)

以上一篇文章中的第一个图片为例，得到的图片大小如下：

格式 大小
PNG 19371
WebP 10610
SVG 14389
minified SVG 5798

可以看到，生成的 svg 图片大小介于 png 和 webp 之间，而使用 svgo 精简过的 svg 图片大小最小。

但是这里面有一个问题。pdf2svg 生成的 svg 图片的背景是透明的，在浅色模式下一切都正常，但是在深色模式下，图形里面的线段和标记依然是黑色的，根本看不清。

之前的解决方法是把 svg 变为白色背景，这能解决看清楚的问题，但是在暗色模式下不是很协调。另外，在浅色模式的 note 中也比较突兀。

最近在 stackoverflow 上找到了新的解决办法，就是利用 css 让 svg 图片在暗色模式下自动反色。

首先，在 source/_data/styles.styl 中添加如下配置：

1
2
3
4
5
@media (prefers-color-scheme: dark) {
  .svg {
    filter: invert(1) brightness(2);
  }
}

然后在文章中引入 svg 图片的时候，指定为 svg 类：

1
![题目](25CSR6.min.svg){.svg}

这样加载的 svg 图片在暗色模式下会自动反色，就能够看清楚了。