如何实现网站黑暗模式

背景

互联网行业从业者，很多人喜欢在深夜工作，为此很多网站也做了夜间浏览模式，下面提供几种实现方式。

探索

1. 使用CSS媒体查询，根据系统自动切换不同样式

    <style>
        @media (prefers-color-scheme: dark) {
          body {
            color: #eee;
            background: #121212;
          }
          body a {
            color: #809fff;
          }
        }
  
        @media (prefers-color-scheme: light) {
          body {
            color: #222;
            background: #fff;
          }
          body a {
            color: #0033cc;
          }
        }
      </style>
    <p>hello world</p>

2. 使用JS判断，根据系统自动切换类名控制样式

    <style>
      body {
        --text-color: #222;
        --bkg-color: #fff;
        --anchor-color: #0033cc;
      }

      body.dark-theme {
        --text-color: #eee;
        --bkg-color: #121212;
        --anchor-color: