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 Activity

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

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
Download Patch File Download Diff File Expand all files Collapse all files

5
netbox/project-static/js/setmode.js
View File

@ -5,10 +5,11 @@
* @param inferred {boolean} Value is inferred from browser/system preference. * @param inferred {boolean} Value is inferred from browser/system preference.
*/ */
function setMode(mode, inferred) { 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", mode);
localStorage.setItem("netbox-color-mode-inferred", inferred); localStorage.setItem("netbox-color-mode-inferred", inferred);
} }
/** /**
* Determine the best initial color mode to use prior to rendering. * Determine the best initial color mode to use prior to rendering.
*/ */
@ -69,4 +70,4 @@ function initMode() {
console.error(error); console.error(error);
} }
return setMode("light", true); return setMode("light", true);
}; }

25
netbox/templates/base/base.html
View File

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