mankatcheung · Jul 23, 2026 · Jul 23, 2026 · Jul 23, 2026 · Jul 23, 2026 · coderabbitai
@@ -36,12 +36,17 @@ vi.mock('#/lib/queryClient', () => ({
   queryClient: { clear: vi.fn(), resetQueries: vi.fn() },
 }));
 
+import { ThemeProvider } from '#/lib/theme';
 import { AccountPage } from '#/routes/_authenticated/account';
 
 const makeClient = () => new QueryClient({ defaultOptions: { queries: { retry: false } } });
 
 function Wrapper({ children }: { children: React.ReactNode }) {
-  return <QueryClientProvider client={makeClient()}>{children}</QueryClientProvider>;
+  return (
+    <ThemeProvider>
+      <QueryClientProvider client={makeClient()}>{children}</QueryClientProvider>
+    </ThemeProvider>
+  );
 }
 
 const defaultResponse = {

@@ -31,15 +31,20 @@ vi.mock('#/lib/queryClient', () => ({
   queryClient: { clear: vi.fn() },
 }));
 
+import { ThemeProvider } from '#/lib/theme';
 import { AuthenticatedLayout } from '#/routes/_authenticated/route';
 
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return <ThemeProvider>{children}</ThemeProvider>;
+}
+
 describe('AuthenticatedLayout', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
   it('renders navigation links', () => {
-    render(<AuthenticatedLayout />);
+    render(<AuthenticatedLayout />, { wrapper: Wrapper });
     // "Job Finder" appears in both mobile header and desktop sidebar
     expect(screen.getAllByText('Job Finder').length).toBeGreaterThanOrEqual(1);
     // "Dashboard" / "Account" appear in sidebar and bottom nav
@@ -50,19 +55,19 @@ describe('AuthenticatedLayout', () => {
   });
 
   it('renders the Outlet for page content', () => {
-    render(<AuthenticatedLayout />);
+    render(<AuthenticatedLayout />, { wrapper: Wrapper });
     expect(screen.getByTestId('outlet')).toBeInTheDocument();
   });
 
   it('renders a sign out button', () => {
-    render(<AuthenticatedLayout />);
+    render(<AuthenticatedLayout />, { wrapper: Wrapper });
     const signOutBtns = screen.getAllByRole('button', { name: /sign out/i });
     expect(signOutBtns.length).toBeGreaterThanOrEqual(1);
   });
 
   it('calls logout mutation and navigates to /login on sign out', async () => {
     mockGqlRequest.mockResolvedValue({ logout: true });
-    render(<AuthenticatedLayout />);
+    render(<AuthenticatedLayout />, { wrapper: Wrapper });
 
     // Click the first sign-out button (mobile header icon button)
     fireEvent.click(screen.getAllByRole('button', { name: /sign out/i })[0]);

@@ -1 +1,14 @@
 import '@testing-library/jest-dom/vitest';
+
+if (typeof window.matchMedia !== 'function') {
+  window.matchMedia = (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  });
+}
@@ -0,0 +1,59 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+
+export type Theme = 'light' | 'dark' | 'system';
+
+export const THEME_STORAGE_KEY = 'theme';
+
+function isTheme(value: string | null): value is Theme {
+  return value === 'light' || value === 'dark' || value === 'system';
+}
+
+function getSystemTheme(): 'light' | 'dark' {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function applyResolvedTheme(theme: Theme): void {
+  const resolved = theme === 'system' ? getSystemTheme() : theme;
+  document.documentElement.classList.toggle('dark', resolved === 'dark');
+}
+
+// Inlined into the document head so the theme is applied before hydration
+// and before first paint, avoiding a flash of the wrong theme.
+export const THEME_INIT_SCRIPT = `(function(){try{var t=localStorage.getItem('${THEME_STORAGE_KEY}');var d=t==='dark'||((t==='system'||!t)&&window.matchMedia('(prefers-color-scheme: dark)').matches);if(d)document.documentElement.classList.add('dark');}catch(e){}})();`;
+
+interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof window === 'undefined') return 'system';
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    return isTheme(stored) ? stored : 'system';
+  });
+
+  useEffect(() => {
+    applyResolvedTheme(theme);
+    if (theme !== 'system') return;
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const onChange = () => applyResolvedTheme('system');
+    media.addEventListener('change', onChange);
+    return () => media.removeEventListener('change', onChange);
+  }, [theme]);
+
+  const setTheme = (next: Theme) => {
+    localStorage.setItem(THEME_STORAGE_KEY, next);
+    setThemeState(next);
+  };
+
+  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within a ThemeProvider');
+  return ctx;
+}
@@ -3,6 +3,7 @@ import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
 import { TanStackDevtools } from '@tanstack/react-devtools';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { queryClient } from '#/lib/queryClient';
+import { THEME_INIT_SCRIPT, ThemeProvider } from '#/lib/theme';
 
 import appCss from '../styles.css?url';
 
@@ -35,18 +36,21 @@ function NotFound() {
 
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <HeadContent />
+        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
       </head>
       <body>
-        <QueryClientProvider client={queryClient}>
-          {children}
-          <TanStackDevtools
-            config={{ position: 'bottom-right' }}
-            plugins={[{ name: 'Tanstack Router', render: <TanStackRouterDevtoolsPanel /> }]}
-          />
-        </QueryClientProvider>
+        <ThemeProvider>
+          <QueryClientProvider client={queryClient}>
+            {children}
+            <TanStackDevtools
+              config={{ position: 'bottom-right' }}
+              plugins={[{ name: 'Tanstack Router', render: <TanStackRouterDevtoolsPanel /> }]}
+            />
+          </QueryClientProvider>
+        </ThemeProvider>
         <Scripts />
       </body>
     </html>

@@ -4,9 +4,11 @@ import { useForm } from 'react-hook-form';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
+import { MonitorIcon, MoonIcon, SunIcon } from 'lucide-react';
 import { gqlClient } from '#/graphql/client';
 import { clearAuthIndicator } from '#/lib/auth';
 import { queryClient } from '#/lib/queryClient';
+import { useTheme, type Theme } from '#/lib/theme';
 
 export const Route = createFileRoute('/_authenticated/account')({
   component: AccountPage,
@@ -252,11 +254,18 @@ const inputCls =
 
 const labelCls = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1';
 
+const THEME_OPTIONS: { value: Theme; label: string; icon: React.ReactNode }[] = [
+  { value: 'light', label: 'Light', icon: <SunIcon size={16} /> },
+  { value: 'dark', label: 'Dark', icon: <MoonIcon size={16} /> },
+  { value: 'system', label: 'System', icon: <MonitorIcon size={16} /> },
+];
+
 // ── Component ──────────────────────────────────────────────────────────────
 
 export function AccountPage() {
   const navigate = useNavigate();
   const qc = useQueryClient();
+  const { theme, setTheme } = useTheme();
 
   // Active sessions
   const { data: sessionsData } = useQuery({
@@ -485,6 +494,36 @@ export function AccountPage() {
     <div className="max-w-xl mx-auto px-4 sm:px-6 py-6 sm:py-10 space-y-10">
       <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Account settings</h1>
 
+      {/* ── Appearance ── */}
+      <section className="space-y-4">
+        <div>
+          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">Appearance</h2>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Choose how Job Finder looks on this device.
+          </p>
+        </div>
+        <div className="inline-flex rounded-lg border border-gray-300 dark:border-gray-600 p-1 gap-1">
+          {THEME_OPTIONS.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => setTheme(option.value)}
+              aria-pressed={theme === option.value}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
+                theme === option.value
+                  ? 'bg-blue-600 text-white'
+                  : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+              }`}
+            >
+              {option.icon}
+              {option.label}
+            </button>
+          ))}
+        </div>
+      </section>
+
+      <hr className="border-gray-200 dark:border-gray-700" />
+
       {/* ── Profile ── */}
       <section className="space-y-4">
         <div>

@@ -8,6 +8,7 @@ import {
 import { isAuthenticated, getIsAuthenticated } from '#/lib/auth';
 import { gqlClient } from '#/graphql/client';
 import { queryClient } from '#/lib/queryClient';
+import { useTheme, type Theme } from '#/lib/theme';
 import { useHotkeys } from '#/hooks/useHotkeys';
 import { CommandPalette } from '#/components/CommandPalette';
 import { ShortcutCheatSheet } from '#/components/ShortcutCheatSheet';
@@ -16,9 +17,35 @@ import {
   BriefcaseIcon,
   LayoutDashboardIcon,
   LogOutIcon,
+  MonitorIcon,
+  MoonIcon,
+  SunIcon,
   UserIcon,
 } from 'lucide-react';
 
+const THEME_CYCLE: Record<Theme, Theme> = { light: 'dark', dark: 'system', system: 'light' };
+const THEME_ICON: Record<Theme, React.ReactNode> = {
+  light: <SunIcon size={18} />,
+  dark: <MoonIcon size={18} />,
+  system: <MonitorIcon size={18} />,
+};
+const THEME_LABEL: Record<Theme, string> = { light: 'Light', dark: 'Dark', system: 'System' };
+
+function ThemeToggleButton({ className = '' }: { className?: string }) {
+  const { theme, setTheme } = useTheme();
+  return (
+    <button
+      type="button"
+      onClick={() => setTheme(THEME_CYCLE[theme])}
+      aria-label={`Theme: ${THEME_LABEL[theme]}. Click to switch theme.`}
+      title={`Theme: ${THEME_LABEL[theme]}`}
+      className={`p-2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 rounded-lg transition-colors ${className}`}
+    >
+      {THEME_ICON[theme]}
+    </button>
+  );
+}
+
 const LOGOUT_MUTATION = `mutation { logout }`;
 
 export const Route = createFileRoute('/_authenticated')({
@@ -51,19 +78,23 @@ export function AuthenticatedLayout() {
       {/* Mobile top header */}
       <header className="lg:hidden fixed top-0 inset-x-0 z-40 h-14 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-4">
         <span className="text-lg font-bold text-gray-900 dark:text-gray-100">Job Finder</span>
-        <button
-          onClick={handleLogout}
-          aria-label="Sign out"
-          className="p-2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 rounded-lg transition-colors"
-        >
-          <LogOutIcon size={18} />
-        </button>
+        <div className="flex items-center gap-1">
+          <ThemeToggleButton />
+          <button
+            onClick={handleLogout}
+            aria-label="Sign out"
+            className="p-2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 rounded-lg transition-colors"
+          >
+            <LogOutIcon size={18} />
+          </button>
+        </div>
       </header>
 
       {/* Desktop sidebar */}
       <aside className="hidden lg:flex w-60 flex-shrink-0 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex-col">
-        <div className="px-6 py-5 border-b border-gray-200 dark:border-gray-700">
+        <div className="px-6 py-5 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
           <span className="text-lg font-bold text-gray-900 dark:text-gray-100">Job Finder</span>
+          <ThemeToggleButton />
         </div>
 
         <nav className="flex-1 px-3 py-4 space-y-1">

@@ -1,5 +1,7 @@
 @import 'tailwindcss';
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 * {
   box-sizing: border-box;
 }
@@ -13,3 +15,11 @@ body,
 body {
   margin: 0;
 }
+
+body,
+body * {
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}