如何为你的网页添加自适应设备主题颜色
次阅读
1 min read
现在的📱手机、💻电脑等电子设备都以及开始推广夜间模式,
那么你的博客还是白色么?又或者是有一个切换按钮🔘?
那也太麻烦了,本篇文章教你如何让你的博客自动判断设备的主题色,
自动切换主题。
其实很简单,在你给你的博客写 css
的时候,首先写出两个主题色、分别是白天主题和夜间主题两个主题。
加入你的白天主题是:
@media (prefers-color-scheme: dark) {
body {
background-color: #FFF;
}
}
那么整个网页的 body
部分就是呈现白色。
如果要让你的网页在夜间模式下呈现黑色,
那么,为你只需要在的夜间主题外面嵌套一个
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
}
}
那么就大功告成了,这个博客已经部署好了,你可以试着切换一下你的设备主题色来看看效果。
本文的封面图片来自 Unspalsh 的 Bence Balla-Schottner