diff --git a/netbox/project-static/js/setmode.js b/netbox/project-static/js/setmode.js
index 8441a542f..ff1c5366b 100644
--- a/netbox/project-static/js/setmode.js
+++ b/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);
-};
+}
diff --git a/netbox/templates/base/base.html b/netbox/templates/base/base.html
index 1c58047ef..bb35cd3bf 100644
--- a/netbox/templates/base/base.html
+++ b/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 %}
>
@@ -25,7 +19,16 @@
{# Page title #}
{% block title %}{% trans "Home" %}{% endblock %} | NetBox
+ {# Initialize color mode #}
+
@@ -53,13 +56,9 @@
{# Additional content #}
{% block head %}{% endblock %}
-
-
+
+
{# Page layout #}
{% block layout %}{% endblock %}