Ver código fonte

Fixes #15340: Fix flicker on page load with dark mode enabled (#15475)

Jeremy Stretch 1 ano atrás
pai
commit
849a9d32d1
2 arquivos alterados com 15 adições e 15 exclusões
  1. 3 2
      netbox/project-static/js/setmode.js
  2. 12 13
      netbox/templates/base/base.html

+ 3 - 2
netbox/project-static/js/setmode.js

@@ -5,10 +5,11 @@
  * @param inferred {boolean} Value is inferred from browser/system preference.
  */
 function setMode(mode, inferred) {
-    document.documentElement.setAttribute("data-netbox-color-mode", mode);
+    document.documentElement.setAttribute("data-bs-theme", mode);
     localStorage.setItem("netbox-color-mode", mode);
     localStorage.setItem("netbox-color-mode-inferred", inferred);
 }
+
 /**
  * Determine the best initial color mode to use prior to rendering.
  */
@@ -69,4 +70,4 @@ function initMode() {
         console.error(error);
     }
     return setMode("light", true);
-};
+}

+ 12 - 13
netbox/templates/base/base.html

@@ -9,13 +9,7 @@
   data-netbox-url-name="{{ request.resolver_match.url_name }}"
   data-netbox-base-path="{{ settings.BASE_PATH }}"
   {% with preferences|get_key:'ui.colormode' as color_mode %}
-    {% if color_mode == 'dark'%}
-      data-netbox-color-mode="dark"
-    {% elif color_mode == 'light' %}
-      data-netbox-color-mode="light"
-    {% else %}
-      data-netbox-color-mode="unset"
-    {% endif %}
+    data-netbox-color-mode="{{ color_mode|default:"unset" }}"
   {% endwith %}
   >
   <head>
@@ -25,7 +19,16 @@
     {# Page title #}
     <title>{% block title %}{% trans "Home" %}{% endblock %} | NetBox</title>
 
+    {# Initialize color mode #}
+    <script
+      type="text/javascript"
+      src="{% static 'setmode.js' %}"
+      onerror="window.location='{% url 'media_failure' %}?filename=setmode.js'">
+    </script>
     <script type="text/javascript">
+      (function () {
+        initMode()
+      })();
       window.CSRF_TOKEN = "{{ csrf_token }}";
     </script>
 
@@ -53,13 +56,9 @@
 
     {# Additional <head> content #}
     {% block head %}{% endblock %}
-  </head>
 
-  <body
-    {% if preferences|get_key:'ui.colormode' == 'dark' %}
-      data-bs-theme="dark"
-    {% endif %}
-  >
+  </head>
+  <body>
 
     {# Page layout #}
     {% block layout %}{% endblock %}