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

#6797: Fix color flashing when server mode doesn't match select mode or client preference

Browse Source
This commit is contained in:
checktheroads
2021-07-24 10:31:46 -07:00
parent bf2d535356
commit 189e733f81
9 changed files with 55 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,15 @@
{% load static %}
{% load helpers %}
<!DOCTYPE html>
<html lang="en">
<html
lang="en"
data-netbox-path="{{ request.path }}"
{% if preferences|get_key:'ui.colormode' == 'dark'%}
data-netbox-color-mode="dark"
{% else %}
data-netbox-color-mode="light"
{% endif %}
>
<head>
<meta charset="UTF-8" />
<meta
@@ -13,6 +21,37 @@
{# Page title #}
<title>{% block title %}Home{% endblock %} | NetBox</title>
<script>
/**
* Determine the best initial color mode to use prior to rendering.
*/
(function() {
// Browser prefers dark color scheme.
var preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Browser prefers light color scheme.
var preferLight = window.matchMedia('(prefers-color-scheme: light)').matches;
// Client NetBox color-mode override.
var clientMode = localStorage.getItem('netbox-color-mode');
// NetBox server-rendered value.
var serverMode = document.documentElement.getAttribute('data-netbox-color-mode');
if ((clientMode !== null) && (clientMode !== serverMode)) {
// If the client mode is set, use its value over the server's value.
return document.documentElement.setAttribute('data-netbox-color-mode', clientMode);
}
if (preferDark && serverMode === 'light') {
// If the client value matches the server value, the browser preferrs dark-mode, but
// the server value doesn't match the browser preference, use dark mode.
return document.documentElement.setAttribute('data-netbox-color-mode', 'dark');
}
if (preferLight && serverMode === 'dark') {
// If the client value matches the server value, the browser preferrs dark-mode, but
// the server value doesn't match the browser preference, use light mode.
return document.documentElement.setAttribute('data-netbox-color-mode', 'light');
}
})();
</script>
{# Static resources #}
<link
rel="stylesheet"
@@ -42,12 +81,7 @@
{% block head %}{% endblock %}
</head>
<body
{% if preferences|get_key:'ui.colormode' == 'dark'%} data-netbox-color-mode="dark"
{% else %} data-netbox-color-mode="light"
{% endif %}
data-netbox-path="{{ request.path }}"
>
<body>
{# Page layout #}
{% block layout %}{% endblock %}