diff --git a/netbox/project-static/dist/config.js b/netbox/project-static/dist/config.js deleted file mode 100644 index 02e2c5518..000000000 Binary files a/netbox/project-static/dist/config.js and /dev/null differ diff --git a/netbox/project-static/dist/config.js.map b/netbox/project-static/dist/config.js.map deleted file mode 100644 index 65dcddcf2..000000000 Binary files a/netbox/project-static/dist/config.js.map and /dev/null differ diff --git a/netbox/project-static/dist/lldp.js b/netbox/project-static/dist/lldp.js deleted file mode 100644 index 77430ea57..000000000 Binary files a/netbox/project-static/dist/lldp.js and /dev/null differ diff --git a/netbox/project-static/dist/lldp.js.map b/netbox/project-static/dist/lldp.js.map deleted file mode 100644 index d7a46d320..000000000 Binary files a/netbox/project-static/dist/lldp.js.map and /dev/null differ diff --git a/netbox/project-static/dist/materialdesignicons-webfont-2ZY4X5WS.woff b/netbox/project-static/dist/materialdesignicons-webfont-2ZY4X5WS.woff deleted file mode 100644 index a5ee6239d..000000000 Binary files a/netbox/project-static/dist/materialdesignicons-webfont-2ZY4X5WS.woff and /dev/null differ diff --git a/netbox/project-static/dist/materialdesignicons-webfont-EH3JD4GG.ttf b/netbox/project-static/dist/materialdesignicons-webfont-EH3JD4GG.ttf deleted file mode 100644 index 55456295b..000000000 Binary files a/netbox/project-static/dist/materialdesignicons-webfont-EH3JD4GG.ttf and /dev/null differ diff --git a/netbox/project-static/dist/materialdesignicons-webfont-KSYPMDN6.woff2 b/netbox/project-static/dist/materialdesignicons-webfont-KSYPMDN6.woff2 deleted file mode 100644 index 384ae5734..000000000 Binary files a/netbox/project-static/dist/materialdesignicons-webfont-KSYPMDN6.woff2 and /dev/null differ diff --git a/netbox/project-static/dist/materialdesignicons-webfont-LWDVGUDX.eot b/netbox/project-static/dist/materialdesignicons-webfont-LWDVGUDX.eot deleted file mode 100644 index 253bb4a5b..000000000 Binary files a/netbox/project-static/dist/materialdesignicons-webfont-LWDVGUDX.eot and /dev/null differ diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index e9509a52b..012bcf2af 100644 Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index d71e22312..edc2715e0 100644 Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ diff --git a/netbox/project-static/dist/status.js b/netbox/project-static/dist/status.js deleted file mode 100644 index cf9cd63ab..000000000 Binary files a/netbox/project-static/dist/status.js and /dev/null differ diff --git a/netbox/project-static/dist/status.js.map b/netbox/project-static/dist/status.js.map deleted file mode 100644 index 6073a6bd7..000000000 Binary files a/netbox/project-static/dist/status.js.map and /dev/null differ diff --git a/netbox/project-static/js/setmode.js b/netbox/project-static/js/setmode.js index 8441a542f..46c93eb83 100644 --- a/netbox/project-static/js/setmode.js +++ b/netbox/project-static/js/setmode.js @@ -1,72 +1,42 @@ /** - * Set the color mode on the `` element and in local storage. + * Set the color mode on the `` element. * - * @param mode {"dark" | "light"} NetBox Color Mode. - * @param inferred {boolean} Value is inferred from browser/system preference. + * @param mode {"dark" | "light" | "system"} NetBox Color Mode. */ -function setMode(mode, inferred) { - document.documentElement.setAttribute("data-netbox-color-mode", mode); - localStorage.setItem("netbox-color-mode", mode); - localStorage.setItem("netbox-color-mode-inferred", inferred); +function setMode(mode) { + if (mode === 'system') { + mode = getSystemColorMode(); + } + document.documentElement.setAttribute('data-netbox-color-mode', mode); } + +/** + * Determine the system color mode (light or dark). + * + * @return {string} "dark" or "light" based on system preference. + */ +function getSystemColorMode() { + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; +} + /** * Determine the best initial color mode to use prior to rendering. */ 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. - 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")); + try { + // NetBox server-rendered value. + const serverMode = document.documentElement.getAttribute('data-netbox-color-mode'); - 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. - 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); + if (serverMode === 'light' || serverMode === 'dark' || serverMode === 'system') { + // If the server mode is set (light, dark, or system), use the server mode. + return setMode(serverMode); } - return setMode("light", true); -}; + + // If server mode is not set, use the system color mode. + return setMode('system'); + } catch (error) { + // In the event of an error, log it to the console and set the mode to system mode. + console.error(error); + return setMode('system'); + } +} diff --git a/netbox/project-static/src/colorMode.ts b/netbox/project-static/src/colorMode.ts deleted file mode 100644 index dfd05df4f..000000000 --- a/netbox/project-static/src/colorMode.ts +++ /dev/null @@ -1,134 +0,0 @@ -import { getElements, isTruthy } from './util'; - -const COLOR_MODE_KEY = 'netbox-color-mode'; -const TEXT_WHEN_DARK = 'Light Mode'; -const TEXT_WHEN_LIGHT = 'Dark Mode'; -const ICON_WHEN_DARK = 'mdi-lightbulb-on'; -const ICON_WHEN_LIGHT = 'mdi-lightbulb'; - -/** - * Determine if a value is a supported color mode string value. - */ -function isColorMode(value: unknown): value is ColorMode { - return value === 'dark' || value === 'light'; -} - -/** - * Set the color mode to light or dark. - * - * @param mode `'light'` or `'dark'` - * @returns `true` if the color mode was successfully set, `false` if not. - */ -function storeColorMode(mode: ColorMode): void { - return localStorage.setItem(COLOR_MODE_KEY, mode); -} - -function updateElements(targetMode: ColorMode): void { - document.documentElement.setAttribute(`data-${COLOR_MODE_KEY}`, targetMode); - - for (const text of getElements('span.color-mode-text')) { - if (targetMode === 'light') { - text.innerText = TEXT_WHEN_LIGHT; - } else if (targetMode === 'dark') { - text.innerText = TEXT_WHEN_DARK; - } - } - for (const icon of getElements('i.color-mode-icon', 'span.color-mode-icon')) { - if (targetMode === 'light') { - icon.classList.remove(ICON_WHEN_DARK); - icon.classList.add(ICON_WHEN_LIGHT); - } else if (targetMode === 'dark') { - icon.classList.remove(ICON_WHEN_LIGHT); - icon.classList.add(ICON_WHEN_DARK); - } - } - - for (const elevation of getElements('.rack_elevation')) { - const svg = elevation.contentDocument?.querySelector('svg') ?? null; - if (svg !== null) { - svg.setAttribute(`data-${COLOR_MODE_KEY}`, targetMode); - } - } -} - -/** - * Call all functions necessary to update the color mode across the UI. - * - * @param mode Target color mode. - */ -export function setColorMode(mode: ColorMode): void { - for (const func of [storeColorMode, updateElements]) { - func(mode); - } -} - -/** - * Toggle the color mode when a color mode toggle is clicked. - */ -function handleColorModeToggle(): void { - const currentValue = localStorage.getItem(COLOR_MODE_KEY); - if (currentValue === 'light') { - setColorMode('dark'); - } else if (currentValue === 'dark') { - setColorMode('light'); - } else { - console.warn('Unable to determine the current color mode'); - } -} - -/** - * Determine the user's preference and set it as the color mode. - */ -function defaultColorMode(): void { - // Get the current color mode value from local storage. - const currentValue = localStorage.getItem(COLOR_MODE_KEY) as Nullable; - const serverValue = document.documentElement.getAttribute(`data-${COLOR_MODE_KEY}`); - - if (isTruthy(serverValue) && isTruthy(currentValue)) { - return setColorMode(currentValue); - } - - let preference: ColorModePreference = 'none'; - - // Determine if the user prefers dark or light mode. - for (const mode of ['dark', 'light']) { - if (window.matchMedia(`(prefers-color-scheme: ${mode})`).matches) { - preference = mode as ColorModePreference; - break; - } - } - - if (isTruthy(currentValue) && !isTruthy(serverValue) && isColorMode(currentValue)) { - return setColorMode(currentValue); - } - - switch (preference) { - case 'dark': - return setColorMode('dark'); - case 'light': - return setColorMode('light'); - case 'none': - return setColorMode('light'); - default: - return setColorMode('light'); - } -} - -/** - * Initialize color mode toggle buttons and set the default color mode. - */ -function initColorModeToggle(): void { - for (const element of getElements('button.color-mode-toggle')) { - element.addEventListener('click', handleColorModeToggle); - } -} - -/** - * Initialize all color mode elements. - */ -export function initColorMode(): void { - window.addEventListener('load', defaultColorMode); - for (const func of [initColorModeToggle]) { - func(); - } -} diff --git a/netbox/project-static/src/netbox.ts b/netbox/project-static/src/netbox.ts index ed294e655..05c24b0fa 100644 --- a/netbox/project-static/src/netbox.ts +++ b/netbox/project-static/src/netbox.ts @@ -3,7 +3,6 @@ import { initBootstrap } from './bs'; import { initQuickSearch } from './search'; import { initSelect } from './select'; import { initButtons } from './buttons'; -import { initColorMode } from './colorMode'; import { initMessages } from './messages'; import { initClipboard } from './clipboard'; import { initDateSelector } from './dateSelector'; @@ -18,7 +17,6 @@ import { initHtmx } from './htmx'; function initDocument(): void { for (const init of [ initBootstrap, - initColorMode, initMessages, initForms, initQuickSearch, diff --git a/netbox/templates/base/base.html b/netbox/templates/base/base.html index 138a92b6d..c9ca39b15 100644 --- a/netbox/templates/base/base.html +++ b/netbox/templates/base/base.html @@ -7,13 +7,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 }} {% endwith %} >