Темный режим не синхронизируется должным образом?

У меня проблема с синхронизацией темы админ-панели Django с темой приложения... Всякий раз, когда я переключаюсь в режим Light из режима Dark на стороне приложения, он меняется на Auto, а должен переключаться в режим Dark и наоборот. По какой-то причине эта проблема сохраняется и на стороне администратора. Если я переключусь из светлого режима в темный, находясь в панели администратора, и обновлю приложение, оно переключится в светлый режим? Это довольно странно.

Я попытался устранить неполадки, и все, что я смог найти, это ошибку, указывающую на theme.js, который является файловой частью панели администратора.

Error

Похоже, что проблемы связаны с этим файлом...

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

Вот файл Dark mode, используемый на стороне приложения для переключения между режимами:

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 с помощью переменной? Любые советы будут высоко оценены!!!

Проблема в том, что файл, который вы импортировали (который содержит ошибку), принимает только темы: 'light' и 'dark'. В вашем коде:

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

Вы пытались установить тему 'dark-theme', которая не поддерживается. Быстрое исправление заключается в замене всех случаев 'dark-theme' в вашем коде на 'dark' и 'light-theme' на 'light'. Убедитесь, что вы также изменили оператор if:

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

Проблема в том, что вы используете два разных имени: "темная", "dark-theme", и "светлая", "light-theme". Замена всех "dark-theme" на "dark" и "light-theme" на "" должна решить вашу проблему.

Ваша ошибка связана с функцией setTheme, поскольку она принимает только значения "light", "dark" и "auto".

Вернуться на верх