网页开发自适应浏览器黑暗模式（Dark Mode）

关键词：prefers-color-scheme

方案一：CSS

媒体查询为开发者提供了系统主题检测的属性：prefers-color-scheme，有三个可用的值：no-preference、light 和 dark。

/* light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: #f0f0f0;
    }
}

/* dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #3e3e3e;
        color: #fff;
    }
}

方案二：JS

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}