-
Notifications
You must be signed in to change notification settings - Fork 0
/
theme.js
96 lines (95 loc) · 2.84 KB
/
theme.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import { createTheme } from '@mui/material/styles';
const allTypographyVariants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'button', 'caption', 'overline']
const typographyVariants = {
fontFamily: "'Vazir','Roboto', 'Helvetica', 'Arial', sans-serif",
fontWeightBold: 500,
fontWeightMedium: 400,
fontWeightRegular: 300,
fontWeightLight: 300,
}
allTypographyVariants.forEach((item) => {
typographyVariants[item] = { fontFamily: "'Vazir','Roboto', 'Helvetica', 'Arial', sans-serif" }
});
const theme = createTheme({
palette: {
primary: { main: '#61DAFB' },
primary_light: { main: '#88ECFC' },
secondary: { main: '#222' },
success: { main: '#22C157' },
info: { main: '#6072FB' },
warning: { main: '#FBB560' },
danger: { main: '#FB6072' },
gray: { main: '#ccc' },
light: { main: '#edf2f7' },
dark: { main: '#2c3e50' },
white: { main: '#fff' },
muted: { main: '#6c757d' }
},
spacing: (factor) => `${0.25 * factor}rem`,
breakpoints: {
keys: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
values: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400
},
},
typography: { ...typographyVariants },
components: {
MuiContainer: {
styleOverrides: {
maxWidthSm: {
'&.MuiContainer-maxWidthSm': {
maxWidth: '540px',
},
},
maxWidthMd: {
'&.MuiContainer-maxWidthMd': {
maxWidth: '720px',
},
},
maxWidthLg: {
'&.MuiContainer-maxWidthLg': {
maxWidth: '960px',
},
},
maxWidthXl: {
'&.MuiContainer-maxWidthXl': {
maxWidth: '1140px',
},
},
maxWidthXxl: {
'&.MuiContainer-maxWidthXxl': {
maxWidth: '1320px',
},
},
fixed: {
'&.MuiContainer-fixed': {
},
}
}
},
},
});
const ContainerFixed = {
[theme.breakpoints.up('sm')]: {
maxWidth: '540px',
},
[theme.breakpoints.up('md')]: {
maxWidth: '720px',
},
[theme.breakpoints.up('lg')]: {
maxWidth: '960px',
},
[theme.breakpoints.up('xl')]: {
maxWidth: '1140px',
},
[theme.breakpoints.up('xxl')]: {
maxWidth: '1320px',
},
}
theme.components.MuiContainer.styleOverrides.fixed['&.MuiContainer-fixed'] = ContainerFixed;
export default theme;