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 #7599: Improve color mode handling

Browse Source
This commit is contained in:
thatmattlove
2021-10-27 11:34:21 -07:00
parent dfdeac4968
commit a090955918
2 changed files with 73 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/release-notes/version-3.0.md
View File

@ -4,6 +4,7 @@
### Bug Fixes ### Bug Fixes
* [#7599](https://github.com/netbox-community/netbox/issues/7599) - Improve color mode preference handling
* [#7601](https://github.com/netbox-community/netbox/issues/7601) - Correct devices count for locations within global search results * [#7601](https://github.com/netbox-community/netbox/issues/7601) - Correct devices count for locations within global search results
* [#7612](https://github.com/netbox-community/netbox/issues/7612) - Strip HTML from custom field descriptions * [#7612](https://github.com/netbox-community/netbox/issues/7612) - Strip HTML from custom field descriptions
* [#7628](https://github.com/netbox-community/netbox/issues/7628) - Fix `load_yaml` method for custom scripts * [#7628](https://github.com/netbox-community/netbox/issues/7628) - Fix `load_yaml` method for custom scripts

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

@ -27,55 +27,78 @@
<title>{% block title %}Home{% endblock %} | NetBox</title> <title>{% block title %}Home{% endblock %} | NetBox</title>
<script type="text/javascript"> <script type="text/javascript">
/** /**
* Set the color mode on the `<html/>` element and in local storage. * Set the color mode on the `<html/>` element and in local storage.
*/ *
function setMode(mode) { * @param mode {"dark" | "light"} NetBox Color Mode.
document.documentElement.setAttribute("data-netbox-color-mode", mode); * @param inferred {boolean} Value is inferred from browser/system preference.
localStorage.setItem("netbox-color-mode", mode); */
} function setMode(mode, inferred) {
/** document.documentElement.setAttribute("data-netbox-color-mode", mode);
* Determine the best initial color mode to use prior to rendering. localStorage.setItem("netbox-color-mode", mode);
*/ localStorage.setItem("netbox-color-mode-inferred", inferred);
(function () { }
try { /**
// Browser prefers dark color scheme. * Determine the best initial color mode to use prior to rendering.
var preferDark = window.matchMedia("(prefers-color-scheme: dark)").matches; */
// Browser prefers light color scheme. (function () {
var preferLight = window.matchMedia("(prefers-color-scheme: light)").matches; try {
// Client NetBox color-mode override. // Browser prefers dark color scheme.
var clientMode = localStorage.getItem("netbox-color-mode"); var preferDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
// NetBox server-rendered value. // Browser prefers light color scheme.
var serverMode = document.documentElement.getAttribute("data-netbox-color-mode"); var preferLight = window.matchMedia("(prefers-color-scheme: light)").matches;
// Client NetBox color-mode override.
if (clientMode === null && (serverMode === "light" || serverMode === "dark")) { var clientMode = localStorage.getItem("netbox-color-mode");
// If the client mode is not set but the server mode is, use the server mode. // NetBox server-rendered value.
return setMode(serverMode); var serverMode = document.documentElement.getAttribute("data-netbox-color-mode");
} // Color mode is inferred from browser/system preference and not deterministically set by
if (clientMode !== null && clientMode !== serverMode) { // the client or server.
// If the client mode is set and is different than the server mode, use the client mode var inferred = JSON.parse(localStorage.getItem("netbox-color-mode-inferred"));
// over the server mode, as it should be more recent.
return setMode(clientMode); if (inferred === true && (serverMode === "light" || serverMode === "dark")) {
} // The color mode was previously inferred from browser/system preference, but
if (clientMode === serverMode) { // the server now has a value, so we should use the server's value.
// If the client and server modes match, use that value. return setMode(serverMode, false);
return setMode(clientMode); }
} if (clientMode === null && (serverMode === "light" || serverMode === "dark")) {
if (preferDark && serverMode === "unset") { // If the client mode is not set but the server mode is, use the server mode.
// If the server mode is not set but the browser prefers dark mode, use dark mode. return setMode(serverMode, false);
return setMode("dark"); }
} if (clientMode !== null && serverMode === "unset") {
if (preferLight && serverMode === "unset") { // The color mode has been set, deterministically or otherwise, and the server
// If the server mode is not set but the browser prefers light mode, use light mode. // has no preference or has not been set. Use the client mode, but allow it to
return setMode("light"); /// be overridden by the server if/when a server value exists.
} return setMode(clientMode, true);
} catch (error) { }
// In the event of an error, log it to the console and set the mode to light mode. if (
console.error(error); clientMode !== null &&
} (serverMode === "light" || serverMode === "dark") &&
return setMode("light"); clientMode !== serverMode
})(); ) {
// If the client mode is set and is different than the server mode (which is also set),
// use the client mode over the server mode, as it should be more recent.
return setMode(clientMode, false);
}
if (clientMode === serverMode) {
// If the client and server modes match, use that value.
return setMode(clientMode, false);
}
if (preferDark && serverMode === "unset") {
// If the server mode is not set but the browser prefers dark mode, use dark mode, but
// allow it to be overridden by an explicit preference.
return setMode("dark", true);
}
if (preferLight && serverMode === "unset") {
// If the server mode is not set but the browser prefers light mode, use light mode,
// but allow it to be overridden by an explicit preference.
return setMode("light", true);
}
} catch (error) {
// In the event of an error, log it to the console and set the mode to light mode.
console.error(error);
}
return setMode("light", true);
})();
</script> </script>
{# Static resources #} {# Static resources #}