https://xrpl.org/assets/theme-switch.1b36f02a1ecbafb3f8104e152f3d7…a20ca3d6896107feb97a3f2aa87e6cb.60f4d3f5.js

1// Check user prefers color, toggle light/dark, save state.
2// Loaded synchronously in <head> via redocly.yaml `scripts.head` so the
3// correct theme is applied before first paint on every page load. This is
4// what makes the user's dark/light preference (stored in
5// `localStorage["user-prefers-color"]`) persist across page navigations.
6//
7// The Navbar's `ModeToggleButton` (NavControls.tsx) and the mobile menu's
8// toggle (MobileMenu.tsx) are responsible for *writing* the preference and
9// flipping the `dark`/`light` class on `<html>`; this script is responsible
10// for *reading* the preference on load and re-applying the class.
11
12(function () {
13  function apply_color_scheme(theme) {
14    const disable_theme = (theme === "dark") ? "light" : "dark";
15    document.documentElement.classList.add(theme);
16    document.documentElement.classList.remove(disable_theme);
17    document.documentElement.setAttribute("data-theme", theme);
18  }
19
20  function auto_update_theme() {
21    let upc = null;
22    try {
23      upc = window.localStorage.getItem("user-prefers-color");
24    } catch (_) {
25      // localStorage may be unavailable (private mode, sandboxed iframe, etc.)
26    }
27
28    let theme = "dark"; // Default to dark theme
29    if (!upc) {
30      // No saved preference — fall back to the browser-level setting.
31      if (window.matchMedia &&
32          window.matchMedia("(prefers-color-scheme: light)").matches) {
33        theme = "light";
34      }
35    } else {
36      theme = (upc === "light") ? "light" : "dark";
37    }
38    apply_color_scheme(theme);
39  }
40
41  auto_update_theme();
42
43  // Re-apply when the OS-level color scheme changes, but only when the user
44  // hasn't pinned an explicit preference for this site.
45  if (window.matchMedia) {
46    const mql = window.matchMedia("(prefers-color-scheme: dark)");
47    const onChange = function () {
48      let hasExplicit = false;
49      try {
50        hasExplicit = !!window.localStorage.getItem("user-prefers-color");
51      } catch (_) {}
52      if (!hasExplicit) auto_update_theme();
53    };
54    if (mql.addEventListener) {
55      mql.addEventListener("change", onChange);
56    } else if (mql.addListener) {
57      // Legacy Safari (<14) fallback.
58      mql.addListener(onChange);
59    }
60  }
61})();