Темный режим не синхронизируется должным образом?
У меня проблема с синхронизацией темы админ-панели Django с темой приложения... Всякий раз, когда я переключаюсь в режим Light из режима Dark на стороне приложения, он меняется на Auto, а должен переключаться в режим Dark и наоборот. По какой-то причине эта проблема сохраняется и на стороне администратора. Если я переключусь из светлого режима в темный, находясь в панели администратора, и обновлю приложение, оно переключится в светлый режим? Это довольно странно.
Я попытался устранить неполадки, и все, что я смог найти, это ошибку, указывающую на theme.js, который является файловой частью панели администратора.
Похоже, что проблемы связаны с этим файлом...
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".