diff --git a/docs/development/user-preferences.md b/docs/development/user-preferences.md index ceb5321a9..deb469bfb 100644 --- a/docs/development/user-preferences.md +++ b/docs/development/user-preferences.md @@ -11,4 +11,3 @@ The `users.UserConfig` model holds individual preferences for each user in the f | pagination.placement | Where to display the paginator controls relative to the table | | tables.${table}.columns | The ordered list of columns to display when viewing the table | | tables.${table}.ordering | A list of column names by which the table should be ordered | -| ui.colormode | Light or dark mode in the user interface | diff --git a/netbox/netbox/preferences.py b/netbox/netbox/preferences.py index aa37bffae..d560ef1dd 100644 --- a/netbox/netbox/preferences.py +++ b/netbox/netbox/preferences.py @@ -15,15 +15,6 @@ def get_page_lengths(): PREFERENCES = { # User interface - 'ui.colormode': UserPreference( - label=_('Color mode'), - choices=( - ('light', _('Light')), - ('dark', _('Dark')), - ), - default='light', - description=_('Preferred default UI theme') - ), 'ui.htmx_navigation': UserPreference( label=_('HTMX Navigation'), choices=( diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index 5a8a9e833..7e8feeb18 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 c44bc6481..63f586436 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/js/setmode.js b/netbox/project-static/js/setmode.js index ff1c5366b..9418a9f39 100644 --- a/netbox/project-static/js/setmode.js +++ b/netbox/project-static/js/setmode.js @@ -1,13 +1,11 @@ /** * Set the color mode on the `` 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); } diff --git a/netbox/project-static/src/colorMode.ts b/netbox/project-static/src/colorMode.ts index 894a1e8a5..453617740 100644 --- a/netbox/project-static/src/colorMode.ts +++ b/netbox/project-static/src/colorMode.ts @@ -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; - 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); } diff --git a/netbox/templates/base/base.html b/netbox/templates/base/base.html index acaff4295..f7fa3fa50 100644 --- a/netbox/templates/base/base.html +++ b/netbox/templates/base/base.html @@ -8,9 +8,6 @@ lang="en" 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 %} - data-netbox-color-mode="{{ color_mode|default:"unset" }}" - {% endwith %} > diff --git a/netbox/users/forms/model_forms.py b/netbox/users/forms/model_forms.py index b14300d80..e5b9b612e 100644 --- a/netbox/users/forms/model_forms.py +++ b/netbox/users/forms/model_forms.py @@ -62,7 +62,7 @@ class UserConfigFormMetaclass(forms.models.ModelFormMetaclass): class UserConfigForm(forms.ModelForm, metaclass=UserConfigFormMetaclass): fieldsets = ( FieldSet( - 'locale.language', 'pagination.per_page', 'pagination.placement', 'ui.colormode', 'ui.htmx_navigation', + 'locale.language', 'pagination.per_page', 'pagination.placement', 'ui.htmx_navigation', name=_('User Interface') ), FieldSet('data_format', name=_('Miscellaneous')),