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

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                      |

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=(

netbox/project-static/js/setmode.js

@@ -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);
 }

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<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);
   }
 

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 %}
   >
   <head>
     <meta charset="UTF-8" />

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')),