fix(theme): make preference state deterministic

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>
+  );
+}