mirrors/django
1
0
Fork 0
mirror of https://github.com/django/django.git synced 2025-06-06 12:09:11 +00:00
Code Issues 32 Releases Wiki Activity

Fixed #34670 -- Improved loading of theme in admin.

Browse Source 
Thanks Sarah Abderemane for the review.
This commit is contained in:
Nicolas Lupien 2023-12-30 02:03:13 -05:00 committed by GitHub
parent e16d0c176e
commit 561e16d6a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
django/contrib/admin/static/admin/js/theme.js
View File

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

2
django/contrib/admin/templates/admin/base.html
View File

@ -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" %}">