如何为你的网页添加自适应设备主题颜色

现在的📱手机、💻电脑等电子设备都以及开始推广夜间模式,
那么你的博客还是白色么?又或者是有一个切换按钮🔘?
那也太麻烦了,本篇文章教你如何让你的博客自动判断设备的主题色,
自动切换主题。

其实很简单,在你给你的博客写 css 的时候,首先写出两个主题色、分别是白天主题夜间主题两个主题。

加入你的白天主题是:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #FFF;
  }
}

那么整个网页的 body 部分就是呈现白色。

如果要让你的网页在夜间模式下呈现黑色,
那么,为你只需要在的夜间主题外面嵌套一个

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
  }
}

那么就大功告成了,这个博客已经部署好了,你可以试着切换一下你的设备主题色来看看效果。


本文的封面图片来自 Unspalsh 的 unsplash-logoBence Balla-Schottner