fix(webapp): apply the theme on click, not on the loader's next pass

Picking a theme from the account menu sometimes left the old one on screen. The
switch waited for the write to come back through the root loader, but dismissing
the popover unmounts the row that owns the fetcher, and without v3_fetcherPersist
React Router drops an unmounted fetcher's revalidation. The POST had already gone
out, so the preference saved and a refresh showed the new theme - which is why it
looked intermittent.

Both pickers now set the attribute themselves and let the write follow, sharing
the resolution rule with useSystemThemeSync rather than restating it, and revert
if the write comes back unsuccessful.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/components/navigation/AppearanceMenuItem.tsx

@@ -1,12 +1,14 @@
 import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
 import { useFetcher } from "@remix-run/react";
+import { useEffect } from "react";
 import { useTypedRouteLoaderData } from "remix-typedjson";
 import { ToggleSwitchIcon } from "~/assets/icons/ToggleSwitchIcon";
 import { PopoverMenuItem } from "~/components/primitives/Popover";
 import { THEME_OPTIONS } from "~/components/themeOptions";
+import { applyThemePreference } from "~/hooks/useSystemThemeSync";
 import { type loader as rootLoader } from "~/root";
 import { accountPath } from "~/utils/pathBuilder";
-import { normalizeThemePreference } from "~/utils/themePreference";
+import { normalizeThemePreference, type ThemePreference } from "~/utils/themePreference";
 import { SideMenuPopoverSubMenu } from "./SideMenuPopoverSubMenu";
 import { SIDE_MENU_POPOVER_ITEM_ICON, SIDE_MENU_POPOVER_ITEM_LABEL } from "./sideMenuTypes";
 
@@ -20,20 +22,36 @@ const THEME_ACTION_PATH = "/resources/preferences/theme";
  */
 export function AppearanceMenuItem() {
   const rootData = useTypedRouteLoaderData<typeof rootLoader>("root");
-  const fetcher = useFetcher();
+  const fetcher = useFetcher<{ success?: boolean }>();
+  const savedTheme = rootData?.themePreference;
+
+  // A failed write would otherwise leave the optimistic theme on screen, since
+  // the loader data never changes and so `useSystemThemeSync` never re-runs.
+  useEffect(() => {
+    if (fetcher.state !== "idle" || !fetcher.data || fetcher.data.success || !savedTheme) return;
+    applyThemePreference(savedTheme);
+  }, [fetcher.state, fetcher.data, savedTheme]);
 
   if (!rootData?.showThemeSwitcher) {
     return null;
   }
 
-  // Move the check as soon as a theme is clicked; the theme itself follows once
-  // the write lands and the root loader revalidates.
+  // Move the check as soon as a theme is clicked; the write follows.
   const pendingTheme = fetcher.formData?.get("theme");
   const theme =
     typeof pendingTheme === "string"
       ? normalizeThemePreference(pendingTheme)
       : rootData.themePreference;
 
+  const pickTheme = (value: ThemePreference) => {
+    // Applied here rather than waiting for the write to come back through the
+    // root loader: dismissing the popover unmounts this row, and an unmounted
+    // fetcher's revalidation is dropped, which left the theme untouched even
+    // though the preference had saved.
+    applyThemePreference(value);
+    fetcher.submit({ theme: value }, { method: "post", action: THEME_ACTION_PATH });
+  };
+
   return (
     // Much narrower than the standard submenu: these labels don't need the room.
     <SideMenuPopoverSubMenu title="Appearance" icon={ToggleSwitchIcon} contentClassName="min-w-36">
@@ -46,9 +64,7 @@ export function AppearanceMenuItem() {
             leadingIconClassName={SIDE_MENU_POPOVER_ITEM_ICON}
             className={SIDE_MENU_POPOVER_ITEM_LABEL}
             isSelected={theme === option.value}
-            onClick={() =>
-              fetcher.submit({ theme: option.value }, { method: "post", action: THEME_ACTION_PATH })
-            }
+            onClick={() => pickTheme(option.value)}
           />
         ))}
       </div>

apps/webapp/app/hooks/useSystemThemeSync.ts

@@ -1,6 +1,23 @@
 import { useEffect } from "react";
 import { type ThemePreference } from "~/utils/themePreference";
 
+/**
+ * Puts a preference on <html> now, resolving `system` against the OS once. Use
+ * this to apply a theme the moment it's picked: the preference round-trips
+ * through the server and comes back via the root loader, and anything that waits
+ * for that is at the mercy of whether the revalidation actually lands.
+ */
+export function applyThemePreference(preference: ThemePreference) {
+  const resolved =
+    preference === "system"
+      ? window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light"
+      : preference;
+  document.documentElement.setAttribute("data-theme", resolved);
+  document.documentElement.setAttribute("data-theme-preference", preference);
+}
+
 /**
  * Keeps `data-theme` on <html> in sync with the preference. For `system` it
  * follows the OS color scheme live; for pinned themes it writes the attribute
@@ -13,7 +30,7 @@ import { type ThemePreference } from "~/utils/themePreference";
 export function useSystemThemeSync(preference: ThemePreference) {
   useEffect(() => {
     if (preference !== "system") {
-      document.documentElement.setAttribute("data-theme", preference);
+      applyThemePreference(preference);
       return;
     }
 

apps/webapp/app/routes/account._index/route.tsx

@@ -39,6 +39,7 @@ import { ALL_THEME_OPTIONS, THEME_OPTIONS_BY_VALUE } from "~/components/themeOpt
 import { prisma } from "~/db.server";
 import { SelectBestEnvironmentPresenter } from "~/presenters/SelectBestEnvironmentPresenter.server";
 import { useFeatureFlags } from "~/hooks/useFeatureFlags";
+import { applyThemePreference } from "~/hooks/useSystemThemeSync";
 import { useFeatures } from "~/hooks/useFeatures";
 import { useHasAdminAccess, useUser } from "~/hooks/useUser";
 import { redirectWithSuccessMessage } from "~/models/message.server";
@@ -505,12 +506,15 @@ export default function Page() {
                     <Select<ThemePreference, ThemePreference>
                       aria-label="Interface theme"
                       value={theme}
-                      setValue={(value) =>
+                      setValue={(value) => {
+                        // Applied here so the theme lands immediately rather than
+                        // on the root loader's next pass (see applyThemePreference).
+                        applyThemePreference(normalizeThemePreference(value));
                         themeFetcher.submit(
                           { action: "update-theme", theme: value },
                           { method: "post" }
-                        )
-                      }
+                        );
+                      }}
                       variant="secondary/medium"
                       dropdownIcon
                       items={ALL_THEME_OPTIONS.map((option) => option.value)}