feat(webapp): switch themes from the account menu

Adds an "Appearance" submenu to the account popover listing System, Light
and Dark, with a check against the current theme, saved through a new
preferences endpoint behind the existing theme switcher flag.

The account page's theme dropdown becomes the same icon-based segmented
control (with Classic included), and its Theme and Contrast rows now match
the layout of the Profile rows above them.

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

Author: samejr

.server-changes/appearance-toggle-in-account-menu.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Switch between the System, Light and Dark themes from the new Appearance menu in your account menu, without having to open your profile settings.

apps/webapp/app/assets/icons/AppearanceIcon.tsx

@@ -0,0 +1,23 @@
+/** Circle with one half filled — the theme/appearance setting. */
+export function AppearanceIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16V21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3V8ZM12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16V8Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/MoonIcon.tsx

@@ -0,0 +1,21 @@
+/** Crescent moon — the dark theme. */
+export function MoonIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.9638 12.7674C19.8361 13.5447 18.4693 13.9998 16.9961 13.9998C13.1301 13.9998 9.99609 10.8657 9.99609 6.99975C9.99609 5.52667 10.4511 4.15987 11.2283 3.03223C6.61911 3.42277 3 7.28768 3 11.9979C3 16.9674 7.0286 20.996 11.9981 20.996C16.7084 20.996 20.5734 17.3767 20.9638 12.7674Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/SunIcon.tsx

@@ -0,0 +1,34 @@
+/**
+ * Sun with rays — the light theme. The source artwork wrapped this in a mask and
+ * a clip path; both were no-ops at this viewBox, and dropping them keeps the
+ * markup free of ids that would collide when the icon renders more than once.
+ */
+export function SunIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.5355 8.46447C17.4882 10.4171 17.4882 13.5829 15.5355 15.5355C13.5829 17.4882 10.4171 17.4882 8.46447 15.5355C6.51184 13.5829 6.51184 10.4171 8.46447 8.46447C10.4171 6.51184 13.5829 6.51184 15.5355 8.46447Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 3V1M12 23V21M21 12H23M1 12H3M5.63603 5.63604L4.22182 4.22183M19.7782 19.7782L18.364 18.364M18.364 5.63606L19.7782 4.22184M4.22183 19.7782L5.63605 18.364"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/ToggleSwitchIcon.tsx

@@ -0,0 +1,23 @@
+/** Toggle switch, knob to the left. */
+export function ToggleSwitchIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.5 5H8.5C4.63401 5 1.5 8.13401 1.5 12C1.5 15.866 4.63401 19 8.5 19H15.5C19.366 19 22.5 15.866 22.5 12C22.5 8.13401 19.366 5 15.5 5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M8.5 15C10.1569 15 11.5 13.6569 11.5 12C11.5 10.3431 10.1569 9 8.5 9C6.84315 9 5.5 10.3431 5.5 12C5.5 13.6569 6.84315 15 8.5 15Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/ThemeSegmentedControl.tsx

@@ -0,0 +1,60 @@
+import SegmentedControl from "~/components/primitives/SegmentedControl";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { CLASSIC_OPTION, THEME_OPTIONS, type ThemeOption } from "~/components/themeOptions";
+import { type ThemePreference } from "~/utils/themePreference";
+
+/**
+ * Icon-only segmented control for picking a theme. Every segment is labelled by
+ * a tooltip and screen-reader text.
+ *
+ * `name` must be unique per mounted instance: the underlying control animates
+ * its selection with a shared `layoutId` derived from it, so two instances with
+ * the same name would fight over one indicator.
+ */
+export function ThemeSegmentedControl({
+  name,
+  value,
+  onChange,
+  includeClassic = false,
+}: {
+  name: string;
+  /** A value outside the offered segments (e.g. `classic` when it isn't
+   *  included) simply leaves the control with nothing selected. */
+  value: ThemePreference;
+  onChange: (theme: ThemePreference) => void;
+  includeClassic?: boolean;
+}) {
+  const segments = includeClassic ? [...THEME_OPTIONS, CLASSIC_OPTION] : THEME_OPTIONS;
+
+  return (
+    <SegmentedControl
+      name={name}
+      value={value}
+      variant="secondary/small"
+      onChange={(theme) => onChange(theme as ThemePreference)}
+      options={segments.map((segment) => ({
+        value: segment.value,
+        label: <ThemeSegmentLabel segment={segment} />,
+      }))}
+    />
+  );
+}
+
+function ThemeSegmentLabel({ segment }: { segment: ThemeOption }) {
+  return (
+    <SimpleTooltip
+      asChild
+      button={
+        // -mx-0.5 tightens the icon segment toward a square button.
+        <span className="-mx-0.5 flex items-center justify-center">
+          <segment.icon className="size-4" />
+          <span className="sr-only">{segment.label}</span>
+        </span>
+      }
+      content={segment.label}
+      className="px-2 py-1.5 text-xs"
+      sideOffset={6}
+      disableHoverableContent
+    />
+  );
+}

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

@@ -0,0 +1,55 @@
+import { useFetcher } from "@remix-run/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 { type loader as rootLoader } from "~/root";
+import { normalizeThemePreference } from "~/utils/themePreference";
+import { SideMenuPopoverSubMenu } from "./SideMenuPopoverSubMenu";
+import { SIDE_MENU_POPOVER_ITEM_ICON, SIDE_MENU_POPOVER_ITEM_LABEL } from "./sideMenuTypes";
+
+const THEME_ACTION_PATH = "/resources/preferences/theme";
+
+/**
+ * Theme switcher for the account popover: an "Appearance" submenu listing each theme, with a check
+ * against the current one. Picking a theme doesn't navigate, so the menu stays open and the new
+ * theme applies underneath it. Hidden entirely while the theme switcher feature flag is off,
+ * matching the account page.
+ */
+export function AppearanceMenuItem() {
+  const rootData = useTypedRouteLoaderData<typeof rootLoader>("root");
+  const fetcher = useFetcher();
+
+  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.
+  const pendingTheme = fetcher.formData?.get("theme");
+  const theme =
+    typeof pendingTheme === "string"
+      ? normalizeThemePreference(pendingTheme)
+      : rootData.themePreference;
+
+  return (
+    // Half the standard submenu width: three short labels don't need the room.
+    <SideMenuPopoverSubMenu title="Appearance" icon={ToggleSwitchIcon} contentClassName="min-w-32">
+      <div className="flex flex-col gap-1 p-1">
+        {THEME_OPTIONS.map((option) => (
+          <PopoverMenuItem
+            key={option.value}
+            title={option.label}
+            icon={option.icon}
+            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 })
+            }
+          />
+        ))}
+      </div>
+    </SideMenuPopoverSubMenu>
+  );
+}

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

@@ -1,8 +1,4 @@
-import {
-  ArrowTopRightOnSquareIcon,
-  ChevronRightIcon,
-  ExclamationTriangleIcon,
-} from "@heroicons/react/24/outline";
+import { ArrowTopRightOnSquareIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
 import {
   Form,
@@ -135,7 +131,7 @@ import {
 import { FreePlanUsage } from "../billing/FreePlanUsage";
 import { ConnectionIcon, DevPresencePanel, useDevPresence } from "../DevPresence";
 import { AlphaBadge, NewBadge } from "../FeatureBadges";
-import { Button, ButtonContent, LinkButton } from "../primitives/Buttons";
+import { Button, LinkButton } from "../primitives/Buttons";
 import { Dialog, DialogTrigger } from "../primitives/Dialog";
 import { type RenderIcon } from "../primitives/Icon";
 import { Paragraph } from "../primitives/Paragraph";
@@ -158,6 +154,7 @@ import {
 } from "../primitives/Tooltip";
 import { ShortcutsAutoOpen } from "../Shortcuts";
 import { type FavoritePage } from "~/services/dashboardPreferences.server";
+import { AppearanceMenuItem } from "./AppearanceMenuItem";
 import {
   CustomizeSidebarDialog,
   type CustomizeSidebarSection,
@@ -178,6 +175,7 @@ import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { NotificationPanel } from "./NotificationPanel";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem, SideMenuLabel } from "./SideMenuItem";
+import { SideMenuPopoverSubMenu } from "./SideMenuPopoverSubMenu";
 import { SideMenuSection } from "./SideMenuSection";
 import {
   isItemHidden,
@@ -1898,6 +1896,7 @@ function AccountMenuItems({
           leadingIconClassName={SIDE_MENU_POPOVER_ITEM_ICON}
           className={SIDE_MENU_POPOVER_ITEM_LABEL}
         />
+        <AppearanceMenuItem />
         <PopoverMenuItem
           to={personalAccessTokensPath()}
           title="Personal Access Tokens"
@@ -2102,80 +2101,6 @@ function ProjectSelector({
   );
 }
 
-/**
- * Hover-expandable submenu row for side-menu popovers (Account, Switch organization, Integrations):
- * a menu item with a trailing chevron that reveals `children` in a popover to the right, with a
- * short close delay so the pointer can cross the gap.
- */
-function SideMenuPopoverSubMenu({
-  title,
-  icon,
-  leadingIconClassName,
-  children,
-}: {
-  title: string;
-  icon: RenderIcon;
-  leadingIconClassName?: string;
-  children: ReactNode;
-}) {
-  const navigation = useNavigation();
-  const [isOpen, setIsOpen] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, []);
-
-  // Close the submenu on navigation (the parent popover closes too).
-  useEffect(() => {
-    setIsOpen(false);
-  }, [navigation.location?.pathname]);
-
-  const openNow = () => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    setIsOpen(true);
-  };
-  const closeSoon = () => {
-    // Small delay before closing so the pointer can move onto the content.
-    timeoutRef.current = setTimeout(() => setIsOpen(false), 150);
-  };
-
-  return (
-    <Popover onOpenChange={(open) => setIsOpen(open)} open={isOpen}>
-      <div onMouseEnter={openNow} onMouseLeave={closeSoon} className="flex">
-        <PopoverTrigger className="w-full justify-between overflow-hidden focus-custom">
-          <ButtonContent
-            variant="small-menu-item"
-            className={cn("hover:bg-background-hover", SIDE_MENU_POPOVER_ITEM_LABEL)}
-            LeadingIcon={icon}
-            leadingIconClassName={cn(SIDE_MENU_POPOVER_ITEM_ICON, leadingIconClassName)}
-            TrailingIcon={ChevronRightIcon}
-            trailingIconClassName="text-text-dimmed"
-            textAlignLeft
-            fullWidth
-          >
-            {title}
-          </ButtonContent>
-        </PopoverTrigger>
-        <PopoverContent
-          className="min-w-64 overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
-          align="start"
-          style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
-          side="right"
-          alignOffset={0}
-          sideOffset={-4}
-          onMouseEnter={openNow}
-          onMouseLeave={closeSoon}
-        >
-          {children}
-        </PopoverContent>
-      </div>
-    </Popover>
-  );
-}
-
 function SwitchOrganizations({
   organizations,
   organization,