我可以使用 JavaScript 切换暗模式吗？

Question

我正在使用prefers-color-scheme: darkCSS 创建一个深色主题（它适用于macOS v10.14 (Mojave) 中的Safari ）。有没有办法强制页面在其他不支持它的浏览器上使用我的暗模式代码，如下所示？

document.querySelector('#toggleDarkMode').addEventListener('click', function () {
    -- Force page to use dark mode defined in CSS
})

Answer 1

不。

解决方法是将更改为自定义属性的每个属性移动。

然后你可以做这样的事情：

p {
    color: var(--body-colour);
}

并将其与：

/* default, light scheme */
body {
    --body-colour: black;
}

@media (prefers-color-scheme: dark) {
    body {
        --body-colour: white;
    }
}

body.light-mode {
    --body-colour: black;
}

body.dark-mode {
    --body-colour: white;
}

然后你的 JavaScript 只需要向body 元素添加一个light-mode或dark-mode类来强制使用该模式（覆盖默认值（如果浏览器不支持该功能，或者它被设置为亮模式）或暗模式媒体版本）。