是否可以使用 JavaScript 在页面上在亮模式和暗模式之间切换？

如何解决是否可以使用 JavaScript 在页面上在亮模式和暗模式之间切换？

我可以使用

let mut todo = s.as_bytes_mut();
loop {
    match todo {
        [] => break,[_] => break,[h,rest @ ..,t] => {
            mem::swap(h,t);
            todo = rest;
        }
    }
}

或

@media (prefers-color-scheme: dark)

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

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

解决方法

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

为了给您的访问者一个选择，您可以在您的页面上添加一个不显眼的小开关（某些网站，例如 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 用户切换主题的选项——他们会自动获取浅色主题。

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

// 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();
});

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