@absolutejs/absolute 0.6.1 → 0.6.2

package/build/{AuthTestingIndex.8q7s3n20.js → AuthTestingIndex.wb4rvhp6.js}

@@ -32524,6 +32524,7 @@ function becomeIdle(self) {
     });
   }
 }
+var to2 = (source, ...args) => new Interpolation(source, args);
 globals_exports.assign({
   createStringInterpolator: createStringInterpolator2,
   to: (source, args) => new Interpolation(source, args)
@@ -35140,7 +35141,7 @@ function useQuery(options, queryClient) {
 }
 
 // src/frontend/components/navbar/Navbar.tsx
-var import_react28 = __toESM(require_react(), 1);
+var import_react26 = __toESM(require_react(), 1);
 
 // node_modules/react-icons/lib/iconBase.mjs
 var import_react16 = __toESM(require_react(), 1);
@@ -35462,7 +35463,7 @@ var profileButtonStyle = {
 };
 
 // src/frontend/components/hamburger/HamburgerMenu.tsx
-var import_react22 = __toESM(require_react(), 1);
+var import_react21 = __toESM(require_react(), 1);
 
 // src/types/types.ts
 var isNavbarDropdown = (element) => ("links" in element);
@@ -38366,6 +38367,17 @@ var useContainerQuery = () => {
   return { dimensions, ref };
 };
 
+// node_modules/react-icons/ai/index.mjs
+function AiOutlineExperiment(props) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M512 472a40 40 0 1 0 80 0 40 40 0 1 0-80 0zm367 352.9L696.3 352V178H768v-68H256v68h71.7v174L145 824.9c-2.8 7.4-4.3 15.2-4.3 23.1 0 35.3 28.7 64 64 64h614.6c7.9 0 15.7-1.5 23.1-4.3 33-12.7 49.4-49.8 36.6-82.8zM395.7 364.7V180h232.6v184.7L719.2 600c-20.7-5.3-42.1-8-63.9-8-61.2 0-119.2 21.5-165.3 60a188.78 188.78 0 0 1-121.3 43.9c-32.7 0-64.1-8.3-91.8-23.7l118.8-307.5zM210.5 844l41.7-107.8c35.7 18.1 75.4 27.8 116.6 27.8 61.2 0 119.2-21.5 165.3-60 33.9-28.2 76.3-43.9 121.3-43.9 35 0 68.4 9.5 97.6 27.1L813.5 844h-603z" }, child: [] }] })(props);
+}
+function AiOutlineMinusCircle(props) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" }, child: [] }, { tag: "path", attr: { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" }, child: [] }] })(props);
+}
+function AiOutlineMoon(props) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024", fill: "currentColor", fillRule: "evenodd" }, child: [{ tag: "path", attr: { d: "M489.493 111.658c30.658-1.792 45.991 36.44 22.59 56.329C457.831 214.095 426 281.423 426 354c0 134.757 109.243 244 244 244 72.577 0 139.905-31.832 186.014-86.084 19.868-23.377 58.064-8.102 56.332 22.53C900.4 745.823 725.141 912 512.5 912 291.31 912 112 732.69 112 511.5c0-211.39 164.287-386.024 374.198-399.649l.206-.013zm-81.143 79.75-4.112 1.362C271.1 237.943 176 364.092 176 511.5 176 697.344 326.656 848 512.5 848c148.28 0 274.938-96.192 319.453-230.41l.625-1.934-.11.071c-47.18 29.331-102.126 45.755-159.723 46.26L670 662c-170.104 0-308-137.896-308-308 0-58.595 16.476-114.54 46.273-162.467z" }, child: [] }] })(props);
+}
+
 // node_modules/react-icons/fa/index.mjs
 function FaCheckCircle(props) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" }, child: [] }] })(props);
@@ -38380,11 +38392,39 @@ function FaRegQuestionCircle(props) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z" }, child: [] }] })(props);
 }
 
+// node_modules/react-icons/io5/index.mjs
+function IoSunny(props) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22zm0 368a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22zm113.14-321.14a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44zM108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45zM464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44zm-368 0H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44zm307.08 147.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56zM142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55zM256 358a102 102 0 1 1 102-102 102.12 102.12 0 0 1-102 102z" }, child: [] }] })(props);
+}
+
+// src/frontend/components/utils/ProfilePicture.tsx
+var jsx_dev_runtime7 = __toESM(require_jsx_dev_runtime(), 1);
+var ProfilePicture = ({
+  userImage,
+  backupImage,
+  width = "2rem",
+  height = "2rem",
+  themeSprings
+}) => /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(animated.img, {
+  src: userImage ?? backupImage,
+  alt: "Profile",
+  style: {
+    backgroundColor: themeSprings.themeTertiary,
+    borderRadius: "50%",
+    height,
+    objectFit: "cover",
+    width
+  }
+}, undefined, false, undefined, this);
+
 // src/frontend/components/utils/AnimatedComponents.tsx
 var AnimatedFaChevronDown = animated(FaChevronDown);
+var AnimatedProfilePicture = animated(ProfilePicture);
+var AnimatedMoon = animated(AiOutlineMoon);
+var AnimatedSun = animated(IoSunny);
 
 // src/frontend/components/hamburger/HamburgerDropdown.tsx
-var jsx_dev_runtime7 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
 var HamburgerDropdown = ({
   label,
   icon,
@@ -38412,27 +38452,27 @@ var HamburgerDropdown = ({
       transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
     });
   };
-  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
     style: { width: "100%" },
     children: [
-      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
         style: {
           alignItems: "center",
           display: "flex",
           justifyContent: "space-between"
         },
         children: [
-          /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(animated.a, {
+          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(animated.a, {
             href,
             style: labelStyle(themeSprings),
             children: [
               icon,
-              /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
                 children: label
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(AnimatedFaChevronDown, {
+          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(AnimatedFaChevronDown, {
             onClick: toggleDropdown,
             style: {
               cursor: "pointer",
@@ -38444,14 +38484,14 @@ var HamburgerDropdown = ({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(animated.nav, {
+      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(animated.nav, {
         ref,
         style: {
           height: dropdownSprings.height,
           opacity: dropdownSprings.opacity,
           overflow: "hidden"
         },
-        children: links.map((link, index) => /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(NavbarLink, {
+        children: links.map((link, index) => /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(NavbarLink, {
           themeSprings,
           icon: link.icon,
           href: link.href,
@@ -38463,11 +38503,11 @@ var HamburgerDropdown = ({
 };
 
 // src/frontend/components/hamburger/HamburgerHeader.tsx
-var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime9 = __toESM(require_jsx_dev_runtime(), 1);
 var HamburgerHeader = ({
   onClose,
   themeSprings
-}) => /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(animated.div, {
+}) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(animated.div, {
   style: {
     alignItems: "center",
     backgroundColor: themeSprings.themePrimary,
@@ -38482,7 +38522,7 @@ var HamburgerHeader = ({
     width: "100%"
   },
   children: [
-    /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("a", {
+    /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("a", {
       href: "/",
       style: {
         color: "inherit",
@@ -38492,7 +38532,7 @@ var HamburgerHeader = ({
       },
       children: "AbsoluteJS"
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(FaTimes, {
+    /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(FaTimes, {
       style: {
         cursor: "pointer",
         fontSize: "34px"
@@ -38502,52 +38542,6 @@ var HamburgerHeader = ({
   ]
 }, undefined, true, undefined, this);
 
-// node_modules/zustand/esm/vanilla.mjs
-var createStoreImpl = (createState) => {
-  let state;
-  const listeners = /* @__PURE__ */ new Set;
-  const setState = (partial, replace) => {
-    const nextState = typeof partial === "function" ? partial(state) : partial;
-    if (!Object.is(nextState, state)) {
-      const previousState = state;
-      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
-      listeners.forEach((listener) => listener(state, previousState));
-    }
-  };
-  const getState = () => state;
-  const getInitialState = () => initialState;
-  const subscribe = (listener) => {
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-  };
-  const api = { setState, getState, getInitialState, subscribe };
-  const initialState = state = createState(setState, getState, api);
-  return api;
-};
-var createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
-
-// node_modules/zustand/esm/react.mjs
-var import_react21 = __toESM(require_react(), 1);
-var identity = (arg) => arg;
-function useStore(api, selector = identity) {
-  const slice = import_react21.default.useSyncExternalStore(api.subscribe, () => selector(api.getState()), () => selector(api.getInitialState()));
-  import_react21.default.useDebugValue(slice);
-  return slice;
-}
-var createImpl = (createState) => {
-  const api = createStore(createState);
-  const useBoundStore = (selector) => useStore(api, selector);
-  Object.assign(useBoundStore, api);
-  return useBoundStore;
-};
-var create2 = (createState) => createState ? createImpl(createState) : createImpl;
-
-// src/frontend/hooks/useThemeStore.ts
-var useThemeStore = create2((set2) => ({
-  theme: "dark",
-  setTheme: (newTheme) => set2({ theme: newTheme })
-}));
-
 // src/frontend/styles/styles.ts
 var styleReset = `
     * {
@@ -38564,6 +38558,7 @@ var bodyDefault = (themeSprings) => ({
   flexDirection: "column",
   fontFamily: "Poppins, sans-serif",
   height: "100%",
+  lineHeight: "1.4",
   margin: 0
 });
 var mainDefault = {
@@ -38576,8 +38571,8 @@ var htmlDefault = {
   height: "100%"
 };
 var buttonStyle = ({
-  backgroundColor = "none",
-  color = "white",
+  backgroundColor,
+  color,
   width
 }) => ({
   alignItems: "center",
@@ -38611,26 +38606,6 @@ var paragraphStyle = (themeSprings) => ({
   textAlign: "center"
 });
 
-// src/frontend/components/utils/ProfilePicture.tsx
-var jsx_dev_runtime9 = __toESM(require_jsx_dev_runtime(), 1);
-var ProfilePicture = ({
-  userImage,
-  backupImage,
-  width = "2rem",
-  height = "2rem",
-  themeSprings
-}) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(animated.img, {
-  src: userImage ?? backupImage,
-  alt: "Profile",
-  style: {
-    backgroundColor: themeSprings.themeTertiary,
-    borderRadius: "50%",
-    height,
-    objectFit: "cover",
-    width
-  }
-}, undefined, false, undefined, this);
-
 // src/frontend/components/hamburger/HamburgerUserButtons.tsx
 var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
 var HamburgerUserButtons = ({
@@ -38638,63 +38613,60 @@ var HamburgerUserButtons = ({
   handleSignOut,
   openModal,
   themeSprings
-}) => {
-  const theme = useThemeStore((state) => state.theme);
-  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
-    style: {
-      alignItems: "center",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      width: "100%"
-    },
-    children: [
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(animated.button, {
-        onClick: user ? () => handleSignOut() : openModal,
-        style: buttonStyle({
-          backgroundColor: themeSprings.themeTertiary,
-          color: themeSprings.contrastPrimary,
-          width: "100%"
-        }),
-        children: user ? "Sign Out" : "Login"
-      }, undefined, false, undefined, this),
-      user !== undefined && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
-        style: {
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "row",
-          gap: "2rem",
-          marginTop: "1rem"
-        },
-        children: [
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(animated.a, {
-            href: "/portal",
-            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(ProfilePicture, {
-              themeSprings,
-              userImage: typeof user.metadata?.profile_picture === "string" ? user.metadata.profile_picture : undefined,
-              backupImage: theme === "dark" ? "/assets/svg/default-profile-icon-light.svg" : "/assets/svg/default-profile-icon.svg",
-              width: "4rem",
-              height: "4rem"
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(animated.span, {
-            style: {
-              color: themeSprings.contrastPrimary,
-              fontSize: "1.2rem",
-              fontWeight: "bold",
-              textAlign: "center"
-            },
-            children: [
-              typeof user.metadata?.given_name === "string" ? user.metadata.given_name : "",
-              " ",
-              typeof user.metadata?.family_name === "string" ? user.metadata.family_name : ""
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-};
+}) => /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+  style: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  children: [
+    /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(animated.button, {
+      onClick: user ? () => handleSignOut() : openModal,
+      style: buttonStyle({
+        backgroundColor: themeSprings.themeTertiary,
+        color: themeSprings.contrastPrimary,
+        width: "100%"
+      }),
+      children: user ? "Sign Out" : "Login"
+    }, undefined, false, undefined, this),
+    user !== undefined && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+      style: {
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "row",
+        gap: "2rem",
+        marginTop: "1rem"
+      },
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(animated.a, {
+          href: "/portal",
+          children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(AnimatedProfilePicture, {
+            themeSprings,
+            userImage: typeof user.metadata?.profile_picture === "string" ? user.metadata.profile_picture : undefined,
+            backupImage: themeSprings.theme.to((mode) => mode === "dark" ? "/assets/svg/default-profile-icon-light.svg" : "/assets/svg/default-profile-icon.svg"),
+            width: "4rem",
+            height: "4rem"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(animated.span, {
+          style: {
+            color: themeSprings.contrastPrimary,
+            fontSize: "1.2rem",
+            fontWeight: "bold",
+            textAlign: "center"
+          },
+          children: [
+            typeof user.metadata?.given_name === "string" ? user.metadata.given_name : "",
+            " ",
+            typeof user.metadata?.family_name === "string" ? user.metadata.family_name : ""
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  ]
+}, undefined, true, undefined, this);
 
 // src/frontend/components/hamburger/HamburgerMenu.tsx
 var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
@@ -38705,7 +38677,7 @@ var HamburgerMenu = ({
   themeSprings,
   handleSignOut
 }) => {
-  const [isModalOpen, setIsModalOpen] = import_react22.useState(false);
+  const [isModalOpen, setIsModalOpen] = import_react21.useState(false);
   return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(animated.div, {
     style: {
       background: themeSprings.themeSecondary,
@@ -38785,7 +38757,7 @@ var HamburgerMenu = ({
 };
 
 // src/frontend/components/navbar/NavbarDropdown.tsx
-var import_react23 = __toESM(require_react(), 1);
+var import_react22 = __toESM(require_react(), 1);
 var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
 var AnimatedFaChevronDown2 = animated(FaChevronDown);
 var NavbarDropdown = ({
@@ -38794,7 +38766,7 @@ var NavbarDropdown = ({
   links,
   themeSprings
 }) => {
-  const dropdownRef = import_react23.useRef(null);
+  const dropdownRef = import_react22.useRef(null);
   const [dropdownSpring, dropdownApi] = useSpring(() => ({
     config: { friction: 30, tension: 250 },
     height: 0,
@@ -38896,10 +38868,10 @@ var NavbarLinks = ({ navbarData: navbarData2, themeSprings }) => /* @__PURE__ */
 }, undefined, false, undefined, this);
 
 // src/frontend/components/navbar/NavbarUserButtons.tsx
-var import_react27 = __toESM(require_react(), 1);
+var import_react25 = __toESM(require_react(), 1);
 
 // src/frontend/components/navbar/DropdownContainer.tsx
-var import_react24 = __toESM(require_react(), 1);
+var import_react23 = __toESM(require_react(), 1);
 var jsx_dev_runtime14 = __toESM(require_jsx_dev_runtime(), 1);
 var DropdownContainer = ({
   spring,
@@ -38909,8 +38881,8 @@ var DropdownContainer = ({
   themeSprings,
   ignoredElements = []
 }) => {
-  const dropdownRef = import_react24.useRef(null);
-  import_react24.useEffect(() => {
+  const dropdownRef = import_react23.useRef(null);
+  import_react23.useEffect(() => {
     const handleOutsideClick = (event) => {
       if (!(event.target instanceof Node))
         return;
@@ -38948,63 +38920,11 @@ var DropdownContainer = ({
 };
 
 // src/frontend/components/navbar/ThemeButton.tsx
-var import_react26 = __toESM(require_react(), 1);
-
-// node_modules/react-icons/ai/index.mjs
-function AiOutlineExperiment(props) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M512 472a40 40 0 1 0 80 0 40 40 0 1 0-80 0zm367 352.9L696.3 352V178H768v-68H256v68h71.7v174L145 824.9c-2.8 7.4-4.3 15.2-4.3 23.1 0 35.3 28.7 64 64 64h614.6c7.9 0 15.7-1.5 23.1-4.3 33-12.7 49.4-49.8 36.6-82.8zM395.7 364.7V180h232.6v184.7L719.2 600c-20.7-5.3-42.1-8-63.9-8-61.2 0-119.2 21.5-165.3 60a188.78 188.78 0 0 1-121.3 43.9c-32.7 0-64.1-8.3-91.8-23.7l118.8-307.5zM210.5 844l41.7-107.8c35.7 18.1 75.4 27.8 116.6 27.8 61.2 0 119.2-21.5 165.3-60 33.9-28.2 76.3-43.9 121.3-43.9 35 0 68.4 9.5 97.6 27.1L813.5 844h-603z" }, child: [] }] })(props);
-}
-function AiOutlineMinusCircle(props) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" }, child: [] }, { tag: "path", attr: { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" }, child: [] }] })(props);
-}
-function AiOutlineMoon(props) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024", fill: "currentColor", fillRule: "evenodd" }, child: [{ tag: "path", attr: { d: "M489.493 111.658c30.658-1.792 45.991 36.44 22.59 56.329C457.831 214.095 426 281.423 426 354c0 134.757 109.243 244 244 244 72.577 0 139.905-31.832 186.014-86.084 19.868-23.377 58.064-8.102 56.332 22.53C900.4 745.823 725.141 912 512.5 912 291.31 912 112 732.69 112 511.5c0-211.39 164.287-386.024 374.198-399.649l.206-.013zm-81.143 79.75-4.112 1.362C271.1 237.943 176 364.092 176 511.5 176 697.344 326.656 848 512.5 848c148.28 0 274.938-96.192 319.453-230.41l.625-1.934-.11.071c-47.18 29.331-102.126 45.755-159.723 46.26L670 662c-170.104 0-308-137.896-308-308 0-58.595 16.476-114.54 46.273-162.467z" }, child: [] }] })(props);
-}
-
-// node_modules/react-icons/io5/index.mjs
-function IoSunny(props) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22zm0 368a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22zm113.14-321.14a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44zM108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45zM464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44zm-368 0H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44zm307.08 147.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56zM142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55zM256 358a102 102 0 1 1 102-102 102.12 102.12 0 0 1-102 102z" }, child: [] }] })(props);
-}
-
-// src/frontend/hooks/useInitTheme.ts
-var import_react25 = __toESM(require_react(), 1);
-var useInitTheme = () => {
-  const setTheme = useThemeStore((state) => state.setTheme);
-  const [currentTheme, setCurrentTheme] = import_react25.useState("dark");
-  import_react25.useEffect(() => {
-    const storedTheme = window.localStorage.getItem("theme");
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: light)");
-    const applySystemTheme = (event) => {
-      setTheme(event.matches ? "light" : "dark");
-      setCurrentTheme(event.matches ? "system:light" : "system:dark");
-    };
-    if (storedTheme === "light") {
-      setTheme("light");
-      setCurrentTheme("light");
-      return;
-    }
-    if (storedTheme === "dark") {
-      setTheme("dark");
-      setCurrentTheme("dark");
-      return;
-    }
-    const isLight = mediaQuery.matches;
-    setTheme(isLight ? "light" : "dark");
-    setCurrentTheme(isLight ? "system:light" : "system:dark");
-    mediaQuery.addEventListener("change", applySystemTheme);
-    return () => {
-      mediaQuery.removeEventListener("change", applySystemTheme);
-    };
-  }, [setTheme, setCurrentTheme]);
-  return { currentTheme, setCurrentTheme, setTheme };
-};
-
-// src/frontend/components/navbar/ThemeButton.tsx
+var import_react24 = __toESM(require_react(), 1);
 var jsx_dev_runtime15 = __toESM(require_jsx_dev_runtime(), 1);
-var ThemeButton = ({ themeSprings }) => {
-  const { currentTheme, setCurrentTheme, setTheme } = useInitTheme();
-  const detailsRef = import_react26.useRef(null);
-  import_react26.useEffect(() => {
+var ThemeButton = ({ themeSprings, setTheme }) => {
+  const detailsRef = import_react24.useRef(null);
+  import_react24.useEffect(() => {
     const onClickOutside = (event) => {
       const det = detailsRef.current;
       if (!det?.open)
@@ -39019,25 +38939,14 @@ var ThemeButton = ({ themeSprings }) => {
     return () => document.removeEventListener("mousedown", onClickOutside);
   }, []);
   const selectTheme = (option) => {
-    if (option === "system") {
-      const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
-      setTheme(prefersLight ? "light" : "dark");
-      setCurrentTheme(prefersLight ? "system:light" : "system:dark");
-      window.localStorage.removeItem("theme");
-    } else {
-      setTheme(option);
-      setCurrentTheme(option);
-      window.localStorage.setItem("theme", option);
-    }
+    setTheme(option);
     if (detailsRef.current)
       detailsRef.current.open = false;
   };
-  const icon = currentTheme.includes("dark") ? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(AiOutlineMoon, {
-    style: { height: 24, width: 24 }
-  }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(IoSunny, {
-    style: { height: 24, width: 24 }
-  }, undefined, false, undefined, this);
-  const selected = currentTheme.startsWith("system") ? "system" : currentTheme;
+  const selected = themeSprings.theme.to((t2) => {
+    const sel = t2.startsWith("system") ? "system" : t2;
+    return sel;
+  });
   return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(animated.details, {
     ref: detailsRef,
     style: {
@@ -39060,10 +38969,28 @@ var ThemeButton = ({ themeSprings }) => {
           listStyle: "none",
           margin: 0,
           padding: 0,
+          position: "relative",
           width: "2.5rem"
         },
-        children: icon
-      }, undefined, false, undefined, this),
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(AnimatedMoon, {
+            style: {
+              height: 24,
+              opacity: themeSprings.theme.to((t2) => t2.endsWith("dark") ? 1 : 0),
+              position: "absolute",
+              width: 24
+            }
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(AnimatedSun, {
+            style: {
+              height: 24,
+              opacity: themeSprings.theme.to((t2) => t2.endsWith("dark") ? 0 : 1),
+              position: "absolute",
+              width: 24
+            }
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
       /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(animated.ul, {
         style: {
           backgroundColor: themeSprings.themeTertiary,
@@ -39077,17 +39004,25 @@ var ThemeButton = ({ themeSprings }) => {
           right: 0,
           top: "3.5rem"
         },
-        children: ["system", "light", "dark"].map((opt) => /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(animated.li, {
-          onClick: () => selectTheme(opt),
-          style: {
-            background: opt === selected ? themeSprings.contrastPrimary : "transparent",
-            borderRadius: "0.25rem",
-            color: opt === selected ? themeSprings.themeTertiary : themeSprings.contrastPrimary,
-            cursor: "pointer",
-            padding: "0.25rem 0.5rem"
-          },
-          children: opt.charAt(0).toUpperCase() + opt.slice(1)
-        }, opt, false, undefined, this))
+        children: ["system", "light", "dark"].map((opt) => {
+          const background = to2([selected, themeSprings.themePrimary], (sel, bkg) => sel === opt ? bkg : "transparent");
+          const color = to2([
+            selected,
+            themeSprings.contrastPrimary,
+            themeSprings.contrastSecondary
+          ], (sel, tertiary, contrast) => sel === opt ? tertiary : contrast);
+          return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(animated.li, {
+            onClick: () => selectTheme(opt),
+            style: {
+              background,
+              borderRadius: "0.25rem",
+              color,
+              cursor: "pointer",
+              padding: "0.25rem 0.5rem"
+            },
+            children: opt.charAt(0).toUpperCase() + opt.slice(1)
+          }, opt, false, undefined, this);
+        })
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
@@ -39098,12 +39033,12 @@ var jsx_dev_runtime16 = __toESM(require_jsx_dev_runtime(), 1);
 var NavbarUserButtons = ({
   user,
   handleSignOut,
-  themeSprings
+  themeSprings,
+  setTheme
 }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = import_react27.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = import_react25.useState(false);
   const { isSizeOrLess } = useMediaQuery();
   const isMobile = isSizeOrLess("sm");
-  const theme = useThemeStore((state) => state.theme);
   const openDropdown = () => {
     setIsDropdownOpen(true);
     loginDropdownApi.start({ opacity: 1, scale: 1 });
@@ -39124,7 +39059,7 @@ var NavbarUserButtons = ({
     opacity: 0,
     scale: 0
   }));
-  const userButtonRef = import_react27.useRef(null);
+  const userButtonRef = import_react25.useRef(null);
   return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
     style: {
       display: "flex",
@@ -39144,16 +39079,17 @@ var NavbarUserButtons = ({
       user !== undefined && !isMobile && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(animated.a, {
         style: profileButtonStyle,
         href: "/protected",
-        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(ProfilePicture, {
+        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(AnimatedProfilePicture, {
           themeSprings,
           userImage: typeof user.metadata?.profile_picture === "string" ? user.metadata.profile_picture : undefined,
-          backupImage: theme === "dark" ? "/assets/svg/default-profile-icon-light.svg" : "/assets/svg/default-profile-icon.svg",
+          backupImage: themeSprings.theme.to((theme) => theme.endsWith("dark") ? "/assets/svg/default-profile-icon-light.svg" : "/assets/svg/default-profile-icon.svg"),
           width: "2.5rem",
           height: "2.5rem"
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(ThemeButton, {
-        themeSprings
+        themeSprings,
+        setTheme
       }, undefined, false, undefined, this),
       isDropdownOpen === true && !isMobile && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(DropdownContainer, {
         themeSprings,
@@ -39184,10 +39120,15 @@ var NavbarUserButtons = ({
 
 // src/frontend/components/navbar/Navbar.tsx
 var jsx_dev_runtime17 = __toESM(require_jsx_dev_runtime(), 1);
-var Navbar = ({ user, handleSignOut, themeSprings }) => {
+var Navbar = ({
+  user,
+  handleSignOut,
+  themeSprings,
+  setTheme
+}) => {
   const { isSizeOrLess } = useMediaQuery();
   const isMobile = isSizeOrLess("sm");
-  const navRef = import_react28.useRef(null);
+  const navRef = import_react26.useRef(null);
   const [hamburgerMenuSpring, hamburgerMenuApi] = useSpring(() => ({
     config: { friction: 40, tension: 275 },
     transform: "translateX(100%)",
@@ -39233,7 +39174,8 @@ var Navbar = ({ user, handleSignOut, themeSprings }) => {
           /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(NavbarUserButtons, {
             user,
             handleSignOut,
-            themeSprings
+            themeSprings,
+            setTheme
           }, undefined, false, undefined, this),
           isMobile === true && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("button", {
             style: hamburgerButtonStyle,
@@ -39291,7 +39233,7 @@ var Head = ({
 }, undefined, true, undefined, this);
 
 // src/frontend/components/testing/AuthGrid.tsx
-var import_react31 = __toESM(require_react(), 1);
+var import_react29 = __toESM(require_react(), 1);
 
 // src/frontend/components/auth/OAuthButton.tsx
 var jsx_dev_runtime19 = __toESM(require_jsx_dev_runtime(), 1);
@@ -39347,7 +39289,7 @@ var OAuthButton = ({
 };
 
 // src/frontend/components/utils/ToastProvider.tsx
-var import_react29 = __toESM(require_react(), 1);
+var import_react27 = __toESM(require_react(), 1);
 var import_react_dom2 = __toESM(require_react_dom(), 1);
 
 // src/frontend/components/utils/Toast.tsx
@@ -39431,17 +39373,17 @@ var Toast = ({ message, action, style, removeToast }) => /* @__PURE__ */ jsx_dev
 
 // src/frontend/components/utils/ToastProvider.tsx
 var jsx_dev_runtime21 = __toESM(require_jsx_dev_runtime(), 1);
-var ToastContext = import_react29.createContext(null);
+var ToastContext = import_react27.createContext(null);
 var useToast = () => {
-  const ctx2 = import_react29.useContext(ToastContext);
+  const ctx2 = import_react27.useContext(ToastContext);
   if (!ctx2)
     throw new Error("useToast must be used within ToastProvider");
   return ctx2;
 };
 var ToastProvider = ({ children }) => {
-  const [toasts, setToasts] = import_react29.useState([]);
-  const [host2, setHost] = import_react29.useState(null);
-  import_react29.useEffect(() => {
+  const [toasts, setToasts] = import_react27.useState([]);
+  const [host2, setHost] = import_react27.useState(null);
+  import_react27.useEffect(() => {
     setHost(document.body);
   }, []);
   const addToast = ({
@@ -39483,7 +39425,7 @@ var ToastProvider = ({ children }) => {
 };
 
 // src/frontend/hooks/useAuthModalData.ts
-var import_react30 = __toESM(require_react(), 1);
+var import_react28 = __toESM(require_react(), 1);
 
 // node_modules/@elysiajs/eden/dist/chunk-XYW4OUFN.mjs
 var s = class extends Error {
@@ -39784,7 +39726,7 @@ var useAuthModalData = ({
   handleSignOut
 }) => {
   const { addToast, registerHost } = useToast();
-  const [profile, setProfile] = import_react30.useState();
+  const [profile, setProfile] = import_react28.useState();
   const queryClient = useQueryClient();
   const providerStatuses = useQuery({
     queryKey: ["providerStatuses", modalContent?.providerOption],
@@ -39937,15 +39879,18 @@ var colorRules = [
 ];
 var defaultColorKey = "punctuation";
 var getTokenColorKey = (token) => colorRules.find(([pattern]) => pattern.test(token))?.[1] ?? defaultColorKey;
-var JsonLine = ({ line, needsNewline }) => {
-  const theme = useThemeStore((state) => state.theme);
-  const colors3 = theme === "dark" ? colorMap.dark : colorMap.light;
+var JsonLine = ({
+  line,
+  needsNewline,
+  themeSprings
+}) => {
+  const colors3 = themeSprings.theme.to((mode) => mode === "dark" ? colorMap.dark : colorMap.light);
   const segments = line.split(tokenPattern).filter((segment) => segment);
   return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("span", {
     children: [
-      segments.map((segment, idx) => /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("span", {
+      segments.map((segment, idx) => /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(animated.span, {
         style: {
-          color: tokenPattern.test(segment) ? colors3[getTokenColorKey(segment)] : colors3.text
+          color: colors3.to((c6) => tokenPattern.test(segment) ? c6[getTokenColorKey(segment)] : c6.text)
         },
         children: segment
       }, idx, false, undefined, this)),
@@ -39959,7 +39904,8 @@ var JsonLine = ({ line, needsNewline }) => {
 var jsx_dev_runtime23 = __toESM(require_jsx_dev_runtime(), 1);
 var HighlightedJson = ({
   data,
-  primaryColor: primaryColor2
+  primaryColor: primaryColor2,
+  themeSprings
 }) => {
   const jsonString = JSON.stringify(data ?? {}, null, 2);
   const jsonLines = jsonString.split(`
@@ -39979,6 +39925,7 @@ var HighlightedJson = ({
     },
     children: /* @__PURE__ */ jsx_dev_runtime23.jsxDEV("code", {
       children: jsonLines.map((line, lineIndex) => /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(JsonLine, {
+        themeSprings,
         line,
         needsNewline: lineIndex < jsonLines.length - 1
       }, lineIndex, false, undefined, this))
@@ -40248,6 +40195,7 @@ var AuthModal = ({
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       isAuthorized && profile && /* @__PURE__ */ jsx_dev_runtime32.jsxDEV(HighlightedJson, {
+        themeSprings,
         data: profile,
         primaryColor: primaryColor2
       }, undefined, false, undefined, this),
@@ -40279,7 +40227,7 @@ var AuthGrid = ({
   handleSignOut,
   themeSprings
 }) => {
-  const [modalContent, setModalContent] = import_react31.useState(() => {
+  const [modalContent, setModalContent] = import_react29.useState(() => {
     if (typeof window === "undefined")
       return null;
     const params = new URLSearchParams(window.location.search);
@@ -40469,9 +40417,9 @@ var Legend = ({ themeSprings }) => /* @__PURE__ */ jsx_dev_runtime36.jsxDEV(anim
 }, undefined, true, undefined, this);
 
 // src/frontend/hooks/useAuthStatus.ts
-var import_react32 = __toESM(require_react(), 1);
+var import_react30 = __toESM(require_react(), 1);
 var useAuthStatus = () => {
-  const [user, setUser] = import_react32.useState();
+  const [user, setUser] = import_react30.useState();
   const checkAuthStatus = async () => {
     const response = await fetch("/oauth2/status");
     if (!response.ok && response.statusText === "Unauthorized") {
@@ -40500,7 +40448,7 @@ var useAuthStatus = () => {
       console.error("SignOut failed");
     }
   };
-  import_react32.useEffect(() => {
+  import_react30.useEffect(() => {
     checkAuthStatus();
   }, []);
   return {
@@ -40511,9 +40459,9 @@ var useAuthStatus = () => {
 };
 
 // src/frontend/hooks/useCleanPath.ts
-var import_react33 = __toESM(require_react(), 1);
+var import_react31 = __toESM(require_react(), 1);
 var useCleanPath = () => {
-  import_react33.useEffect(() => {
+  import_react31.useEffect(() => {
     const { hash: hash2 } = window.location;
     if (hash2 === "#_=_" || hash2 === "#_") {
       window.history.replaceState(null, document.title, window.location.pathname + window.location.search);
@@ -40521,36 +40469,71 @@ var useCleanPath = () => {
   }, []);
 };
 
-// src/frontend/hooks/useThemeColors.ts
-var import_react34 = __toESM(require_react(), 1);
-var useThemeColors = () => {
-  const theme = useThemeStore((state) => state.theme);
-  const [themeSprings, themeApi] = useSpring(() => ({
-    contrastPrimary: theme === "dark" ? lightPrimaryColor : darkPrimaryColor,
-    contrastSecondary: theme === "dark" ? lightSecondaryColor : darkSecondaryColor,
-    themePrimary: theme === "dark" ? darkPrimaryColor : lightPrimaryColor,
-    themeSecondary: theme === "dark" ? darkSecondaryColor : lightSecondaryColor,
-    themeTertiary: theme === "dark" ? darkTertiaryColor : lightTertiaryColor
-  }));
-  import_react34.useEffect(() => {
-    themeApi.start({
-      contrastPrimary: theme === "dark" ? lightPrimaryColor : darkPrimaryColor,
-      contrastSecondary: theme === "dark" ? lightSecondaryColor : darkSecondaryColor,
-      themePrimary: theme === "dark" ? darkPrimaryColor : lightPrimaryColor,
-      themeSecondary: theme === "dark" ? darkSecondaryColor : lightSecondaryColor,
-      themeTertiary: theme === "dark" ? darkTertiaryColor : lightTertiaryColor
-    });
-  }, [theme, themeApi]);
-  return themeSprings;
+// src/frontend/hooks/useTheme.ts
+var import_react32 = __toESM(require_react(), 1);
+var createPalette = (mode) => ({
+  contrastPrimary: mode.endsWith("dark") ? lightPrimaryColor : darkPrimaryColor,
+  contrastSecondary: mode.endsWith("dark") ? lightSecondaryColor : darkSecondaryColor,
+  theme: mode,
+  themePrimary: mode.endsWith("dark") ? darkPrimaryColor : lightPrimaryColor,
+  themeSecondary: mode.endsWith("dark") ? darkSecondaryColor : lightSecondaryColor,
+  themeTertiary: mode.endsWith("dark") ? darkTertiaryColor : lightTertiaryColor
+});
+var useTheme = (initialTheme) => {
+  const browserEnvironmentAvailable = typeof window !== "undefined" && typeof window.matchMedia === "function";
+  const [themeSprings, themeSpringController] = useSpring(() => createPalette(initialTheme ?? "system:dark"));
+  const mediaQueryRef = import_react32.useRef(null);
+  const applySystemChange = (event) => {
+    const updatedThemeMode = event.matches ? "system:dark" : "system:light";
+    themeSpringController.start(createPalette(updatedThemeMode));
+    document.cookie = `theme=${updatedThemeMode}; Max-Age=31536000; Path=/`;
+  };
+  import_react32.useEffect(() => {
+    if (!browserEnvironmentAvailable)
+      return;
+    const shouldFollowSystem = !initialTheme || initialTheme.startsWith("system");
+    if (!shouldFollowSystem)
+      return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    mediaQueryRef.current = mediaQuery;
+    if (!mediaQuery.matches) {
+      themeSpringController.start(createPalette("system:light"));
+    }
+    mediaQuery.addEventListener("change", applySystemChange);
+    return () => {
+      mediaQuery.removeEventListener("change", applySystemChange);
+      mediaQueryRef.current = null;
+    };
+  }, []);
+  const setTheme = (selectedTheme) => {
+    if (!browserEnvironmentAvailable)
+      return;
+    if (mediaQueryRef.current) {
+      mediaQueryRef.current.removeEventListener("change", applySystemChange);
+      mediaQueryRef.current = null;
+    }
+    let nextThemeMode;
+    if (selectedTheme === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      nextThemeMode = mediaQuery.matches ? "system:dark" : "system:light";
+      mediaQuery.addEventListener("change", applySystemChange);
+      mediaQueryRef.current = mediaQuery;
+    } else {
+      nextThemeMode = selectedTheme;
+    }
+    themeSpringController.start(createPalette(nextThemeMode));
+    document.cookie = `theme=${nextThemeMode}; Max-Age=31536000; Path=/`;
+  };
+  return [themeSprings, setTheme];
 };
 
 // src/frontend/pages/AuthTesting.tsx
 var jsx_dev_runtime37 = __toESM(require_jsx_dev_runtime(), 1);
 var queryClient = new QueryClient;
-var AuthTesting = () => {
-  const { user, handleSignOut } = useAuthStatus();
+var AuthTesting = ({ theme }) => {
   useCleanPath();
-  const themeSprings = useThemeColors();
+  const { user, handleSignOut } = useAuthStatus();
+  const [themeSprings, setTheme] = useTheme(theme);
   return /* @__PURE__ */ jsx_dev_runtime37.jsxDEV("html", {
     lang: "en",
     style: htmlDefault,
@@ -40560,6 +40543,7 @@ var AuthTesting = () => {
         style: bodyDefault(themeSprings),
         children: [
           /* @__PURE__ */ jsx_dev_runtime37.jsxDEV(Navbar, {
+            setTheme,
             user,
             handleSignOut,
             themeSprings
@@ -40607,4 +40591,6 @@ var AuthTesting = () => {
 
 // src/frontend/indexes/AuthTestingIndex.tsx
 var jsx_dev_runtime38 = __toESM(require_jsx_dev_runtime(), 1);
-import_client.hydrateRoot(document, /* @__PURE__ */ jsx_dev_runtime38.jsxDEV(AuthTesting, {}, undefined, false, undefined, this));
+import_client.hydrateRoot(document, /* @__PURE__ */ jsx_dev_runtime38.jsxDEV(AuthTesting, {
+  ...window.__INITIAL_PROPS__
+}, undefined, false, undefined, this));