49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
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";
|
|
|
|
export const ColorModeContext = React.createContext({
|
|
toggleColorMode: () => {},
|
|
mode: "light" as "light" | "dark",
|
|
});
|
|
|
|
export default function AppTheme({ children }: { children: React.ReactNode }) {
|
|
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>
|
|
);
|
|
}
|