mirror of
https://github.com/django/django.git
synced 2025-06-06 12:09:11 +00:00
Fixed #34670 -- Improved loading of theme in admin.
Thanks Sarah Abderemane for the review.
This commit is contained in:
parent
e16d0c176e
commit
561e16d6a7
@ -1,56 +1,51 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
{
|
{
|
||||||
window.addEventListener('load', function(e) {
|
function setTheme(mode) {
|
||||||
|
if (mode !== "light" && mode !== "dark" && mode !== "auto") {
|
||||||
function setTheme(mode) {
|
console.error(`Got invalid theme mode: ${mode}. Resetting to auto.`);
|
||||||
if (mode !== "light" && mode !== "dark" && mode !== "auto") {
|
mode = "auto";
|
||||||
console.error(`Got invalid theme mode: ${mode}. Resetting to auto.`);
|
|
||||||
mode = "auto";
|
|
||||||
}
|
|
||||||
document.documentElement.dataset.theme = mode;
|
|
||||||
localStorage.setItem("theme", mode);
|
|
||||||
}
|
}
|
||||||
|
document.documentElement.dataset.theme = mode;
|
||||||
|
localStorage.setItem("theme", mode);
|
||||||
|
}
|
||||||
|
|
||||||
function cycleTheme() {
|
function cycleTheme() {
|
||||||
const currentTheme = localStorage.getItem("theme") || "auto";
|
const currentTheme = localStorage.getItem("theme") || "auto";
|
||||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||||
|
|
||||||
if (prefersDark) {
|
if (prefersDark) {
|
||||||
// Auto (dark) -> Light -> Dark
|
// Auto (dark) -> Light -> Dark
|
||||||
if (currentTheme === "auto") {
|
if (currentTheme === "auto") {
|
||||||
setTheme("light");
|
setTheme("light");
|
||||||
} else if (currentTheme === "light") {
|
} else if (currentTheme === "light") {
|
||||||
setTheme("dark");
|
setTheme("dark");
|
||||||
} else {
|
|
||||||
setTheme("auto");
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
// Auto (light) -> Dark -> Light
|
setTheme("auto");
|
||||||
if (currentTheme === "auto") {
|
}
|
||||||
setTheme("dark");
|
} else {
|
||||||
} else if (currentTheme === "dark") {
|
// Auto (light) -> Dark -> Light
|
||||||
setTheme("light");
|
if (currentTheme === "auto") {
|
||||||
} else {
|
setTheme("dark");
|
||||||
setTheme("auto");
|
} else if (currentTheme === "dark") {
|
||||||
}
|
setTheme("light");
|
||||||
|
} else {
|
||||||
|
setTheme("auto");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function initTheme() {
|
function initTheme() {
|
||||||
// set theme defined in localStorage if there is one, or fallback to auto mode
|
// set theme defined in localStorage if there is one, or fallback to auto mode
|
||||||
const currentTheme = localStorage.getItem("theme");
|
const currentTheme = localStorage.getItem("theme");
|
||||||
currentTheme ? setTheme(currentTheme) : setTheme("auto");
|
currentTheme ? setTheme(currentTheme) : setTheme("auto");
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupTheme() {
|
window.addEventListener('load', function(_) {
|
||||||
// Attach event handlers for toggling themes
|
const buttons = document.getElementsByClassName("theme-toggle");
|
||||||
const buttons = document.getElementsByClassName("theme-toggle");
|
Array.from(buttons).forEach((btn) => {
|
||||||
Array.from(buttons).forEach((btn) => {
|
btn.addEventListener("click", cycleTheme);
|
||||||
btn.addEventListener("click", cycleTheme);
|
});
|
||||||
});
|
|
||||||
initTheme();
|
|
||||||
}
|
|
||||||
|
|
||||||
setupTheme();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
initTheme();
|
||||||
}
|
}
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
|
<link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
|
||||||
{% block dark-mode-vars %}
|
{% block dark-mode-vars %}
|
||||||
<link rel="stylesheet" href="{% static "admin/css/dark_mode.css" %}">
|
<link rel="stylesheet" href="{% static "admin/css/dark_mode.css" %}">
|
||||||
<script src="{% static "admin/js/theme.js" %}" defer></script>
|
<script src="{% static "admin/js/theme.js" %}"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% if not is_popup and is_nav_sidebar_enabled %}
|
{% if not is_popup and is_nav_sidebar_enabled %}
|
||||||
<link rel="stylesheet" href="{% static "admin/css/nav_sidebar.css" %}">
|
<link rel="stylesheet" href="{% static "admin/css/nav_sidebar.css" %}">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user