diff --git a/src/admin/AdminApp.tsx b/src/admin/AdminApp.tsx
index 8208a84..1d84b3d 100644
--- a/src/admin/AdminApp.tsx
+++ b/src/admin/AdminApp.tsx
@@ -7,6 +7,7 @@ import { queryClient } from "./lib/queryClient";
import ErrorBoundary from "./components/ErrorBoundary";
import AdminLayout from "./components/AdminLayout";
import AlertContainer from "./components/AlertContainer";
+import MuiProvider from "./ui/MuiProvider";
import Login from "./pages/Login";
import Dashboard from "./pages/Dashboard";
import "./variables.css";
@@ -84,154 +85,159 @@ const WarehouseCategories = lazy(() => import("./pages/WarehouseCategories"));
export default function AdminApp() {
return (
-
-
-
-
-
-
-
-
- }
- >
-
- } />
- }>
- } />
- } />
- } />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- }
- />
- }
- />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
-
- } />
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ }
+ >
+
+ } />
+ }>
+ } />
+ } />
+ } />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ }
+ />
+ }
+ />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+
+ } />
+
+
+
+
+
+
+
);
}
diff --git a/src/admin/ui/MuiColorSchemeSync.tsx b/src/admin/ui/MuiColorSchemeSync.tsx
new file mode 100644
index 0000000..e64b009
--- /dev/null
+++ b/src/admin/ui/MuiColorSchemeSync.tsx
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useColorScheme } from "@mui/material/styles";
+import { useTheme as useAppTheme } from "../../context/ThemeContext";
+
+/**
+ * ThemeContext is the single owner of the `data-theme` attribute. This mirrors
+ * its value into MUI's JS color-scheme state so theme.applyStyles('dark') and
+ * useColorScheme().mode stay in sync with the attribute the CSS selector reads.
+ */
+export default function MuiColorSchemeSync() {
+ const { theme } = useAppTheme();
+ const { mode, setMode } = useColorScheme();
+
+ useEffect(() => {
+ if (mode !== theme) setMode(theme as "light" | "dark");
+ }, [theme, mode, setMode]);
+
+ return null;
+}
diff --git a/src/admin/ui/MuiProvider.tsx b/src/admin/ui/MuiProvider.tsx
new file mode 100644
index 0000000..c66c7fb
--- /dev/null
+++ b/src/admin/ui/MuiProvider.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import { ThemeProvider } from "@mui/material/styles";
+import { theme } from "../theme";
+import MuiColorSchemeSync from "./MuiColorSchemeSync";
+
+export default function MuiProvider({ children }: { children: ReactNode }) {
+ return (
+
+
+ {children}
+
+ );
+}