深色模式无法正常同步？

Question

我在同步 Django 管理面板主题与应用程序端主题时遇到问题...每当我在应用程序端从深色模式切换到浅色模式时，它都会更改为自动，而应该切换到深色模式，并且反之亦然。由于某种原因，该问题在管理端也仍然存在。如果我在管理面板中从浅色模式切换到深色模式并刷新应用程序一侧，它会将其更改为浅色模式吗？真是奇怪啊。

我尝试对其进行故障排除，我发现有一个错误指向 theme.js，它是管理面板的文件部分。

问题似乎源于此文件...

主题.js

'use strict';
{
    window.addEventListener('load', function(e) {

        function setTheme(mode) {
            if (mode !== "light" && mode !== "dark" && mode !== "auto") {
                console.error(`Got invalid theme mode: ${mode}. Resetting to auto.`);
                mode = "auto";
            }
            document.documentElement.dataset.theme = mode;
            localStorage.setItem("theme", mode);
        }

        function cycleTheme() {
            const currentTheme = localStorage.getItem("theme") || "auto";
            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

            if (prefersDark) {
                // Auto (dark) -> Light -> Dark
                if (currentTheme === "auto") {
                    setTheme("light");
                } else if (currentTheme === "light") {
                    setTheme("dark");
                } else {
                    setTheme("auto");
                }
            } else {
                // Auto (light) -> Dark -> Light
                if (currentTheme === "auto") {
                    setTheme("dark");
                } else if (currentTheme === "dark") {
                    setTheme("light");
                } else {
                    setTheme("auto");
                }
            }
        }

        function initTheme() {
            // set theme defined in localStorage if there is one, or fallback to auto mode
            const currentTheme = localStorage.getItem("theme");
            currentTheme ? setTheme(currentTheme) : setTheme("auto");
        }

        function setupTheme() {
            // Attach event handlers for toggling themes
            const buttons = document.getElementsByClassName("theme-toggle");
            Array.from(buttons).forEach((btn) => {
                btn.addEventListener("click", cycleTheme);
            });
            initTheme();
        }

        setupTheme();
    });
}

这是应用程序端用于切换模式的暗模式文件：

const modeLink = document.getElementById('bg_mode');
const body = document.body;
const modeIcon = document.getElementById('mode-icon');
const modeText = document.getElementById('mode-text');

modeLink.onclick = function () {
    if (localStorage.getItem("theme") === "dark-theme") {
        localStorage.setItem("theme", "light-theme");
        modeIcon.src = "/public/images/moon.png";
        modeText.textContent = "Dark mode";
        location.reload();

    } else {
        localStorage.setItem("theme", "dark-theme");
        modeIcon.src = "/public/images/sun.png";
        modeText.textContent = "Light mode";
        location.reload();
    }
}

它可能会使用变量覆盖 localStorage 吗？任何提示将不胜感激！！

Answer 1

问题是您导入的文件（包含错误）仅接受主题：“浅色”和“深色”。在你的代码中：

localStorage.setItem("theme", "dark-theme");

您尝试将主题设置为不受支持的“深色主题”。 一个快速解决方法是将代码中的所有“深色主题”实例替换为“深色”，将“浅色主题”替换为“浅色”。确保还更改 if 语句：

if (localStorage.getItem("theme") === "dark-theme")