其实很早就想做一个暗黑模式自适应了,一直没做是因为太菜了实在不会,但最近晚上关灯看自己的站实在是瞎眼睛(哭)。
其实有很多种方法,原始的方法是准备两套 css
,使用 js
进行替换。
我使用的就是另外一种比较新的方法。使用媒体查询,检测到用户是深色模式时,自动进行切换。
@media (prefers-color-scheme: dark) {
}
只要在这个标签内重写需要覆盖的 css
内容就可以了。 Windows
还需要把浏览器改成深色模式。(我用的是 Edge Canary
)
效果图:
如果这套暗黑模式有问题的话,希望发现能及时联系我。