mirror/netbox-community-netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00
Code

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

Browse Source
This commit is contained in:
Jeremy Stretch
2024-03-19 14:06:24 -04:00
committed by GitHub
parent 32edb8dfe6
commit 849a9d32d1
2 changed files with 15 additions and 15 deletions
netbox
project-static/js
setmode.js
templates/base
base.html

5
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);
};
}

25
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 %}