75 lines
1.8 KiB
TypeScript
75 lines
1.8 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);
|
|
const isEnglish = i18n.language?.startsWith('en');
|
|
const fontFamily = isEnglish ? 'iranyekanEnNum' : 'iranyekan';
|
|
|
|
return createTheme({
|
|
direction: direction,
|
|
colorSchemes: {
|
|
light: {
|
|
palette: lightPalette,
|
|
},
|
|
dark: {
|
|
palette: darkPalette,
|
|
},
|
|
},
|
|
cssVariables: {
|
|
colorSchemeSelector: 'class',
|
|
},
|
|
spacing: 8,
|
|
shape: {
|
|
borderRadius: 8,
|
|
},
|
|
typography: {
|
|
fontFamily: [fontFamily, 'sans-serif'].join(','),
|
|
...typography,
|
|
},
|
|
components: {
|
|
MuiButton: {
|
|
defaultProps: {
|
|
size: 'large',
|
|
fullWidth: true,
|
|
variant: 'contained',
|
|
sx: {
|
|
textTransform: 'none',
|
|
},
|
|
},
|
|
},
|
|
MuiTextField: {
|
|
defaultProps: {
|
|
variant: 'outlined',
|
|
fullWidth: true,
|
|
},
|
|
},
|
|
MuiSelect: {
|
|
styleOverrides: {
|
|
root: {
|
|
textAlign: 'left',
|
|
},
|
|
select: {
|
|
textAlign: 'left',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}, [i18n, i18n.language]);
|
|
|
|
return (
|
|
<ThemeProvider theme={theme} defaultMode="light">
|
|
{children}
|
|
</ThemeProvider>
|
|
);
|
|
};
|