theme fixes

src/AppTheme.tsx

@@ -1,13 +1,48 @@
 import * as React from "react";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { getDesignTokens } from "./shared-theme/themePrimitives";
+import { inputsCustomizations } from "./shared-theme/customizations/inputs";
+import { dataDisplayCustomizations } from "./shared-theme/customizations/dataDisplay";
+import { feedbackCustomizations } from "./shared-theme/customizations/feedback";
+import { navigationCustomizations } from "./shared-theme/customizations/navigation";
+import { surfacesCustomizations } from "./shared-theme/customizations/surfaces";
 
-const theme = createTheme({
-  palette: {
-    // mode: "light", // or "dark"
-    mode: "dark", // or "dark"
-  },
+export const ColorModeContext = React.createContext({
+  toggleColorMode: () => {},
+  mode: "light" as "light" | "dark",
 });
 
 export default function AppTheme({ children }: { children: React.ReactNode }) {
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  const [mode, setMode] = React.useState<"light" | "dark">("light");
+
+  const colorMode = React.useMemo(
+    () => ({
+      toggleColorMode: () => {
+        setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
+      },
+      mode,
+    }),
+    [mode]
+  );
+
+  const theme = React.useMemo(
+    () =>
+      createTheme({
+        ...getDesignTokens(mode),
+        components: {
+          ...inputsCustomizations,
+          ...dataDisplayCustomizations,
+          ...feedbackCustomizations,
+          ...navigationCustomizations,
+          ...surfacesCustomizations,
+        },
+      }),
+    [mode]
+  );
+
+  return (
+    <ColorModeContext.Provider value={colorMode}>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </ColorModeContext.Provider>
+  );
 }