一个完整的darkmode主题颜色变更方案Demo前言最近爱上了macbook系统的深色模式。然而在使用过程中发现很多

前言

最近爱上了macbook系统的深色模式。然而在使用过程中发现很多网页都没有适配深色模式（包括baidu.com）。突然好奇网页端适配深色模式该如何进行。于是研究了下，发现通过css的var函数即可实现不同主题颜色的切换，还蛮简单的。整理了个demo供大家学习交流。

方案及Demo

如果要实现一个愉悦的主题色切换，我觉得有一个前提，那就是网页上使用的颜色都是收敛在一个集合里面的，江湖人称“色盘”。也就是说设计师会根据产品的整体风格定义一个颜色集合，然后页面内用到的所有颜色都只能是这个集合里面的，当然集合内的颜色可以随着需求进行增减。这样做的目的是前端代码内用到的所有颜色都可以方便地定义其在不同的主题下的具体色值，这样当切换主题时，不需要调整代码即可实现主题颜色的变化。基于上面的前提，我们先定义一个基本的颜色集合以及light和dark两种主题。我们把色值变量定义在html下，这样页面上的所有元素都会生效。

// colors/light.css
html {
  --B1: 225, 234, 255;
  --C1: 245, 122, 192;
  --N1: 43, 47, 54;
}

// colors/dark.css
// 判断当前系统是不是深色主题，如果是的话覆盖颜色集合里的色值。
@media (prefers-color-scheme: dark) {
  html {
    --B1: 25, 42, 76;
    --C1: 173, 64, 126;
    --N1: 232, 232, 232;
  }
}

以下是Demo的主体代码

// App.js
import Header from './Header';
import Body from './Body';
import './colors/light.css';
import './colors/dark.css';
import './style.css';

function App() {
  return (
    <div className="app">
      <Header />
      <Body />
    </div>
  );
}

export default App;

// Header.js
function Header() {
  return (
    <div className="header"></div>
  );
}

export default Header;

// Body.js
function Body() {
  return (
    <div className="body"></div>
  );
}

export default Body;

// style.css
.app, html, body, #root {
  width: 100%;
  height: 100%;
}

.app {
  background-color: rgb(var(--B1));
}

.header {
  width: 100%;
  height: 200px;
  background-color: rgb(var(--C1));
}

.body {
  width: 100%;
  height: 55%;
  background-color: rgb(var(--N1));
}

效果

撸完代码，我们跑起来看看效果。
先看一下在默认的浅色模式下的效果：接下来我们调整一下系统主题，改为深色模式：调好后，我们再看看网页效果，发现颜色变成了dark.css里面定义的色值：

总结

至此，一套web主题色切换的方案就完成啦~ 看起来虽然简单但在生产中是完全可用的。