其实很早就想做一个暗黑模式自适应了,一直没做是因为太菜了实在不会,但最近晚上关灯看自己的站实在是瞎眼睛(哭)。

其实有很多种方法,原始的方法是准备两套 css ,使用 js 进行替换。

我使用的就是另外一种比较新的方法。使用媒体查询,检测到用户是深色模式时,自动进行切换。

@media (prefers-color-scheme: dark) {

}

只要在这个标签内重写需要覆盖的 css 内容就可以了。 Windows 还需要把浏览器改成深色模式。(我用的是 Edge Canary

浏览器

效果图:

主页

如果这套暗黑模式有问题的话,希望发现能及时联系我。

最后修改:2022 年 02 月 20 日 04 : 38 PM
如果觉得我的文章对你有用,请随意赞赏