让网站自动切换深色主题

深色模式正日益普及，在线应用如微信、知乎以及各种主流的操作系统均提供相应的深色主题选项。细心的用户可能会发现许多网站能够根据不同用户的系统设置自动选择对应的配色方案；并且在用户更改系统主色调时这些网站通常也会随之调整颜色布局以保持一致的视觉体验。

2019年7月底，Chrome 发布了 76 版本，并标志着 prefers-color-scheme 成为了大多数现代浏览器的支持。

prefers-color-scheme 是一种媒体相关属性，在 Media Query 中被用于识别用户的屏幕偏好。

该特征只有 2 种可能的值：dark 和 light。

因此，我们可以这样设置颜色：

    /* 深色模式 */
    @media (prefers-color-scheme: dark) {
    body {
        background-color: black;
    }
    }
    /* 浅色模式 */
    @media (prefers-color-scheme: light) {
    body {
        background-color: white;
    }
    }

这样设置会导致网站整体主题显示伴随用户系统主题的变化而调整；若需让网站的主题能够根据用户的个性化需求进行定制，