-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Closes #15630: Remove server-side color mode preference & simplify to…
…ggling
- Loading branch information
1 parent
44a7cd9
commit a1849d0
Showing
8 changed files
with
21 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,73 +1,41 @@ | ||
| /** | ||
| * 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); | ||
| } | ||
|
|
||
| /** | ||
| * Determine the best initial color mode to use prior to rendering. | ||
| */ | ||
| function initMode() { | ||
| try { | ||
| // Browser prefers dark color scheme. | ||
| // Determine the configured color mode, if any | ||
| var clientMode = localStorage.getItem("netbox-color-mode"); | ||
| // Detect browser preference, if set | ||
| 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. | ||
| // 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); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters