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

Thanks Sarah Abderemane for the review.
felixxm · Dec 30, 2023 · 561e16d · 561e16d
1 parent e16d0c1
commit 561e16d
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 45 deletions.
diff --git a/django/contrib/admin/static/admin/js/theme.js b/django/contrib/admin/static/admin/js/theme.js
@@ -1,56 +1,51 @@
 '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 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;
+    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");
-                }
+        if (prefersDark) {
+            // Auto (dark) -> Light -> Dark
+            if (currentTheme === "auto") {
+                setTheme("light");
+            } else if (currentTheme === "light") {
+                setTheme("dark");
             } else {
-                // Auto (light) -> Dark -> Light
-                if (currentTheme === "auto") {
-                    setTheme("dark");
-                } else if (currentTheme === "dark") {
-                    setTheme("light");
-                } else {
-                    setTheme("auto");
-                }
+                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();
-        }
+    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");
+    }
 
-        setupTheme();
+    window.addEventListener('load', function(_) {
+        const buttons = document.getElementsByClassName("theme-toggle");
+        Array.from(buttons).forEach((btn) => {
+            btn.addEventListener("click", cycleTheme);
+        });
     });
+
+    initTheme();
 }
diff --git a/django/contrib/admin/templates/admin/base.html b/django/contrib/admin/templates/admin/base.html
@@ -6,7 +6,7 @@
 <link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
 {% block dark-mode-vars %}
   <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 %}
 {% if not is_popup and is_nav_sidebar_enabled %}
   <link rel="stylesheet" href="{% static "admin/css/nav_sidebar.css" %}">