Django管理面板与应用端深色模式同步异常求助

问题现象 #

• 应用端从深色模式切换为浅色模式时，实际会切换为自动模式，反向操作同理
• 管理端切换主题后，刷新应用端主题会异常变更，该问题在管理端自身也存在

根因分析 #

两端主题切换逻辑使用的localStorage键值不统一，导致互相覆盖后触发管理端的无效值校验：

• 管理端使用light/dark/auto作为主题值，setTheme函数会校验值的合法性，非法值会被重置为auto
• 应用端使用dark-theme/light-theme作为主题值，当管理端读取到这些值时，会判定为无效并强制设置为auto，进而引发主题混乱

修复方案 #

1. 统一两端的localStorage主题值命名，对齐管理端的light/dark/auto标准
2. 调整应用端的切换逻辑，适配统一后的主题值，同时保留自动模式的支持
3. 同步两端的主题初始化逻辑，避免互相覆盖导致异常

修正后的应用端代码 #

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

// 初始化主题显示
function initAppTheme() {
    const currentTheme = localStorage.getItem("theme") || "auto";
    updateThemeUI(currentTheme);
}

// 更新主题对应的UI元素
function updateThemeUI(mode) {
    if (mode === "dark") {
        modeIcon.src = "/public/images/sun.png";
        modeText.textContent = "Light mode";
        // 若应用端通过body类名控制主题样式，同步修改类名：
        // document.body.classList.add("dark-theme");
        // document.body.classList.remove("light-theme");
    } else if (mode === "light") {
        modeIcon.src = "/public/images/moon.png";
        modeText.textContent = "Dark mode";
        // document.body.classList.add("light-theme");
        // document.body.classList.remove("dark-theme");
    } else { // 自动模式
        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
        modeIcon.src = prefersDark ? "/public/images/sun.png" : "/public/images/moon.png";
        modeText.textContent = prefersDark ? "Light mode" : "Dark mode";
    }
}

// 主题切换逻辑
modeLink.onclick = function (e) {
    e.preventDefault(); // 阻止默认跳转，无需刷新即可更新主题（若样式支持实时切换）
    const currentTheme = localStorage.getItem("theme") || "auto";
    let newTheme;
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

    // 和管理端循环逻辑保持一致：auto→反系统模式→另一模式→auto
    if (currentTheme === "auto") {
        newTheme = prefersDark ? "light" : "dark";
    } else if (currentTheme === "dark") {
        newTheme = "light";
    } else {
        newTheme = "auto";
    }

    localStorage.setItem("theme", newTheme);
    updateThemeUI(newTheme);
    // 若必须刷新才能生效样式，取消下面注释：
    // location.reload();
};

// 页面加载时初始化主题
window.addEventListener('load', initAppTheme);

关键修改说明 #

• 统一主题值命名：使用light/dark/auto替代原有的light-theme/dark-theme，和管理端逻辑对齐
• 新增初始化与UI更新函数：确保页面加载时主题显示正确，切换后实时更新图标和文本
• 对齐循环逻辑：保持和管理端一致的主题切换顺序，避免操作逻辑不一致导致的异常
• 可选取消页面刷新：若应用端样式支持通过类名或CSS变量实时切换，可移除location.reload()提升用户体验

内容的提问来源于stack exchange，提问作者sens