几行代码让你的网页适配黑暗模式

随着苹果最近强推黑暗模式，越来越多的应用都要支持黑暗模式才能上架苹果商店，既然APP都适配了黑暗模式，那网站适配黑暗模式也是一件需要提上日程的事情了。

PC端实现黑暗模式有两种方式，一种是纯CSS实现，另一种是通过JavaScript操作实现。

通过媒体查询实现dark模式自动切换

纯CSS实现切换需要借助媒体查询来实现，使用这种方式会根据浏览器是否使用黑暗模式来自适应，用户不能手动去控制（除非用户更改浏览器设置）。

代码实现：

@media (prefers-color-scheme: dark) {
   
  :root {
   
    --accent: #3493d1;
    --main: #f3f3f3;
    --light: #ececec;
    --lighter: #666666;
    --border: #e6e6e6;
    --bg: #333333;
  }
}

 :root {
   
    --accent: #226997;
    --main: #333;
    --light: #666;
    --lighter: #f3f3f3;
    --border: #e6e6e6;
    --bg: #ffffff;
  }
  
  html,
  body {
   
    background-color: var(--bg);
  }
  
  p {
   
    color: