92 lines
1.9 KiB
TypeScript
92 lines
1.9 KiB
TypeScript
import { experimental_extendTheme as extendTheme } from '@mui/material/styles'
|
|
|
|
// For the reference of theme customization guide visit
|
|
// https://mui.com/material-ui/experimental-api/css-theme-variables/customization/
|
|
|
|
export const theme = extendTheme({
|
|
colorSchemes: {
|
|
light: {
|
|
palette: {
|
|
primary: {
|
|
main: '#4c82a3',
|
|
light: '#5e8eab',
|
|
dark: '447592'
|
|
},
|
|
info: {
|
|
main: '#3abff8'
|
|
}
|
|
}
|
|
},
|
|
dark: {
|
|
// palette for dark mode
|
|
// palette: {...}
|
|
}
|
|
},
|
|
components: {
|
|
MuiModal: {
|
|
styleOverrides: {
|
|
root: {
|
|
insetBlock: '25px',
|
|
insetInline: '10px'
|
|
}
|
|
}
|
|
},
|
|
MuiButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
fontSize: '14px',
|
|
fontWeight: 500,
|
|
padding: '8px 15px',
|
|
transition: 'ease 0.2s',
|
|
boxShadow: 'unset',
|
|
lineHeight: 'inherit',
|
|
borderRadius: '4px',
|
|
':hover': {
|
|
background: 'var(--primary-light)',
|
|
boxShadow: 'unset'
|
|
}
|
|
},
|
|
text: {
|
|
color: 'inherit',
|
|
background: 'transparent',
|
|
':hover': {
|
|
color: 'white'
|
|
}
|
|
},
|
|
contained: {
|
|
background: 'var(--primary-main)',
|
|
color: 'white',
|
|
':hover': {
|
|
color: 'white'
|
|
}
|
|
},
|
|
outlined: {
|
|
':hover': {
|
|
color: '#291334',
|
|
borderColor: '#291334',
|
|
background: '#29133433'
|
|
}
|
|
},
|
|
startIcon: {
|
|
marginRight: '12px',
|
|
marginLeft: 0
|
|
}
|
|
}
|
|
},
|
|
MuiTypography: {
|
|
defaultProps: {
|
|
fontFamily: ['Roboto', 'system-ui', 'sans-serif'].join(',')
|
|
}
|
|
}
|
|
},
|
|
breakpoints: {
|
|
values: {
|
|
xs: 0,
|
|
sm: 600,
|
|
md: 900,
|
|
lg: 1200,
|
|
xl: 1420
|
|
}
|
|
}
|
|
})
|