124 lines
5.1 KiB
TypeScript
124 lines
5.1 KiB
TypeScript
import type {Theme} from "@mui/material";
|
|
import {createTheme} from "@mui/material";
|
|
import {outlinedInputClasses} from "@mui/material";
|
|
|
|
const customTheme = (outerTheme: Theme) =>
|
|
createTheme({
|
|
palette: {
|
|
mode: outerTheme.palette.mode,
|
|
},
|
|
components: {
|
|
MuiTextField: {
|
|
styleOverrides: {
|
|
root: {
|
|
'--TextField-brandBorderColor': '#E0E3E7',
|
|
'--TextField-brandBorderHoverColor': '#B2BAC2',
|
|
'--TextField-brandBorderFocusedColor': '#6F7E8C',
|
|
'& label': {
|
|
color: 'var(--TextField-brandBorderColor)',
|
|
},
|
|
'& label.Mui-focused': {
|
|
color: 'var(--TextField-brandBorderColor)',
|
|
},
|
|
'& input': {
|
|
color: 'var(--TextField-brandBorderColor)',
|
|
borderColor: 'var(--TextField-brandBorderColor)',
|
|
},
|
|
'& textarea': {
|
|
color: 'var(--TextField-brandBorderColor)',
|
|
borderColor: 'var(--TextField-brandBorderColor)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiOutlinedInput: {
|
|
styleOverrides: {
|
|
notchedOutline: {
|
|
borderColor: 'var(--TextField-brandBorderColor)',
|
|
},
|
|
root: {
|
|
[`&:hover .${outlinedInputClasses.notchedOutline}`]: {
|
|
borderColor: 'var(--TextField-brandBorderHoverColor)',
|
|
},
|
|
[`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
|
|
borderColor: 'var(--TextField-brandBorderFocusedColor)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiDivider: {
|
|
styleOverrides: {
|
|
root: {
|
|
'--TextField-brandBorderColor': '#E0E3E7',
|
|
borderColor: 'var(--TextField-brandBorderColor)',
|
|
borderWidth: 1,
|
|
width: '95%',
|
|
}
|
|
}
|
|
},
|
|
MuiButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
'--TextField-brandBorderColor': '#E0E3E7',
|
|
'--variant-outlinedBorder': '#b5b5b5',
|
|
'--variant-containedBg': '#b5b5b5',
|
|
'--variant-custom-textBg': '#282c34',
|
|
color: 'var(--TextField-brandBorderColor)',
|
|
'&:hover': {
|
|
backgroundColor: 'var(--variant-custom-textBg)',
|
|
borderColor: 'var(--variant-custom-textBg)',
|
|
boxShadow: 'none',
|
|
},
|
|
},
|
|
contained: {
|
|
'--TextField-brandBorderColor': '#E0E3E7',
|
|
'--contained-custom-textBg': '#282c34',
|
|
color: 'var(--contained-custom-textBg)',
|
|
backgroundColor: 'var(--TextField-brandBorderColor)',
|
|
borderColor: 'var(--TextField-brandBorderColor)',
|
|
borderRadius: '4px',
|
|
borderWidth: '1px',
|
|
borderStyle: 'solid',
|
|
'&:hover': {
|
|
backgroundColor: 'var(--contained-custom-textBg)',
|
|
borderColor: 'var(--TextField-brandBorderColor)',
|
|
color: 'var(--TextField-brandBorderColor)',
|
|
boxShadow: 'none',
|
|
},
|
|
}
|
|
}
|
|
},
|
|
MuiPaper: {
|
|
styleOverrides: {
|
|
root: {
|
|
'--TextField-brandBorderColor': '#E0E3E7',
|
|
backgroundColor: '#282c34',
|
|
color: 'var(--TextField-brandBorderColor)',
|
|
width: '90%',
|
|
maxWidth: '90%!important',
|
|
'@media (width <= 570px)': {
|
|
maxWidth: '95%!important',
|
|
width: '95%',
|
|
margin: '5px'
|
|
},
|
|
}
|
|
}
|
|
},
|
|
MuiFab: {
|
|
styleOverrides: {
|
|
root: {
|
|
'--Fab-text-color': '#E0E3E7',
|
|
'--Fab-bg-color': '#282c34',
|
|
'--Fab-bg-color-hover': '#3b444c',
|
|
backgroundColor: 'var(--Fab-bg-color)',
|
|
color: 'var(--Fab-text-color)',
|
|
'&:hover': {
|
|
backgroundColor: 'var(--Fab-bg-color-hover)',
|
|
},
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
export default customTheme; |