让网页的黑暗模式UI和系统保持一致关于黑暗模式的设计可以参考Material Design。如果你碰巧用的是React的

黑暗模式在MacOS mojave和WIN10 1809中都得到了系统级别的支持，九月份即将推出的iOS 13/iPad OS和十月份的Android Q也会支持系统级别的黑暗模式，是时候让你的网页也紧跟时代潮流了！

给网页加入黑暗模式开关

关于黑暗模式的设计可以参考Material Design。如果你碰巧用的是React的Material-UI，那么可以方便的使用其内置的黑暗模式：

function DarkThemeApp() {
  const [darkTheme, toggleDarkTheme] = useState(false);
  const theme = createMuiTheme({
    palette: {
      type: darkTheme ? 'dark' : 'light',
    },
  });

  return (
    <MuiThemeProvider theme={theme}>
      <YourApp />

      <!-- 切换UI -->
      <Button onClick={() => toggleDarkTheme(!darkTheme)} />
    </MuiThemeProvider>
  );
}

手动开关效果：

保持与系统设置一致

目前很多网站都已经内置了一键切换黑暗模式的功能，但美中不足的是，网页的UI并未与操作系统的UI保持一致。当你夜晚开着黑暗模式在被窝刷着手机时，突然被一个煞白的网站亮瞎了24k钛合金狗眼，这种滋味一定不好受。

好在CSS媒体查询已经加入了对黑暗模式的查询，并且正被越来越多的浏览器支持

你可以方便的查询用户的操作系统是否处于黑暗模式：

@media (prefers-color-scheme: dark) {
  .theme {
    background: black;
    color: white;
  }
}

或在React中使用Hooks查询：

const darkThemeSys = useMediaQuery('(prefers-color-scheme: dark)', { noSsr: true });
<!-- 用户系统为黑暗模式时返回true，非黑暗模式或不支持该查询则返回false -->

这样你的网页UI就可以与系统随时保持一致了，如果用户设置了白天关闭黑暗模式，夜晚开启黑暗模式，你的网页也会跟随系统自动切换，无需用户手动开关，保证了体验的一致性。

效果图：

虽然目前支持改媒体查询的浏览器版本都还比较新，用户覆盖还不广，但黑暗模式大势所趋，木已成舟，越早为你的网页加入自动切换的功能，你的用户就能越早的独享属于自己的黑暗Moment。