Fixes #7599: Improve color mode handling

docs/release-notes/version-3.0.md

@@ -4,6 +4,7 @@
 
 ### 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
 * [#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

netbox/templates/base/base.html

@@ -27,55 +27,78 @@
     <title>{% block title %}Home{% endblock %} | NetBox</title>
 
     <script type="text/javascript">
-        /**
-         * Set the color mode on the `<html/>` element and in local storage.
-         */
-        function setMode(mode) {
-            document.documentElement.setAttribute("data-netbox-color-mode", mode);
-            localStorage.setItem("netbox-color-mode", mode);
-        }
-        /**
-         * Determine the best initial color mode to use prior to rendering.
-         */
-        (function () {
-            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");
-
-                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);
-                }
-                if (clientMode !== null && clientMode !== serverMode) {
-                    // If the client mode is set and is different than the server mode, use the client mode
-                    // over the server mode, as it should be more recent.
-                    return setMode(clientMode);
-                }
-                if (clientMode === serverMode) {
-                    // If the client and server modes match, use that value.
-                    return setMode(clientMode);
-                }
-                if (preferDark && serverMode === "unset") {
-                    // If the server mode is not set but the browser prefers dark mode, use dark mode.
-                    return setMode("dark");
-                }
-                if (preferLight && serverMode === "unset") {
-                    // If the server mode is not set but the browser prefers light mode, use light mode.
-                    return setMode("light");
-                }
-            } 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");
-        })();
-
+      /**
+       * 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.
+       */
+      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);
+      }
+      /**
+       * Determine the best initial color mode to use prior to rendering.
+       */
+      (function () {
+          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"));
+      
+              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);
+          }
+          return setMode("light", true);
+      })();
     </script>
 
     {# Static resources #}