小而实用的功能-系统主题切换

前言

很久很久很久之前，如果提到 CSS 的 @media ，我的第一反应就是它是用来做屏幕查询的，然而事实证明，是我肤浅了, @media的查询功能远超我的想象。

最常见的代码:

@media(max-width: 756px) {
  margin: 0
}

主题切换

说到主题切换，之前有见到过，很多站点都会配置两套或两套以上的CSS颜色，用作站点主题切换。而在我的印象中，大部分站点会在页面导航的右上角增加一个主题切换的 switch button 或者 select 框，让用户自己去触发站点的主题切换。而主题切换的中心思想也是比较简单的，配置不同颜色的var变量，在写css样式时，在代码中引入var变量，最后通过改变全局 :root 做到站点的主题切换。

var 配置：

:root{
  --background-color: #fff;
  --font-color: #000;
  --border-color: #eee;
}

css 使用：

body {
  backgroud-color: var(--background-color);
  color: var(--font-color);
  border-color: var(---border-color)
}

让主题切换自动起来

近些时期，手机设置中突然出现了一项配置--深色模式，而很多主流的APP也都出现了这种配置，甚至很多APP都提供了根据系统配置自动切换的功能。而近期维护的某个大型系统中也存在这样的功能。怀着好奇的心里（刚好遇到了这个需求维护开发），解开了这个自动切换的面纱，究竟浏览器是通过什么能够让页面知道，你该变成深色模式了？

Media prefers-color-scheme

prefers-color-scheme css 媒体特性，用于检测用户是否有将系统的主题色设置为亮色或者暗色。 --- MDN

通过配置CSS的 @media ，我们就可以获取到系统的深色模式。

浅色模式：

@media (prefers-color-scheme: light) {
  ...
}

深色模式：

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

除 light 和 dark 两个参数外，还有一个 no-preference 参数，配置此参数，则不会进行任何的系统模式查询。

兼容性

根据MDN的兼容性说明，我们可以看到，主流浏览器基本上都已经支持了此属性的配置。但是针对 no-preference 的兼容性可能还有所欠缺，不过这个参数对我们的影响并不大。

Demo

秉承着学习的最好方式就是动手实践，我简单做了一个demo。demo中，我将浅色模式放在了 light-variable.css 下，深色模式则放在了 dark-variable.css 下。

浅色模式：

@media (prefers-color-scheme: light) {
  :root {
    --background-color: white;
    --font-color: black;
    --border-color: #767575;
  }
}

深色模式：

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: black;
    --font-color: white;
    --border-color: #eee;
  }
}

结语

功能虽小，实现虽然简单，但是刷新了我对CSS的认知，刷新了我对 @media 的认知。为自己又获得一个小知识，手动撒花……