docs(theme): record deterministic state evidence

docs/audits/evidence/ux-002/README.md

@@ -0,0 +1,9 @@
+# UX-002 browser evidence
+
+Synthetic/local evidence only. No credentials, tokens or personal data are present.
+
+- `settings-light-375.png` — explicit Light at 375 × 812 after mobile tab overflow correction.
+- `settings-light-768.png` — explicit Light at 768 × 900.
+- `settings-dark-1440.png` — explicit Dark at 1440 × 1000.
+
+The browser also verified System mode, refresh, navigation and two-tab Dark → Light synchronization. Those state transitions are recorded in V-113; no screenshots were needed for every duplicate state.

docs/audits/verification-log.md

@@ -142,3 +142,6 @@ Output was reduced to filenames and commit counts. The token artifact appears un
 | V-108 | Bounded source trace of `LoginPage`, Google/Microsoft account cards, auth API/config, translations and login tests | Repository root | Revalidate UX-001 local/provider execution and identity boundaries | PASS — backend already accepts username or email; UI imposed email-only validation and separate provider tabs; provider exchange and account-link endpoints are distinct | No identity/config/schema behavior changed | N/A |
 | V-109 | `npm.cmd test -- --runInBand --forceExit src/login-page.test.tsx`; full `npm.cmd test -- --runInBand --forceExit`; `npm.cmd run build`; `git diff --check` | `job-tracker-ui` / repository root | Verify unified form, invalid credentials, provider cancellation/return, full regression, TypeScript and patch hygiene | PASS — focused 13/13; full 47/47 suites and 166/166 tests; production build; no whitespace errors | Jest reports its existing force-exit/open-handle notice; provider tokens are synthetic mocks | N/A |
 | V-110 | In-app browser at `http://localhost:3000/login`; dark-theme viewport/DOM checks and screenshots at 375×812, 768×900, 1440×1000 | Local frontend | Verify running local form, accessible names and responsive layout | PASS/PARTIAL — local form readable; viewport and document widths match with no overflow; evidence captured | API config service absent, so provider alternatives were mocked only; light/System and real-provider paths not run. Full-page screenshot mode produced an artifact and was discarded | Environmental/provider limitation |
+| V-111 | Complete trace of `themePrefs`, auth user-key transitions, App provider/router lifecycle, Settings selector, Next layout/bootstrap and existing tests | Repository root | Reproduce UX-002 precedence and delayed switch path | PASS — login stored the resolved user key without a theme notification, so anonymous mode remained until refresh; provider key/router dependency remounted app state; no cross-tab listener or pre-paint bootstrap existed | Confirmed source execution path; no backend/identity behavior implicated | Application-related |
+| V-112 | `npm.cmd test -- --runInBand --forceExit src/theme-state.test.tsx`; full `npm.cmd test -- --runInBand --forceExit`; `npm.cmd run build`; `git diff --check` | `job-tracker-ui` / repository root | Verify precedence, login/logout events, System behavior, pre-paint bootstrap, in-place provider state, regressions and TypeScript | PASS — focused 6/6; full 48/48 suites and 172/172 tests; production build and patch hygiene pass | Initial build found unsupported `noSsr` prop and was corrected; Jest retains existing force-exit/open-handle notice | Application issue corrected before commit |
+| V-113 | In-app browser Settings: Light → Dashboard → refresh; Dark; System; second-tab Dark → Light sync; 375/768/1440 measurements/screenshots; console inspection | Local frontend | Verify actual theme transitions, persistence, cross-tab behavior and responsive access | PASS/PARTIAL — expected scheme at every transition, first tab updated without reload, no final console warnings/errors, no horizontal overflow after scrollable Settings tabs | Authenticated two-user, host OS preference flip and production not run; transient HMR messages occurred while editing and clean build passes | Environmental/deployment limitation |

docs/verification/application-action-matrix.md

@@ -44,5 +44,6 @@ This is the rolling action-level evidence index. `PASS (automated/runtime)` is n
 | CV processing | upload 202, active duplicate reuse, owner-scoped execution and review gate | PASS (real SQLite; synthetic CV/fake provider) | BLOCKED | NOT RUN; worker off | `ai-004-cv-processing-queue.md` |
 | CV processing | retry provenance, durable refresh state and cancel/retry controls | PASS (backend + component tests) | BLOCKED | NOT RUN | `ai-004-cv-processing-queue.md` |
 | Authentication UI | unified username/password and provider alternatives; invalid/cancel/return behavior | PASS (components; mocked providers) | PARTIAL — local dark-theme form at 375/768/1440 | NOT RUN | `ux-001-unified-authentication.md` |
+| Theme state | Light/Dark/System precedence, login/logout scope, refresh/navigation and two-tab synchronization | PASS (state/provider/bootstrap tests) | PASS/PARTIAL — anonymous local browser at 375/768/1440 | NOT RUN | `ux-002-deterministic-theme-state.md` |
 
 Remaining product actions are `NOT STARTED` in the master plan and will be added as their work packages enter verification. The in-app browser is available for local UI checks; configured/real-provider and production access are not documented/configured.

docs/verification/ux-002-deterministic-theme-state.md

@@ -0,0 +1,49 @@
+# UX-002 deterministic theme state
+
+Updated: 2026-08-09
+
+Status: `IMPLEMENTED — NOT VERIFIED`. Automated, build and local browser checks pass. Production and authenticated multi-user browser checks remain.
+
+## Confirmed root cause
+
+The theme preference was keyed by the last `authUserKey`, but login completion emitted the general authentication event before `/auth/me` stored the new user key. `Shell` then stored that key with event emission disabled. Theme state therefore continued using the anonymous preference until a refresh, when the user key was already present and the page appeared to switch theme randomly. Logout had a similar asynchronous boundary.
+
+Theme changes also keyed `CssVarsProvider` and captured `themeMode` in the router memo. A preference change remounted the provider and recreated the router, risking loss of in-page state even though the URL did not intentionally change. MUI also retained its own default local-storage mode, creating another potential source of truth.
+
+## Implemented contract
+
+- Preference resolution is explicit user key, then anonymous preference for a user without a saved choice, then the documented `System` default.
+- Explicit Light and Dark ignore operating-system changes. Only System resolves through the current media query.
+- Auth user-key changes have a dedicated event. It updates theme state without re-running authentication requests or creating an event loop.
+- Relevant `storage` events update another tab without writing back. Unrelated storage events are ignored.
+- MUI mode is changed in place through its color-scheme context with its private persistence disabled. The app/router tree is not keyed or recreated by theme changes.
+- A Next `beforeInteractive` bootstrap applies the same user/anonymous/System resolution before client application paint.
+- Settings tabs are scrollable at narrow widths; this removes the mobile overflow discovered during the required theme browser pass.
+
+No backend, database, dependency, entitlement or production configuration changed.
+
+## Verification
+
+- Focused deterministic theme suite: 6/6.
+- Full frontend: 48/48 suites and 172/172 tests.
+- Production frontend build/TypeScript and `git diff --check`: pass.
+- Browser: explicit Light persisted across Settings → Dashboard navigation and refresh; explicit Dark switched without navigation; System selected the browser's dark preference; a second tab inherited Dark and changing it to Light updated the first tab without reload.
+- Browser widths: 375, 768 and 1440; document width did not exceed the viewport after the tabs correction. Light 375/768 and Dark 1440 evidence is retained.
+- Browser console warnings/errors after the final interactive pass: none. Development HMR emitted transient module-update messages while source files were being edited; they were not present in the captured tab diagnostics and the clean production build passes.
+
+## Remaining gates
+
+- Authenticated User A/User B scoped preference switching was proven at the storage/event unit boundary but not with two live browser accounts because no isolated API authentication environment was running.
+- A real operating-system preference-change event was tested at the resolver/provider boundary, not by changing the host OS during browser automation.
+- Production deployment/browser smoke is not authorized/configured.
+
+## Evidence
+
+- Screenshots: `docs/audits/evidence/ux-002/`
+- Commands/results: `docs/audits/verification-log.md` V-111–V-113
+- Tests: `job-tracker-ui/src/theme-state.test.tsx`
+- Implementation commit: `11734ee`
+
+## Rollback
+
+Revert `11734ee`. No data migration is required; existing `themeMode:<user>` and `themeMode:anon` values remain compatible. Reversion restores the prior delayed-login theme and provider/router remount behavior.

docs/work-programmes/decisions.md

@@ -319,3 +319,13 @@
 - **Consequences:** login presentation becomes simpler without changing backend identity ownership. Provider account management remains available only in its existing authenticated surfaces. Real-provider and production verification are still required.
 - **User approval required:** No; this is the smallest implementation of the explicit UX-001 requirement and preserves the prior security contracts.
 - **Reversible:** Yes. Reverting UX-001 restores the tabbed presentation; no provider link, session, schema or configuration data changes.
+
+## DEC-033 — Theme preference is application-owned; MUI only renders resolved mode
+
+- **Date:** 2026-08-09
+- **Decision:** Keep the existing `themeMode:<user>` storage keys as the only preference store, resolve user → anonymous → System explicitly, and feed the resulting Light/Dark mode into MUI without MUI storage or provider/router remounts. Use a dedicated auth-user event and read-only cross-tab storage subscription; apply the same resolution in a pre-paint Next script.
+- **Reason/evidence:** the trace proved the general auth event fired before the new user key was stored and no later theme event occurred. Refresh therefore changed namespace and appeared random. Provider keys/router dependencies also discarded state, while MUI's default storage could become a second source of truth.
+- **Alternatives considered:** keep provider keys; emit another general auth event; store one global preference; let MUI own `mui-mode`; add a server profile migration. These retain remounts/request loops, lose user isolation, create competing precedence or add unnecessary backend scope.
+- **Consequences:** users without a saved scoped choice inherit the explicit anonymous choice, otherwise the documented default is System. Explicit Light/Dark ignore OS changes. The pre-paint script must remain behaviorally aligned with `themePrefs`; tests cover both.
+- **User approval required:** No; this directly implements the approved UX-002 contract without schema, dependency or production changes.
+- **Reversible:** Yes. Revert `11734ee`; existing preference values remain unchanged and readable.

docs/work-programmes/master-progress.md

@@ -2,17 +2,17 @@
 
 Updated: 2026-08-09
 
-- **Overall programme status:** Active. Six packages are locally verified; fifteen packages through UX-001 are implemented with automated/runtime evidence but blocked from applicable theme/provider/production gates; UX-002 is in progress.
-- **Current work package:** `UX-002` — deterministic theme state (`IN PROGRESS`); UX-001 browser evidence showed that explicit anonymous preference/refresh behavior must be verified here.
+- **Overall programme status:** Active. Six packages are locally verified; sixteen packages through UX-002 are implemented with automated/runtime evidence but blocked from applicable provider/production gates; QA-001 is in progress.
+- **Current work package:** `QA-001` — job-analysis and keyword quality (`IN PROGRESS`); source requirements and the deterministic analysis/cache pipeline are the next trace.
 - **Completed work packages:** None are `DONE`; all repository security/AI packages still have applicable browser, provider and/or production gates.
 - **Locally verified work:** SEC-001, SEC-002, SEC-003, SEC-005A, CORE-001 and PROD-002 (`VERIFIED LOCALLY`).
-- **Implemented, verification incomplete:** SEC-004, SEC-005B, SEC-008, CORE-002, BG-001, OPS-001A/B/C, POL-001/002, AI-001/002/003/004 and UX-001 (`IMPLEMENTED — NOT VERIFIED`). UX-001 now presents one local/provider sign-in card and passes component, full frontend, build and responsive dark-theme browser checks; light/System/configured-provider/production gates remain.
+- **Implemented, verification incomplete:** SEC-004, SEC-005B, SEC-008, CORE-002, BG-001, OPS-001A/B/C, POL-001/002, AI-001/002/003/004 and UX-001/002 (`IMPLEMENTED — NOT VERIFIED`). UX-002 fixes login/logout preference scope, startup paint, route remount and cross-tab synchronization; automated/build and local Light/Dark/System browser gates pass.
 - **Production-verified work:** None.
 - **Blocked work:** SEC-006 requires explicit internet/package-index permission; PROD-001/003/004 and REL-001 require documented production access and unfinished dependencies. Real provider, SMTP/MariaDB and production environments are unavailable; the in-app browser is available for local UI checks.
 - **Deferred work:** None. Conditional multi-replica coordination, model deletion, realtime operation delivery and unrelated production changes remain outside current packages.
-- **Next five work packages:** UX-002 deterministic theme state; QA-001 job-analysis/keyword quality; CAREER-001 Career Workspace redesign; CAREER-002 CV Builder redesign; EMAIL-001 consolidated email experience. SEC-006/007 resume after package-index permission.
-- **Status counts:** 6 `VERIFIED LOCALLY`; 15 `IMPLEMENTED — NOT VERIFIED`; 1 `IN PROGRESS`; 12 `NOT STARTED`; 5 `BLOCKED`; 0 `DONE`; 0 `DEFERRED`.
-- **Test status:** backend 594/594; AI-004 focused backend 40/40; frontend 47/47 suites and 166/166 tests, UX-001 focused 13/13, production build pass; prior sidecar 22/22. Patch check passes. UX-001 dark-theme browser smoke passed at 375/768/1440; configured-provider/light-theme/model/MariaDB/production checks were not run.
+- **Next five work packages:** QA-001 job-analysis/keyword quality; CAREER-001 Career Workspace redesign; CAREER-002 CV Builder redesign; EMAIL-001 consolidated email experience; JOBS-001 job-search/application redesign. SEC-006/007 resume after package-index permission.
+- **Status counts:** 6 `VERIFIED LOCALLY`; 16 `IMPLEMENTED — NOT VERIFIED`; 1 `IN PROGRESS`; 11 `NOT STARTED`; 5 `BLOCKED`; 0 `DONE`; 0 `DEFERRED`.
+- **Test status:** backend 594/594; AI-004 focused backend 40/40; frontend 48/48 suites and 172/172 tests, UX-002 focused 6/6, production build pass; prior sidecar 22/22. Patch check passes. UX-002 browser passed Light/Dark/System/navigation/refresh/two-tab synchronization at required widths; provider/model/MariaDB/production checks were not run.
 - **Deployment status:** No deployment performed. No production migrations were run. AI operation worker remains disabled by default.
 - **Production status:** Unchanged and unverified. No provider/model call, model pull, external request or paid API occurred.
 - **Known regressions:** None found by automated suites. Jest still needs `--forceExit` and reports its existing open-handle notice. Direct clean EF-only SQLite migration still hits the pre-existing historical blank-chain defect before later migrations; normal startup owns reconciliation. Cross-feature monthly AI usage accounting remains a rollout gap.
@@ -42,5 +42,6 @@ Updated: 2026-08-09
 - `docs/verification/ai-003-strategy-snapshot-queue.md`
 - `docs/verification/ai-004-cv-processing-queue.md`
 - `docs/verification/ux-001-unified-authentication.md`
+- `docs/verification/ux-002-deterministic-theme-state.md`
 - `docs/verification/prod-002-ai-evaluation.md`
 - `docs/work-programmes/master-work-plan.md`

docs/work-programmes/master-work-plan.md

@@ -16,7 +16,7 @@ Allowed statuses are `NOT STARTED`, `IN PROGRESS`, `IMPLEMENTED — NOT VERIFIED
 
 `DONE` requires every applicable acceptance criterion, focused and regression tests, browser/accessibility/theme/mobile checks, tenant and entitlement checks, documentation, migration/rollback evidence, and production verification. Repository-only work that still requires production is at most `VERIFIED LOCALLY`.
 
-Exactly one implementation item may be `IN PROGRESS`. As of this revision it is **UX-002**.
+Exactly one implementation item may be `IN PROGRESS`. As of this revision it is **QA-001**.
 
 ## Consolidated dependency order
 
@@ -577,11 +577,11 @@ Ordering differences from the suggested list:
 - **Required tests:** Light/Dark/System, login/logout/refresh/navigation/storage/preference listeners/tabs.
 - **Required browser verification:** 375/768/1440, light/dark/system, refresh/navigation/two tabs/reduced motion.
 - **Required production verification:** normal browser smoke after deploy.
-- **Status:** `IN PROGRESS`.
-- **Blocker:** none.
-- **Evidence:** source requirement re-read is next; UX-001 browser storage limitation makes deterministic anonymous preference/refresh behavior the immediate dependency.
-- **Commit:** none.
-- **Remaining work:** trace root precedence before changing UI.
+- **Status:** `IMPLEMENTED — NOT VERIFIED`.
+- **Blocker:** production and live authenticated multi-user browser environments are unavailable; repository/browser work is complete.
+- **Evidence:** `docs/verification/ux-002-deterministic-theme-state.md`; V-111–V-113; focused 6/6, full frontend 48/48 suites and 172/172 tests, build, Light/Dark/System/navigation/refresh/two-tab browser checks and 375/768/1440 captures.
+- **Commit:** `11734ee` (`fix(theme): make preference state deterministic`).
+- **Remaining work:** live User A/User B preference switching and production browser smoke; retain existing preference keys during rollout.
 
 ### QA-001 — Job-analysis and keyword quality
 
@@ -595,9 +595,9 @@ Ordering differences from the suggested list:
 - **Required tests:** seven specified Norwegian/English/mixed/short/noisy/tech/filler fixtures.
 - **Required browser verification:** result presentation/empty/error/long Norwegian text at three widths/themes.
 - **Required production verification:** synthetic analysis comparison; no silent historical rewrite.
-- **Status:** `NOT STARTED`.
+- **Status:** `IN PROGRESS`.
 - **Blocker:** none.
-- **Evidence:** reported examples not yet reproduced.
+- **Evidence:** source requirements and deterministic fixture contract are next for complete pipeline/caching trace; PROD-002 fixtures are available.
 - **Commit:** none.
 - **Remaining work:** deterministic fix before considering model help.
 

docs/work-programmes/session-handoff.md

@@ -2,17 +2,17 @@
 
 Updated: 2026-08-09
 
-- **Exact current task:** UX-002 — revalidate every theme-state source and implement deterministic saved-user/anonymous/system precedence without startup flash or cross-tab loops.
-- **Last completed step:** UX-001 implementation `93b8692` was committed. Login now uses one username-or-email/password card with sign-in-only Google/Microsoft presentations; focused/full frontend tests, build and local responsive dark-theme browser checks pass. Evidence/tracking are ready for their own commit and push.
-- **Files currently modified:** UX-001 verification/evidence/tracking documents and three synthetic screenshots under `docs/audits/evidence/ux-001/`. UX-001 application code is committed.
-- **Commands already run:** initial clean-tree review/push; AI-004 implementation/evidence commits/push; UX-001 complete source trace; focused 13/13 and full 166/166 frontend tests; production build; diff checks; local browser at 375/768/1440; implementation commit. See V-104–V-110.
-- **Test results:** backend baseline 594/594; frontend 47/47 suites and 166/166 tests; UX-001 focused 13/13; production frontend build and diff check pass. Browser local form passed in dark theme at 375/768/1440 with no measured overflow. Provider browser tests remain mocked.
-- **Services currently running:** Next development server on `http://localhost:3000` in exec session `62719`; in-app browser tab open at `/login`. Pre-existing Docker services were not changed.
-- **Temporary files or processes:** only the local Next development server and in-app browser tab. Stop the server before final handoff. No dependency declaration, database or private artifact changed.
+- **Exact current task:** QA-001 — re-read the specified Norwegian/English quality fixtures and trace import cleanup, language/token/phrase/skill/scoring/cache/version/UI-label behavior before editing.
+- **Last completed step:** UX-002 implementation `11734ee` was committed. Deterministic user/anonymous/System precedence, pre-paint bootstrap, in-place provider switching, auth-user/cross-tab events and mobile Settings tabs pass automated/build/browser verification. Evidence/tracking are ready for their own commit and push.
+- **Files currently modified:** UX-002 verification/evidence/tracking documents and three synthetic screenshots under `docs/audits/evidence/ux-002/`. UX-002 application code is committed.
+- **Commands already run:** UX-002 complete theme/auth/provider/router/bootstrap trace; focused 6/6 and full 172/172 frontend tests; production build; diff checks; local browser Light/Dark/System/navigation/refresh/two-tab/375/768/1440 checks; implementation commit. See V-111–V-113.
+- **Test results:** backend baseline 594/594; frontend 48/48 suites and 172/172 tests; UX-002 focused 6/6; production frontend build and diff check pass. Browser theme checks and final console inspection pass; authenticated multi-user/production remain.
+- **Services currently running:** none started by this session. The Next development server was stopped and in-app browser tabs finalized. Pre-existing Docker services were not changed.
+- **Temporary files or processes:** none. No dependency declaration, database or private artifact changed.
 - **Production changes currently active:** none. No deployment, provider/model call, private CV access, model pull, paid service, production migration or external payload occurred.
-- **Rollback status:** UX-001 has no schema/config migration; revert `93b8692` to restore tabs. AI-004 rollback is documented in its verification record; worker switches remain default-off. Production is unchanged.
-- **Uncommitted changes:** UX-001 evidence/master tracking documents and screenshots only; commit/push these before UX-002 application code.
-- **Known failures:** light/System and configured/real-provider UX-001 browser checks remain; MariaDB/SMTP/production unavailable; SEC-006 upgrades require explicit internet/package-index permission; complete parser cancellation/isolation remains SEC-007; historical clean EF-only SQLite chain needs startup reconciliation; Jest reports its existing force-exit/open-handle notice.
-- **Exact next action:** commit and push UX-001 evidence, then read `work.md:102-133`, `App.tsx`, `themePrefs.ts`, auth user-key transitions and theme tests completely; reproduce refresh/login/logout/cross-tab precedence before editing.
-- **Work that can continue independently:** UX-002 and QA-001 repository work. SEC-006/007 await package-index permission; PROD-001/003/004 await production access.
+- **Rollback status:** UX-002 has no schema/dependency migration; revert `11734ee` while retaining existing preference keys. UX-001/AI-004 rollback records remain current. Production is unchanged.
+- **Uncommitted changes:** UX-002 evidence/master tracking documents and screenshots only; commit/push these before QA-001 application code.
+- **Known failures:** authenticated two-user/production theme smoke remains; configured/real-provider UX-001 browser checks remain; MariaDB/SMTP/production unavailable; SEC-006 upgrades require explicit internet/package-index permission; parser isolation remains SEC-007; historical clean EF-only SQLite chain needs startup reconciliation; Jest reports its existing force-exit/open-handle notice.
+- **Exact next action:** commit and push UX-002 evidence, then read `work.md:174-263`, `ollama.md:177-223`, PROD-002 fixtures and every job-analysis producer/cache/UI consumer; reproduce the seven specified quality cases before editing.
+- **Work that can continue independently:** QA-001 and subsequent repository UX packages. SEC-006/007 await package-index permission; PROD-001/003/004 await production access.
 - **Decisions still required from the user:** none for synthetic repository work. Internet/package upgrades, private CV access, external/paid providers and production actions retain their explicit approval/safety gates; SEC-009 retention/legal policy remains unresolved.

job-tracker-ui/app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata, Viewport } from "next";
+import Script from "next/script";
 
 import "../src/index.css";
+import { THEME_BOOTSTRAP_SCRIPT } from "../src/themeBootstrap";
 
 export const metadata: Metadata = {
   title: "Jobbjakt",
@@ -23,8 +25,9 @@ export const viewport: Viewport = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
+        <Script id="jobtracker-theme-bootstrap" strategy="beforeInteractive" dangerouslySetInnerHTML={{ __html: THEME_BOOTSTRAP_SCRIPT }} />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap" rel="stylesheet" />

job-tracker-ui/src/App.tsx

@@ -1,8 +1,7 @@
-import React, { Suspense, lazy, useEffect, useMemo, useState } from "react";
+import React, { Suspense, createContext, lazy, useCallback, useContext, useEffect, useMemo, useState } from "react";
 
-import { Box, Button, CssBaseline, IconButton, Typography } from "@mui/material";
+import { Box, Button, IconButton, Typography } from "@mui/material";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { CssVarsProvider } from "@mui/material/styles";
 
 import DashboardIcon from "@mui/icons-material/Dashboard";
 import WorkOutlineIcon from "@mui/icons-material/WorkOutline";
@@ -20,7 +19,6 @@ import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
 
 import { Navigate, Route, Routes, useLocation, useNavigate, createBrowserRouter, RouterProvider } from "react-router-dom";
 
-import { getTheme } from "./theme";
 import { ToastProvider } from "./toast";
 import { ConfirmProvider } from "./confirm";
 import { PromptProvider } from "./prompt";
@@ -40,7 +38,8 @@ import { resolveCaptureUrl } from "./captureUrl";
 import { clearAuthClientState, setAuthUserKey } from "./auth";
 import { AccountPlanProvider } from "./accountPlan";
 import AppShell, { NavItem } from "./layout/AppShell";
-import { getThemeModePref, setThemeModePref, ThemeModePref } from "./themePrefs";
+import { getThemeModePref, setThemeModePref, subscribeToThemePreferenceChanges, ThemeModePref } from "./themePrefs";
+import JobTrackerThemeProvider from "./ThemeProvider";
 
 const AddJobModal = lazy(() => import("./components/AddJobModal"));
 const KanbanBoard = lazy(() => import("./components/KanbanBoard"));
@@ -66,6 +65,8 @@ const OperationsPage = lazy(() => import("./views/OperationsPage"));
 const NotFoundPage = lazy(() => import("./views/NotFoundPage"));
 
 type AuthConfig = { requireAuth: boolean };
+type ThemeControls = { themeMode: ThemeModePref; onThemeModeChange: (value: ThemeModePref) => void };
+const ThemeControlsContext = createContext<ThemeControls | null>(null);
 type MeResponse = {
   provider?: "local" | "google" | "external";
   id?: string;
@@ -383,19 +384,23 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
   );
 }
 
+function ThemeAwareShell(props: Omit<React.ComponentProps<typeof Shell>, "themeMode" | "onThemeModeChange">) {
+  const controls = useContext(ThemeControlsContext);
+  if (!controls) throw new Error("Theme controls are unavailable.");
+  return <Shell {...props} {...controls} />;
+}
+
 export default function App() {
   const systemPrefersDark = useMediaQuery("(prefers-color-scheme: dark)", { defaultMatches: true, noSsr: true });
   const [themeMode, setThemeMode] = useState<ThemeModePref>(() => getThemeModePref());
-  const effectiveMode: "light" | "dark" = themeMode === "light" ? "light" : themeMode === "dark" ? "dark" : systemPrefersDark ? "dark" : "light";
-  const theme = useMemo(() => getTheme(effectiveMode), [effectiveMode]);
 
   useEffect(() => {
     const sync = () => { setThemeMode(getThemeModePref()); };
-    window.addEventListener("auth-changed", sync);
-    return () => window.removeEventListener("auth-changed", sync);
+    return subscribeToThemePreferenceChanges(sync);
   }, []);
 
-  const onThemeModeChange = (v: ThemeModePref) => { setThemeModePref(v); setThemeMode(v); };
+  const onThemeModeChange = useCallback((v: ThemeModePref) => { setThemeModePref(v); setThemeMode(v); }, []);
+  const themeControls = useMemo(() => ({ themeMode, onThemeModeChange }), [onThemeModeChange, themeMode]);
 
   const [jobPageSize, setJobPageSize] = useState<15 | 20 | 25>(() => {
     const raw = window.localStorage.getItem("jobPageSize");
@@ -423,19 +428,20 @@ export default function App() {
     { path: "/confirm-email-change", element: <VerifyEmailPage emailChange />, errorElement: <RouteErrorPage /> },
     { path: "/microsoft-legacy-relink", element: <MicrosoftLegacyRelinkPage />, errorElement: <RouteErrorPage /> },
     { path: "/cv/:slug", element: <PublicCvPage />, errorElement: <RouteErrorPage /> },
-    { path: "/*", element: <Shell jobPageSize={jobPageSize} setJobPageSize={setJobPageSize} jobColumns={jobColumns} setJobColumns={setJobColumns} themeMode={themeMode} onThemeModeChange={onThemeModeChange} />, errorElement: <RouteErrorPage /> },
-  ], { future: { v7_relativeSplatPath: true } }), [jobColumns, jobPageSize, themeMode]);
+    { path: "/*", element: <ThemeAwareShell jobPageSize={jobPageSize} setJobPageSize={setJobPageSize} jobColumns={jobColumns} setJobColumns={setJobColumns} />, errorElement: <RouteErrorPage /> },
+  ], { future: { v7_relativeSplatPath: true } }), [jobColumns, jobPageSize]);
 
   return (
     <ToastProvider>
       <ConfirmProvider>
         <PromptProvider>
-          <CssVarsProvider key={effectiveMode} theme={theme as any} defaultMode={effectiveMode} disableTransitionOnChange>
-            <CssBaseline enableColorScheme />
+          <JobTrackerThemeProvider preference={themeMode} systemPrefersDark={systemPrefersDark}>
             <I18nProvider>
+              <ThemeControlsContext.Provider value={themeControls}>
                 <RouterProvider router={router} future={{ v7_startTransition: true }} />
+              </ThemeControlsContext.Provider>
             </I18nProvider>
-          </CssVarsProvider>
+          </JobTrackerThemeProvider>
         </PromptProvider>
       </ConfirmProvider>
     </ToastProvider>

job-tracker-ui/src/ThemeProvider.tsx

@@ -0,0 +1,25 @@
+import React, { useLayoutEffect, useMemo } from "react";
+import { CssBaseline } from "@mui/material";
+import { CssVarsProvider, useColorScheme } from "@mui/material/styles";
+
+import { getTheme } from "./theme";
+import { resolveEffectiveThemeMode, ThemeModePref } from "./themePrefs";
+
+function ThemeModeSynchronizer({ mode }: { mode: "light" | "dark" }) {
+  const { setMode } = useColorScheme();
+  useLayoutEffect(() => { setMode(mode); }, [mode, setMode]);
+  return null;
+}
+
+export default function JobTrackerThemeProvider({ preference, systemPrefersDark, children }: { preference: ThemeModePref; systemPrefersDark: boolean; children: React.ReactNode }) {
+  const mode = resolveEffectiveThemeMode(preference, systemPrefersDark);
+  const theme = useMemo(() => getTheme("light"), []);
+
+  return (
+    <CssVarsProvider theme={theme as any} defaultMode={mode} storageManager={null} disableTransitionOnChange>
+      <ThemeModeSynchronizer mode={mode} />
+      <CssBaseline enableColorScheme />
+      {children}
+    </CssVarsProvider>
+  );
+}

job-tracker-ui/src/auth.ts

@@ -2,6 +2,7 @@ export const AUTH_REMEMBER_ME_KEY = "authRememberMe";
 const AUTH_PERSISTENCE_KEY = "authTokenPersistence";
 const AUTH_USER_KEY = "authUserKey";
 const AUTH_CSRF_COOKIE = "XSRF-TOKEN";
+export const AUTH_USER_CHANGED_EVENT = "auth-user-changed";
 
 export type AuthPersistence = "local" | "session";
 
@@ -72,12 +73,14 @@ export function getAuthUserKey(): string {
 }
 
 export function setAuthUserKey(value: string | null | undefined, emit = true) {
+  const previous = getAuthUserKey();
   const next = typeof value === "string" ? value.trim() : "";
   if (!next) {
     safeRemove(window.localStorage, AUTH_USER_KEY);
   } else {
     safeSet(window.localStorage, AUTH_USER_KEY, next);
   }
+  if (previous !== (next || "anon")) window.dispatchEvent(new Event(AUTH_USER_CHANGED_EVENT));
   if (emit) emitAuthChanged();
 }
 
@@ -89,6 +92,7 @@ export function clearAuthClientState(emit = true) {
   // the user is logged out (login page, expired session).
   const had = safeGet(window.localStorage, AUTH_USER_KEY) != null;
   safeRemove(window.localStorage, AUTH_USER_KEY);
+  if (had) window.dispatchEvent(new Event(AUTH_USER_CHANGED_EVENT));
   if (emit && had) emitAuthChanged();
 }
 

job-tracker-ui/src/components/SettingsView.tsx

@@ -110,7 +110,7 @@ export default function SettingsView({
         {t("settingsSubtitle")}
       </Typography>
 
-      <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 1 }}>
+      <Tabs value={tab} onChange={(_, v) => setTab(v)} variant="scrollable" scrollButtons="auto" allowScrollButtonsMobile sx={{ mb: 1 }}>
         <Tab label={t("settingsTabGeneral")} />
         <Tab label={t("settingsTabFollowUps")} />
         <Tab label={t("settingsTabNotifications")} />

job-tracker-ui/src/theme-state.test.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import { clearAuthClientState, setAuthUserKey } from "./auth";
+import JobTrackerThemeProvider from "./ThemeProvider";
+import { THEME_BOOTSTRAP_SCRIPT } from "./themeBootstrap";
+import {
+  getThemeModePref,
+  resolveEffectiveThemeMode,
+  setThemeModePref,
+  subscribeToThemePreferenceChanges,
+} from "./themePrefs";
+
+function setSystemDark(matches: boolean) {
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    value: jest.fn().mockImplementation(() => ({
+      matches,
+      media: "(prefers-color-scheme: dark)",
+      onchange: null,
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+}
+
+describe("deterministic theme state", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    document.documentElement.removeAttribute("data-color-scheme");
+    document.documentElement.style.colorScheme = "";
+    setSystemDark(false);
+  });
+
+  it("uses user preference, then anonymous preference, then the documented System default", () => {
+    expect(getThemeModePref()).toBe("system");
+    setThemeModePref("light");
+    expect(getThemeModePref()).toBe("light");
+
+    setAuthUserKey("user-a", false);
+    expect(getThemeModePref()).toBe("light");
+    setThemeModePref("dark");
+    expect(getThemeModePref()).toBe("dark");
+
+    setAuthUserKey("user-b", false);
+    expect(getThemeModePref()).toBe("light");
+    window.localStorage.removeItem("themeMode:anon");
+    expect(getThemeModePref()).toBe("system");
+  });
+
+  it("switches to the correct scoped preference on login and logout without a refresh", () => {
+    window.localStorage.setItem("themeMode:anon", "light");
+    window.localStorage.setItem("themeMode:user-a", "dark");
+    const observed: string[] = [];
+    const unsubscribe = subscribeToThemePreferenceChanges(() => observed.push(getThemeModePref()));
+
+    setAuthUserKey("user-a", false);
+    clearAuthClientState(false);
+
+    expect(observed).toEqual(["dark", "light"]);
+    unsubscribe();
+  });
+
+  it("synchronizes relevant cross-tab storage changes without writing them back", () => {
+    setAuthUserKey("user-a", false);
+    const sync = jest.fn();
+    const unsubscribe = subscribeToThemePreferenceChanges(sync);
+
+    window.dispatchEvent(new StorageEvent("storage", { key: "themeMode:user-a", newValue: "dark" }));
+    window.dispatchEvent(new StorageEvent("storage", { key: "unrelated", newValue: "value" }));
+    window.dispatchEvent(new StorageEvent("storage", { key: "authUserKey", newValue: "user-b" }));
+
+    expect(sync).toHaveBeenCalledTimes(2);
+    unsubscribe();
+  });
+
+  it("uses system preference only for System mode", () => {
+    expect(resolveEffectiveThemeMode("light", true)).toBe("light");
+    expect(resolveEffectiveThemeMode("dark", false)).toBe("dark");
+    expect(resolveEffectiveThemeMode("system", true)).toBe("dark");
+    expect(resolveEffectiveThemeMode("system", false)).toBe("light");
+  });
+
+  it("applies the saved preference before the client application renders", () => {
+    window.localStorage.setItem("themeMode:anon", "light");
+    setSystemDark(true);
+
+    new Function(THEME_BOOTSTRAP_SCRIPT)();
+
+    expect(document.documentElement).toHaveAttribute("data-color-scheme", "light");
+    expect(document.documentElement.style.colorScheme).toBe("light");
+  });
+
+  it("changes color scheme without remounting application state", async () => {
+    let mounts = 0;
+    function StatefulProbe() {
+      const [count, setCount] = useState(0);
+      useEffect(() => { mounts += 1; }, []);
+      return <button onClick={() => setCount((value) => value + 1)}>Count {count}</button>;
+    }
+
+    const view = render(
+      <JobTrackerThemeProvider preference="light" systemPrefersDark>
+        <StatefulProbe />
+      </JobTrackerThemeProvider>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Count 0" }));
+
+    view.rerender(
+      <JobTrackerThemeProvider preference="dark" systemPrefersDark={false}>
+        <StatefulProbe />
+      </JobTrackerThemeProvider>,
+    );
+
+    await waitFor(() => expect(document.documentElement).toHaveAttribute("data-color-scheme", "dark"));
+    expect(screen.getByRole("button", { name: "Count 1" })).toBeInTheDocument();
+    expect(mounts).toBe(1);
+  });
+});

job-tracker-ui/src/themeBootstrap.ts

@@ -0,0 +1,17 @@
+export const THEME_BOOTSTRAP_SCRIPT = `(() => {
+  try {
+    const read = (key) => {
+      const value = window.localStorage.getItem(key);
+      return value === "light" || value === "dark" || value === "system" ? value : null;
+    };
+    const userKey = window.localStorage.getItem("authUserKey") || "anon";
+    const preference = read("themeMode:" + userKey) || (userKey !== "anon" ? read("themeMode:anon") : null) || "system";
+    const mode = preference === "dark" || (preference === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    document.documentElement.setAttribute("data-color-scheme", mode);
+    document.documentElement.style.colorScheme = mode;
+  } catch {
+    const mode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    document.documentElement.setAttribute("data-color-scheme", mode);
+    document.documentElement.style.colorScheme = mode;
+  }
+})();`;

job-tracker-ui/src/themePrefs.ts

@@ -1,6 +1,10 @@
-import { getAuthUserKey } from "./auth";
+import { AUTH_USER_CHANGED_EVENT, getAuthUserKey } from "./auth";
 
 export type ThemeModePref = "system" | "light" | "dark";
+export type EffectiveThemeMode = "light" | "dark";
+
+export const DEFAULT_THEME_MODE: ThemeModePref = "system";
+const THEME_KEY_PREFIX = "themeMode:";
 
 export function getUserKeyFromToken(): string {
   return getAuthUserKey();
@@ -10,12 +14,47 @@ function k(base: string) {
   return `${base}:${getUserKeyFromToken()}`;
 }
 
+function readThemeMode(key: string): ThemeModePref | null {
+  try {
+    const raw = window.localStorage.getItem(key);
+    return raw === "light" || raw === "dark" || raw === "system" ? raw : null;
+  } catch {
+    return null;
+  }
+}
+
 export function getThemeModePref(): ThemeModePref {
-  const raw = window.localStorage.getItem(k("themeMode"));
-  if (raw === "light" || raw === "dark" || raw === "system") return raw;
-  return "system";
+  const userKey = getUserKeyFromToken();
+  const savedUserMode = readThemeMode(`${THEME_KEY_PREFIX}${userKey}`);
+  if (savedUserMode) return savedUserMode;
+  if (userKey !== "anon") {
+    const anonymousMode = readThemeMode(`${THEME_KEY_PREFIX}anon`);
+    if (anonymousMode) return anonymousMode;
+  }
+  return DEFAULT_THEME_MODE;
 }
 
 export function setThemeModePref(v: ThemeModePref) {
+  try {
     window.localStorage.setItem(k("themeMode"), v);
+  } catch {
+    // Keep the in-memory selection even when storage is unavailable.
+  }
+}
+
+export function resolveEffectiveThemeMode(preference: ThemeModePref, systemPrefersDark: boolean): EffectiveThemeMode {
+  if (preference === "light" || preference === "dark") return preference;
+  return systemPrefersDark ? "dark" : "light";
+}
+
+export function subscribeToThemePreferenceChanges(sync: () => void) {
+  const onStorage = (event: StorageEvent) => {
+    if (event.key === "authUserKey" || event.key?.startsWith(THEME_KEY_PREFIX)) sync();
+  };
+  window.addEventListener(AUTH_USER_CHANGED_EVENT, sync);
+  window.addEventListener("storage", onStorage);
+  return () => {
+    window.removeEventListener(AUTH_USER_CHANGED_EVENT, sync);
+    window.removeEventListener("storage", onStorage);
+  };
 }