关于github-markdown-css如何设置主题

1,802 阅读1分钟

使用了 github-markdown-css 后网页文本的可读性是立马上去了。但是如果你的网页没有做暗色主题的适配,在开了黑暗模式的电脑上浏览就会变成这样:

Snipaste_2022-12-20_16-30-12.png

Snipaste_2022-12-20_16-30-34.png

丑爆了。

如此一来,要么将网页适配深色模式,要么强制 github-markdown-css 使用亮色。显而易见当然是优先选择后者。

github-markdown-css 的文档(点此查看)中提到它本身提供了三种主题,分别为自动亮色以及暗色Snipaste_2022-12-20_16-36-29.png

我们直接进入github-markdown-css模块的安装路径,可以看到三种主题的css。

Snipaste_2022-12-20_17-06-11.png

我们打开 pakage.json 进行设置。只需将默认的"main": "github-markdown.css"改为"main": "github-markdown-light.css"就可以设置为仅使用亮色主题。

Snipaste_2022-12-20_17-09-03.png

同理,想仅使用暗色就写成"main": "github-markdown-dark.css"