File size: 2,130 Bytes
4114d85 |
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 |
import { createTheme } from '@mui/material/styles'
// assets
import colors from 'assets/scss/_themes-vars.module.scss'
// project imports
import componentStyleOverrides from './compStyleOverride'
import themePalette from './palette'
import themeTypography from './typography'
/**
* Represent theme style and structure as per Material-UI
* @param {JsonObject} customization customization parameter object
*/
export const theme = (customization) => {
const color = colors
const themeOption = customization.isDarkMode
? {
colors: color,
heading: color.paper,
paper: color.darkPrimaryLight,
backgroundDefault: color.darkPaper,
background: color.darkPrimaryLight,
darkTextPrimary: color.paper,
darkTextSecondary: color.paper,
textDark: color.paper,
menuSelected: color.darkSecondaryDark,
menuSelectedBack: color.darkSecondaryLight,
divider: color.darkPaper,
customization
}
: {
colors: color,
heading: color.grey900,
paper: color.paper,
backgroundDefault: color.paper,
background: color.primaryLight,
darkTextPrimary: color.grey700,
darkTextSecondary: color.grey500,
textDark: color.grey900,
menuSelected: color.secondaryDark,
menuSelectedBack: color.secondaryLight,
divider: color.grey200,
customization
}
const themeOptions = {
direction: 'ltr',
palette: themePalette(themeOption),
mixins: {
toolbar: {
minHeight: '48px',
padding: '16px',
'@media (min-width: 600px)': {
minHeight: '48px'
}
}
},
typography: themeTypography(themeOption)
}
const themes = createTheme(themeOptions)
themes.components = componentStyleOverrides(themeOption)
return themes
}
export default theme
|