85 lines
3.3 KiB
TypeScript
85 lines
3.3 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)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
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': 'rgba(246,246,248,0.06)',
|
|
color: 'var(--TextField-brandBorderColor)',
|
|
'&:hover': {
|
|
backgroundColor: 'var(--variant-custom-textBg)',
|
|
borderColor: 'var(--variant-custom-textBg)',
|
|
boxShadow: 'none',
|
|
},
|
|
}
|
|
}
|
|
},
|
|
MuiPaper: {
|
|
styleOverrides: {
|
|
root: {
|
|
'--TextField-brandBorderColor': '#E0E3E7',
|
|
backgroundColor: '#282c34',
|
|
color: 'var(--TextField-brandBorderColor)',
|
|
width: '90%',
|
|
maxWidth: '90%!important'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
export default customTheme; |