NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-09 21:32:17 -06:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Closes #15630: Remove server-side color mode preference & simplify toggling

Browse Source
This commit is contained in:
Jeremy Stretch
2024-05-01 17:02:12 -04:00
parent 44a7cd9876
commit 6530051958
8 changed files with 22 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
netbox/project-static/dist/netbox.js vendored
View File

File diff suppressed because one or more lines are too long

2
netbox/project-static/dist/netbox.js.map vendored
View File

File diff suppressed because one or more lines are too long

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

@@ -1,13 +1,11 @@
/**
* Set the color mode on the `<html/>` element and in local storage.
*
* @param mode {"dark" | "light"} NetBox Color Mode.
* @param inferred {boolean} Value is inferred from browser/system preference.
* @param mode {"dark" | "light"} UI color mode.
*/
function setMode(mode, inferred) {
function setMode(mode) {
document.documentElement.setAttribute("data-bs-theme", mode);
localStorage.setItem("netbox-color-mode", mode);
localStorage.setItem("netbox-color-mode-inferred", inferred);
}
/**
@@ -15,59 +13,29 @@ function setMode(mode, inferred) {
*/
function initMode() {
try {
// 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.
// Determine the configured color mode, if any
var clientMode = localStorage.getItem("netbox-color-mode");
// NetBox server-rendered value.
var serverMode = document.documentElement.getAttribute("data-netbox-color-mode");
// Color mode is inferred from browser/system preference and not deterministically set by
// the client or server.
var inferred = JSON.parse(localStorage.getItem("netbox-color-mode-inferred"));
// Detect browser preference, if set
var preferDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
var preferLight = window.matchMedia("(prefers-color-scheme: light)").matches;
if (inferred === true && (serverMode === "light" || serverMode === "dark")) {
// The color mode was previously inferred from browser/system preference, but
// the server now has a value, so we should use the server's value.
return setMode(serverMode, false);
}
if (clientMode === null && (serverMode === "light" || serverMode === "dark")) {
// If the client mode is not set but the server mode is, use the server mode.
return setMode(serverMode, false);
}
if (clientMode !== null && serverMode === "unset") {
// The color mode has been set, deterministically or otherwise, and the server
// has no preference or has not been set. Use the client mode, but allow it to
/// be overridden by the server if/when a server value exists.
return setMode(clientMode, true);
}
if (
clientMode !== null &&
(serverMode === "light" || serverMode === "dark") &&
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.
// Use the selected color mode, if any
if (clientMode !== null) {
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.
// Fall back to the mode preferred by the browser, if specified
if (preferDark) {
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.
else if (preferLight) {
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);
}
// Default to light mode
return setMode("light", true);
}

5
netbox/project-static/src/colorMode.ts
View File

@@ -65,9 +65,8 @@ function handleColorModeToggle(): void {
function defaultColorMode(): void {
// Get the current color mode value from local storage.
const currentValue = localStorage.getItem(COLOR_MODE_KEY) as Nullable<ColorMode>;
const serverValue = document.documentElement.getAttribute(`data-${COLOR_MODE_KEY}`);
if (isTruthy(serverValue) && isTruthy(currentValue)) {
if (isTruthy(currentValue)) {
return setColorMode(currentValue);
}
@@ -81,7 +80,7 @@ function defaultColorMode(): void {
}
}
if (isTruthy(currentValue) && !isTruthy(serverValue) && isColorMode(currentValue)) {
if (isTruthy(currentValue) && isColorMode(currentValue)) {
return setColorMode(currentValue);
}