48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { createTheme, ThemeProvider } from '@mui/material';
|
|
import { darkPalette, lightPalette } from '@/theme/palette';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { typography } from '@/theme/typography';
|
|
|
|
export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
|
|
children,
|
|
}) => {
|
|
const { i18n } = useTranslation();
|
|
|
|
const theme = useMemo(() => {
|
|
const direction = i18n.dir(i18n.language);
|
|
|
|
return createTheme({
|
|
direction: direction,
|
|
colorSchemes: {
|
|
light: {
|
|
palette: lightPalette,
|
|
},
|
|
dark: {
|
|
palette: darkPalette,
|
|
},
|
|
},
|
|
cssVariables: {
|
|
colorSchemeSelector: 'class',
|
|
},
|
|
spacing: 8,
|
|
typography: typography,
|
|
components: {
|
|
MuiButton: {
|
|
defaultProps: {
|
|
sx: {
|
|
textTransform: 'none',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}, [i18n]);
|
|
|
|
return (
|
|
<ThemeProvider theme={theme} defaultMode="system">
|
|
{children}
|
|
</ThemeProvider>
|
|
);
|
|
};
|