From 6f3c3695e6a7222755d1c8533eb321b449ad9a68 Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sun, 1 Nov 2026 00:56:37 -0700
Subject: [PATCH 1/4] feat(v2): sun/moon theme switch on the rail, one theme
 setting (TASK-740)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-authored-by: wisp <WyJ3aXNwIiwiZGVmYXVsdCJd@agents.commonly.invalid>
Agent-Model: claude/claude-sonnet-5-5/default
---
 .../src/v2/__tests__/V2ThemeSwitch.test.tsx   | 33 +++++++++++++++++++
 frontend/src/v2/components/V2NavRail.tsx      |  2 ++
 frontend/src/v2/components/V2SettingsPage.tsx | 10 +++---
 frontend/src/v2/components/V2ThemeSwitch.tsx  | 33 +++++++++++++++++++
 .../src/v2/components/v2-theme-switch.css     | 12 +++++++
 frontend/src/v2/hooks/useV2ThemePref.ts       |  7 ++++
 frontend/src/v2/utils/theme.ts                | 17 ++++++++++
 7 files changed, 108 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx
 create mode 100644 frontend/src/v2/components/V2ThemeSwitch.tsx
 create mode 100644 frontend/src/v2/components/v2-theme-switch.css
 create mode 100644 frontend/src/v2/hooks/useV2ThemePref.ts

diff --git a/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx b/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx
new file mode 100644
index 0000000000..edb7b6e360
--- /dev/null
+++ b/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import V2ThemeSwitch from '../components/V2ThemeSwitch';
+import useV2ThemePref from '../hooks/useV2ThemePref';
+import { setV2Theme, V2_THEME_KEY } from '../utils/theme';
+
+// TASK-740 (D224): the rail switch writes the one stored theme preference that
+// Settings > Theme reads, and a change made elsewhere moves the switch.
+
+const Probe: React.FC = () => <span data-testid="pref">{useV2ThemePref()}</span>;
+
+beforeEach(() => {
+  window.localStorage.clear();
+  document.documentElement.removeAttribute('data-v2-theme');
+});
+
+describe('V2ThemeSwitch', () => {
+  test('a click stores the same key and html attribute as Settings > Theme', () => {
+    render(<><V2ThemeSwitch /><Probe /></>);
+    fireEvent.click(screen.getByRole('button', { name: /dark/i }));
+    expect(window.localStorage.getItem(V2_THEME_KEY)).toBe('dark');
+    expect(document.documentElement.getAttribute('data-v2-theme')).toBe('dark');
+    expect(screen.getByRole('button', { name: /dark/i })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: /light/i })).toHaveAttribute('aria-pressed', 'false');
+    expect(screen.getByTestId('pref')).toHaveTextContent('dark');
+  });
+
+  test('a preference set elsewhere moves the switch', () => {
+    render(<V2ThemeSwitch />);
+    act(() => setV2Theme('light'));
+    expect(screen.getByRole('button', { name: /light/i })).toHaveAttribute('aria-pressed', 'true');
+  });
+});
diff --git a/frontend/src/v2/components/V2NavRail.tsx b/frontend/src/v2/components/V2NavRail.tsx
index 62ff70649f..c5f2988394 100644
--- a/frontend/src/v2/components/V2NavRail.tsx
+++ b/frontend/src/v2/components/V2NavRail.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import V2FeedbackMenu from './V2FeedbackMenu';
 import V2AccountMenu from './V2AccountMenu';
+import V2ThemeSwitch from './V2ThemeSwitch';
 import { useAuth } from '../../context/AuthContext';
 import { useTranslation } from 'react-i18next';
 import Badge from '@mui/material/Badge';
@@ -127,6 +128,7 @@ const V2NavRail: React.FC<V2NavRailProps> = ({ onPodsMobileNav, needsYouCount })
           <div className="v2-rail__utility">
             <V2FeedbackMenu />
           </div>
+          <V2ThemeSwitch />
           <span className="v2-rail__foot-sep" aria-hidden="true" />
           {/* Account */}
           <div className="v2-rail__user">
diff --git a/frontend/src/v2/components/V2SettingsPage.tsx b/frontend/src/v2/components/V2SettingsPage.tsx
index 63b5a7460b..422ba6fb79 100644
--- a/frontend/src/v2/components/V2SettingsPage.tsx
+++ b/frontend/src/v2/components/V2SettingsPage.tsx
@@ -14,7 +14,8 @@ import V2AvatarCropDialog from './V2AvatarCropDialog';
 import V2Segmented from './V2Segmented';
 import { nextPaperAvatarPreset } from '../utils/avatarPresets';
 import { LANGUAGE_REGISTRY } from '../../i18n';
-import { V2_THEMES, V2ThemePref, getV2Theme, setV2Theme } from '../utils/theme';
+import { V2_THEMES, V2ThemePref, setV2Theme } from '../utils/theme';
+import useV2ThemePref from '../hooks/useV2ThemePref';
 
 type TokenStatus = {
   hasToken?: boolean;
@@ -537,11 +538,8 @@ const V2ApiTokenSection: React.FC = () => {
 const V2LanguageSection: React.FC = () => {
   const { i18n, t } = useTranslation();
   const active = i18n.resolvedLanguage || i18n.language || 'en';
-  const [theme, setTheme] = useState<V2ThemePref>(() => getV2Theme());
-  const chooseTheme = (pref: V2ThemePref) => {
-    setTheme(pref);
-    setV2Theme(pref);
-  };
+  const theme = useV2ThemePref();
+  const chooseTheme = (pref: V2ThemePref) => setV2Theme(pref);
 
   return (
     <div className="v2-settings__look">
diff --git a/frontend/src/v2/components/V2ThemeSwitch.tsx b/frontend/src/v2/components/V2ThemeSwitch.tsx
new file mode 100644
index 0000000000..4bed1c6ea9
--- /dev/null
+++ b/frontend/src/v2/components/V2ThemeSwitch.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import useV2ThemePref from '../hooks/useV2ThemePref';
+import { resolveV2Theme, setV2Theme } from '../utils/theme';
+import './v2-theme-switch.css';
+
+const Sun = () => (
+  <svg className="i" viewBox="0 0 24 24" aria-hidden="true">
+    <circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+  </svg>
+);
+const Moon = () => (
+  <svg className="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z" /></svg>
+);
+
+// D224 / TASK-740: the sun and moon pair from the d215 rail. It writes the same
+// stored preference as Settings > Theme (setV2Theme), so there is one setting.
+// An 'auto' preference shows whichever set the OS is giving; a click makes it
+// explicit.
+const V2ThemeSwitch: React.FC = () => {
+  const { t } = useTranslation();
+  const active = resolveV2Theme(useV2ThemePref());
+  return (
+    <div className="seg seg--ic seg--rail" role="group" aria-label={t('common.theme.label')}>
+      <button type="button" data-t="light" title={t('common.theme.light')} aria-label={t('common.theme.light')}
+        aria-pressed={active === 'light'} onClick={() => setV2Theme('light')}><Sun /></button>
+      <button type="button" data-t="dark" title={t('common.theme.dark')} aria-label={t('common.theme.dark')}
+        aria-pressed={active === 'dark'} onClick={() => setV2Theme('dark')}><Moon /></button>
+    </div>
+  );
+};
+
+export default V2ThemeSwitch;
diff --git a/frontend/src/v2/components/v2-theme-switch.css b/frontend/src/v2/components/v2-theme-switch.css
new file mode 100644
index 0000000000..abec0cb351
--- /dev/null
+++ b/frontend/src/v2/components/v2-theme-switch.css
@@ -0,0 +1,12 @@
+/* TASK-740 (D224): the d215 rail theme switch, lifted from
+   docs/design/artboards/d215/index.html (.seg, .seg--ic, .seg--rail, lines
+   169-178). Scoped under .v2-rail so the generic .seg names stay local. The
+   artboard's short colour names map to --v2-* as in primitives.css; the on state
+   is aria-pressed (the artboard's .on), the same look. */
+.v2-rail .seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--v2-r-9); background: var(--v2-surface-tint); box-shadow: inset 0 0 0 1px var(--v2-border-soft); flex: none; }
+.v2-rail .seg button { all: unset; box-sizing: border-box; cursor: pointer; height: 28px; padding: 0; width: 32px; border-radius: var(--v2-r-7); display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--v2-text-secondary); white-space: nowrap; }
+.v2-rail .seg button[aria-pressed="true"] { background: var(--v2-surface); color: var(--v2-text-primary); box-shadow: 0 0 0 1px var(--v2-key-edge), 0 1px 2px rgba(16, 24, 40, 0.08); }
+.v2-rail .seg button:focus-visible { box-shadow: var(--v2-focus-ring); outline: 1px solid var(--v2-accent); }
+.v2-rail .seg--ic svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.v2-rail .seg--rail { flex-direction: column; margin-bottom: 4px; }
+.v2-rail .seg--rail button { height: 30px; }
diff --git a/frontend/src/v2/hooks/useV2ThemePref.ts b/frontend/src/v2/hooks/useV2ThemePref.ts
new file mode 100644
index 0000000000..4d8b7a7fcf
--- /dev/null
+++ b/frontend/src/v2/hooks/useV2ThemePref.ts
@@ -0,0 +1,7 @@
+import { useSyncExternalStore } from 'react';
+import { getV2Theme, subscribeV2Theme, V2ThemePref } from '../utils/theme';
+
+// The stored theme preference, re-read whenever setV2Theme changes it.
+export default function useV2ThemePref(): V2ThemePref {
+  return useSyncExternalStore(subscribeV2Theme, getV2Theme, () => 'auto');
+}
diff --git a/frontend/src/v2/utils/theme.ts b/frontend/src/v2/utils/theme.ts
index 667dfd9c4b..c772e339cc 100644
--- a/frontend/src/v2/utils/theme.ts
+++ b/frontend/src/v2/utils/theme.ts
@@ -19,6 +19,22 @@ export function applyV2Theme(pref: V2ThemePref): void {
   document.documentElement.setAttribute('data-v2-theme', pref);
 }
 
+const listeners = new Set<() => void>();
+
+// Lets every mounted control (the Settings picker, the rail switch) follow the
+// one stored preference instead of keeping a copy of it.
+export function subscribeV2Theme(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => { listeners.delete(listener); };
+}
+
+// 'auto' follows the OS; the rail switch needs the set actually showing.
+export function resolveV2Theme(pref: V2ThemePref): 'light' | 'dark' {
+  if (pref !== 'auto') return pref;
+  return typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches
+    ? 'dark' : 'light';
+}
+
 export function setV2Theme(pref: V2ThemePref): void {
   try {
     window.localStorage.setItem(V2_THEME_KEY, pref);
@@ -26,4 +42,5 @@ export function setV2Theme(pref: V2ThemePref): void {
     // Storage can be blocked; the choice still applies for this page view.
   }
   applyV2Theme(pref);
+  listeners.forEach((listener) => listener());
 }

From aaf351a4062f8fed8f47848944fbf875cfc65587 Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sun, 1 Nov 2026 01:10:16 -0700
Subject: [PATCH 2/4] fix(v2): theme switch follows an OS light/dark flip in
 Auto (TASK-740)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-authored-by: wisp <WyJ3aXNwIiwiZGVmYXVsdCJd@agents.commonly.invalid>
Agent-Model: claude/claude-sonnet-5-5/default
---
 .../src/v2/__tests__/V2ThemeSwitch.test.tsx   | 19 +++++++++++++++++++
 frontend/src/v2/components/V2ThemeSwitch.tsx  | 11 +++++++----
 frontend/src/v2/utils/theme.ts                |  8 +++++++-
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx b/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx
index edb7b6e360..864fedad77 100644
--- a/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx
+++ b/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx
@@ -30,4 +30,23 @@ describe('V2ThemeSwitch', () => {
     act(() => setV2Theme('light'));
     expect(screen.getByRole('button', { name: /light/i })).toHaveAttribute('aria-pressed', 'true');
   });
+
+  test('in Auto, an OS light/dark flip moves the switch', () => {
+    let dark = false;
+    let fire: () => void = () => {};
+    const original = window.matchMedia;
+    window.matchMedia = jest.fn().mockImplementation(() => ({
+      get matches() { return dark; },
+      addEventListener: (_: string, cb: () => void) => { fire = cb; },
+      removeEventListener: jest.fn(),
+    })) as unknown as typeof window.matchMedia;
+    try {
+      render(<V2ThemeSwitch />);
+      expect(screen.getByRole('button', { name: /light/i })).toHaveAttribute('aria-pressed', 'true');
+      act(() => { dark = true; fire(); });
+      expect(screen.getByRole('button', { name: /dark/i })).toHaveAttribute('aria-pressed', 'true');
+    } finally {
+      window.matchMedia = original;
+    }
+  });
 });
diff --git a/frontend/src/v2/components/V2ThemeSwitch.tsx b/frontend/src/v2/components/V2ThemeSwitch.tsx
index 4bed1c6ea9..10978c77e8 100644
--- a/frontend/src/v2/components/V2ThemeSwitch.tsx
+++ b/frontend/src/v2/components/V2ThemeSwitch.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useSyncExternalStore } from 'react';
 import { useTranslation } from 'react-i18next';
-import useV2ThemePref from '../hooks/useV2ThemePref';
-import { resolveV2Theme, setV2Theme } from '../utils/theme';
+import { getV2Theme, resolveV2Theme, setV2Theme, subscribeV2Theme } from '../utils/theme';
 import './v2-theme-switch.css';
 
 const Sun = () => (
@@ -19,7 +18,11 @@ const Moon = () => (
 // explicit.
 const V2ThemeSwitch: React.FC = () => {
   const { t } = useTranslation();
-  const active = resolveV2Theme(useV2ThemePref());
+  const active = useSyncExternalStore(
+    subscribeV2Theme,
+    () => resolveV2Theme(getV2Theme()),
+    () => 'light',
+  );
   return (
     <div className="seg seg--ic seg--rail" role="group" aria-label={t('common.theme.label')}>
       <button type="button" data-t="light" title={t('common.theme.light')} aria-label={t('common.theme.light')}
diff --git a/frontend/src/v2/utils/theme.ts b/frontend/src/v2/utils/theme.ts
index c772e339cc..c8ef10429b 100644
--- a/frontend/src/v2/utils/theme.ts
+++ b/frontend/src/v2/utils/theme.ts
@@ -23,9 +23,15 @@ const listeners = new Set<() => void>();
 
 // Lets every mounted control (the Settings picker, the rail switch) follow the
 // one stored preference instead of keeping a copy of it.
+// It also fires when the OS flips light/dark, so an 'auto' preference stays current.
 export function subscribeV2Theme(listener: () => void): () => void {
   listeners.add(listener);
-  return () => { listeners.delete(listener); };
+  const mql = typeof window !== 'undefined' ? window.matchMedia?.('(prefers-color-scheme: dark)') : undefined;
+  mql?.addEventListener?.('change', listener);
+  return () => {
+    listeners.delete(listener);
+    mql?.removeEventListener?.('change', listener);
+  };
 }
 
 // 'auto' follows the OS; the rail switch needs the set actually showing.

From 0cd1f26b3221bb9fc526b0cbc9d57a2809915c4d Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sun, 1 Nov 2026 01:15:49 -0700
Subject: [PATCH 3/4] feat(v2): theme switch in the 390 Pods top bar, lifted
 from d215 .mtop (TASK-740)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-authored-by: wisp <WyJ3aXNwIiwiZGVmYXVsdCJd@agents.commonly.invalid>
Agent-Model: claude/claude-sonnet-5-5/default
---
 .../src/v2/__tests__/V2ThemeSwitch.test.tsx     |  7 +++++++
 frontend/src/v2/components/V2PodsSidebar.tsx    |  2 ++
 frontend/src/v2/components/V2ThemeSwitch.tsx    |  5 +++--
 frontend/src/v2/components/v2-theme-switch.css  | 17 +++++++++--------
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx b/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx
index 864fedad77..02fe5f28dd 100644
--- a/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx
+++ b/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx
@@ -31,6 +31,13 @@ describe('V2ThemeSwitch', () => {
     expect(screen.getByRole('button', { name: /light/i })).toHaveAttribute('aria-pressed', 'true');
   });
 
+  test('the bar variant is the small 390 switch, the rail one is the column', () => {
+    const { container, rerender } = render(<V2ThemeSwitch variant="bar" />);
+    expect(container.firstElementChild).toHaveClass('seg', 'seg--ic', 'seg--sm');
+    rerender(<V2ThemeSwitch />);
+    expect(container.firstElementChild).toHaveClass('seg--rail');
+  });
+
   test('in Auto, an OS light/dark flip moves the switch', () => {
     let dark = false;
     let fire: () => void = () => {};
diff --git a/frontend/src/v2/components/V2PodsSidebar.tsx b/frontend/src/v2/components/V2PodsSidebar.tsx
index 0c934b61e0..0bcd54bb3d 100644
--- a/frontend/src/v2/components/V2PodsSidebar.tsx
+++ b/frontend/src/v2/components/V2PodsSidebar.tsx
@@ -6,6 +6,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import V2Avatar from './V2Avatar';
 import V2Segmented from './V2Segmented';
 import { ShellGlyph } from '../icons/glyphs';
+import V2ThemeSwitch from './V2ThemeSwitch';
 import { UseV2PodsResult, V2Pod, V2PodMember, useV2Pods } from '../hooks/useV2Pods';
 import { useV2Pinned } from '../hooks/useV2Pinned';
 import { useAuth } from '../../context/AuthContext';
@@ -490,6 +491,7 @@ const V2PodsSidebar: React.FC<V2PodsSidebarProps> = ({
         {isPage && (
           <div className="v2-pods__bar">
             <h1 className="v2-pods__page-title">{t('podsSidebar.workspace.listTitle')}</h1>
+            <V2ThemeSwitch variant="bar" />
             <button
               ref={searchToggleRef}
               type="button"
diff --git a/frontend/src/v2/components/V2ThemeSwitch.tsx b/frontend/src/v2/components/V2ThemeSwitch.tsx
index 10978c77e8..fdb478dab0 100644
--- a/frontend/src/v2/components/V2ThemeSwitch.tsx
+++ b/frontend/src/v2/components/V2ThemeSwitch.tsx
@@ -16,7 +16,8 @@ const Moon = () => (
 // stored preference as Settings > Theme (setV2Theme), so there is one setting.
 // An 'auto' preference shows whichever set the OS is giving; a click makes it
 // explicit.
-const V2ThemeSwitch: React.FC = () => {
+// 'rail' is the 1440 sidebar; 'bar' is the 390 Pods top bar (the rail is gone there).
+const V2ThemeSwitch: React.FC<{ variant?: 'rail' | 'bar' }> = ({ variant = 'rail' }) => {
   const { t } = useTranslation();
   const active = useSyncExternalStore(
     subscribeV2Theme,
@@ -24,7 +25,7 @@ const V2ThemeSwitch: React.FC = () => {
     () => 'light',
   );
   return (
-    <div className="seg seg--ic seg--rail" role="group" aria-label={t('common.theme.label')}>
+    <div className={`seg seg--ic v2-theme-seg ${variant === 'bar' ? 'seg--sm' : 'seg--rail'}`} role="group" aria-label={t('common.theme.label')}>
       <button type="button" data-t="light" title={t('common.theme.light')} aria-label={t('common.theme.light')}
         aria-pressed={active === 'light'} onClick={() => setV2Theme('light')}><Sun /></button>
       <button type="button" data-t="dark" title={t('common.theme.dark')} aria-label={t('common.theme.dark')}
diff --git a/frontend/src/v2/components/v2-theme-switch.css b/frontend/src/v2/components/v2-theme-switch.css
index abec0cb351..5aeecd30c2 100644
--- a/frontend/src/v2/components/v2-theme-switch.css
+++ b/frontend/src/v2/components/v2-theme-switch.css
@@ -1,12 +1,13 @@
 /* TASK-740 (D224): the d215 rail theme switch, lifted from
    docs/design/artboards/d215/index.html (.seg, .seg--ic, .seg--rail, lines
-   169-178). Scoped under .v2-rail so the generic .seg names stay local. The
+   169-178). Scoped by .v2-theme-seg so the generic .seg names stay local; --sm is the 390 Pods top bar (.mtop). The
    artboard's short colour names map to --v2-* as in primitives.css; the on state
    is aria-pressed (the artboard's .on), the same look. */
-.v2-rail .seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--v2-r-9); background: var(--v2-surface-tint); box-shadow: inset 0 0 0 1px var(--v2-border-soft); flex: none; }
-.v2-rail .seg button { all: unset; box-sizing: border-box; cursor: pointer; height: 28px; padding: 0; width: 32px; border-radius: var(--v2-r-7); display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--v2-text-secondary); white-space: nowrap; }
-.v2-rail .seg button[aria-pressed="true"] { background: var(--v2-surface); color: var(--v2-text-primary); box-shadow: 0 0 0 1px var(--v2-key-edge), 0 1px 2px rgba(16, 24, 40, 0.08); }
-.v2-rail .seg button:focus-visible { box-shadow: var(--v2-focus-ring); outline: 1px solid var(--v2-accent); }
-.v2-rail .seg--ic svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
-.v2-rail .seg--rail { flex-direction: column; margin-bottom: 4px; }
-.v2-rail .seg--rail button { height: 30px; }
+.seg.v2-theme-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--v2-r-9); background: var(--v2-surface-tint); box-shadow: inset 0 0 0 1px var(--v2-border-soft); flex: none; }
+.seg.v2-theme-seg button { all: unset; box-sizing: border-box; cursor: pointer; height: 28px; padding: 0; width: 32px; border-radius: var(--v2-r-7); display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--v2-text-secondary); white-space: nowrap; }
+.seg.v2-theme-seg button[aria-pressed="true"] { background: var(--v2-surface); color: var(--v2-text-primary); box-shadow: 0 0 0 1px var(--v2-key-edge), 0 1px 2px rgba(16, 24, 40, 0.08); }
+.seg.v2-theme-seg button:focus-visible { box-shadow: var(--v2-focus-ring); outline: 1px solid var(--v2-accent); }
+.seg.v2-theme-seg--ic svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.seg.v2-theme-seg--rail { flex-direction: column; margin-bottom: 4px; }
+.seg.v2-theme-seg--rail button { height: 30px; }
+.seg.v2-theme-seg.seg--sm button { width: 28px; height: 24px; }

From 3d0ee83d8c03131d58a0816abbe634c2124d1d9c Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sun, 1 Nov 2026 01:19:14 -0700
Subject: [PATCH 4/4] fix(v2): theme switch CSS selectors match the classes it
 renders (TASK-740)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-authored-by: wisp <WyJ3aXNwIiwiZGVmYXVsdCJd@agents.commonly.invalid>
Agent-Model: claude/claude-sonnet-5-5/default
---
 frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx | 15 +++++++++++++++
 frontend/src/v2/components/v2-theme-switch.css   |  6 +++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx b/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx
index 02fe5f28dd..26d2ece2c6 100644
--- a/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx
+++ b/frontend/src/v2/__tests__/V2ThemeSwitch.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import fs from 'fs';
+import path from 'path';
 import { render, screen, fireEvent, act } from '@testing-library/react';
 import V2ThemeSwitch from '../components/V2ThemeSwitch';
 import useV2ThemePref from '../hooks/useV2ThemePref';
@@ -38,6 +40,19 @@ describe('V2ThemeSwitch', () => {
     expect(container.firstElementChild).toHaveClass('seg--rail');
   });
 
+  test('every modifier class the switch renders has a compound rule in its CSS', () => {
+    const css = fs.readFileSync(path.join(__dirname, '../components/v2-theme-switch.css'), 'utf8');
+    const { container, rerender } = render(<V2ThemeSwitch />);
+    const rail = container.firstElementChild as HTMLElement;
+    expect(rail).toHaveClass('seg--ic', 'seg--rail');
+    rerender(<V2ThemeSwitch variant="bar" />);
+    const bar = container.firstElementChild as HTMLElement;
+    expect(bar).toHaveClass('seg--sm');
+    ['seg--ic svg.i', 'seg--rail', 'seg--rail button', 'seg--sm button'].forEach((tail) => {
+      expect(css).toContain(`.seg.v2-theme-seg.${tail}`);
+    });
+  });
+
   test('in Auto, an OS light/dark flip moves the switch', () => {
     let dark = false;
     let fire: () => void = () => {};
diff --git a/frontend/src/v2/components/v2-theme-switch.css b/frontend/src/v2/components/v2-theme-switch.css
index 5aeecd30c2..296056b742 100644
--- a/frontend/src/v2/components/v2-theme-switch.css
+++ b/frontend/src/v2/components/v2-theme-switch.css
@@ -7,7 +7,7 @@
 .seg.v2-theme-seg button { all: unset; box-sizing: border-box; cursor: pointer; height: 28px; padding: 0; width: 32px; border-radius: var(--v2-r-7); display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--v2-text-secondary); white-space: nowrap; }
 .seg.v2-theme-seg button[aria-pressed="true"] { background: var(--v2-surface); color: var(--v2-text-primary); box-shadow: 0 0 0 1px var(--v2-key-edge), 0 1px 2px rgba(16, 24, 40, 0.08); }
 .seg.v2-theme-seg button:focus-visible { box-shadow: var(--v2-focus-ring); outline: 1px solid var(--v2-accent); }
-.seg.v2-theme-seg--ic svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
-.seg.v2-theme-seg--rail { flex-direction: column; margin-bottom: 4px; }
-.seg.v2-theme-seg--rail button { height: 30px; }
+.seg.v2-theme-seg.seg--ic svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.seg.v2-theme-seg.seg--rail { flex-direction: column; margin-bottom: 4px; }
+.seg.v2-theme-seg.seg--rail button { height: 30px; }
 .seg.v2-theme-seg.seg--sm button { width: 28px; height: 24px; }