网页的颜色跟随系统方案

  • Jan 16, 2020
  • Admin

黑暗模式是近几年的设计趋势,Windows 和 Mac OS 都支持了暗黑模式. 越来越多的应用也支持暗黑模式 , 这使得他们的用户可以自行选择他们喜欢的颜色方案,在夜晚阅读更容易.

如果你在暗黑模式下,你可能会发现我的博客也处于暗黑模式.这篇文章我将向你介绍我是如何完成它的.

目前大部分浏览器都支持了prefers-color-scheme CSS 媒体查询功能,它用来检测用户请求的系统是否处于浅色或深色.

prefers-color-scheme mozilla

查看支持平台

/* 暗黑模式 */
@media (prefers-color-scheme: dark) {
  body {
      background-color: #000;
      color: white;
  }
}
/* 浅色模式 */
@media (prefers-color-scheme: light) {
  body {
      background-color: white;
      color: #000;
  }
}

在上面的代码中,媒体查询检测用户是否中启用了暗模式,然后将背景颜色设置为黑色,将文字设置为白色.

此时你已经给你的网页完成了暗黑模式的自动切换. 当然, 你要做的不仅仅是这些, 根据网页的复杂程度,你需要给不同的元素设置不同的样式, 使您整个网页的颜色过渡不突兀 , 使得你的网页看起来更具美感.

本站的暗黑模式