1

我可以用

@media (prefers-color-scheme: dark)

或者

window.matchMedia('(prefers-color-scheme: dark)').matches

检测它是否是操作系统的暗模式。

但是，有什么方法可以让我自己使用 JavaScript 修改状态？这样我就可以创建一个按钮，让用户在不想保留操作系统设置的情况下在明暗之间切换。

4

1 回答 1

2

也许支持深色模式的最简单方法是为您的浅色主题定义文本、背景、边框、阴影等的所有颜色设置，然后使用媒体查询来覆盖颜色，但正如您所指出的，这并不不要让您的访客选择切换。

为了给你的访问者一个选择，你可以在你的页面上添加一个小的、不显眼的开关（一些网站，比如 GitHub 会在他们的桌面版本上显示一个开关，但是要在移动设备上打开，用户必须打开设置功能） .

我所做的是将用户的首选项保存在 localStorage 中，并在他们下次返回时遵循存储的首选项（即使他们已经更改了系统设置）。

为了显示暗模式，我向 documentElement（html 标记）添加了一个暗模式类。在我的 CSS 中，我有第二组 CSS 规则集：

<style>
    body {
        background-color: #FFFFFF;
        font-family: 'Open Sans', sans-serif;
        color: #212121;
        font-weight: 400;
        line-height: 1.125em;
        height: 100%;
    }

    .dark-mode body {
        background-color: #121212;
        color:  #ffffff;
    }
</style>

切换颜色的另一个选项是在标签上应用 data-color-mode="dark" 属性并使用 CSS 变量：

:root {
  --background-color: #f0f0f0;
  --paragraph-color: #333;
}

[data-color-mode="dark"] {
  --background-color: #333;
  --paragraph-color: #ccc;
}

CSS 变量不适用于 Internet Explorer，因此它将恢复为 IE 的标准颜色。

因为我仍然需要支持 IE9 及更高版本，所以我不使用 CSS 变量选项，并且因为我使用基于 intersectionObserver 的延迟加载，我不给 IE 用户切换主题的选项——他们会自动获得灯光主题。

为了使它工作，我在我的头部分有以下代码：

// IE doesn't get the dark mode option – I use IntersectionObserver as a proxy for IE
if ("IntersectionObserver" in window)  {
    window.dark = JSON.parse(window.localStorage.getItem("theme_mode"));
    if (window.dark === null) { // First time - use prefers color to set the theme
        if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
            window.dark = true;
            document.documentElement.className = document.documentElement.classList.add("dark-mode");
        } else {
            window.dark = false;
        }
        localStorage.setItem("theme_mode", JSON.stringify(window.dark));
    } else if (window.dark === true) { // Returning user - prefers dark
        document.documentElement.classList.add("dark-mode");
    } // Returning user - prefers light - window.dark is false
} else { // Browser is IE - hide dark mode stuff
    document.documentElement.classList.add(" ie");
}

IE9 不支持 classList，但如果访问者使用的是 IE9，我可以选择加载 polyfill。

要设置开关功能，我在页面底部有以下代码：

// set the selector switch to the right setting
var modeToggle = document.getElementById("light-dark-toggle");
if (window.dark) {
    modeToggle.checked = true;
} else {
    modeToggle.checked = false;
}

    
modeToggle.addEventListener('change', function() {
    window.dark = modeToggle.checked;
    if (window.dark) {
        document.documentElement.classList.add("dark-mode");
    } else {
        document.documentElement.classList.remove("dark-mode");
    }
    localStorage.setItem("theme_mode", JSON.stringify(window.dark));
    lazyLoad();
});

切换开关会导致页面重新加载图像，加载深色而不是浅色，反之亦然。

于 2021-01-14T05:07:10.183 回答