深色模式自动适用于除 Firefox 之外的所有页面

Question

在 Firefox（及其分支）中，深色模式不会自动应用于所有页面。如果您选择深色模式，则它仅适用于一个页面，您必须在每个页面上手动设置。在其他浏览器（Brave、Opera等）中，如果您设置一次深色模式，所有页面将自动处于深色模式。 为什么这段代码在 Firefox 中不能正常工作？本地存储不起作用？我必须使用cookie吗？

let trilho = document.getElementById('trilho');
let body = document.querySelector('body');

// Check local storage for the user's theme preference
const theme = window.localStorage.getItem("theme");

// Set the initial theme based on localStorage
if (theme === "dark") {
    body.classList.add("dark");
    trilho.classList.add("dark"); // Ensure the button reflects dark mode
} else {
    trilho.classList.remove("dark"); // Ensure the button reflects light mode
}

// Add event listener to toggle dark mode
trilho.addEventListener('click', () => {
    trilho.classList.toggle('dark');
    body.classList.toggle('dark');

    // Update localStorage with the current theme
    if (body.classList.contains("dark")) {
        window.localStorage.setItem("theme", "dark");
        trilho.classList.add("dark"); // Dark mode button
    } else {
        window.localStorage.setItem("theme", "light");
        trilho.classList.remove("dark"); // Light mode button
    }
});

Answer 1

@Kay8 处理暗模式的正确方法是通过 CSS。用户应在浏览器中设置暗模式首选项。这为用户提供了最一致的体验。

示例：

@media (prefers-color-scheme: dark) {
  .theme-a.adaptive {
    background: #753;
    color: #dcb;
    outline: 5px dashed #000;
  }
}