160 lines
3.8 KiB
TypeScript
160 lines
3.8 KiB
TypeScript
import { createTheme, Shadows, ThemeOptions } from '@mui/material/styles';
|
|
import { useTheme as useMuiTheme, Theme } from '@mui/material/styles';
|
|
import { amber, red } from '@mui/material/colors';
|
|
import { ThemeProvider } from '@mui/material/styles';
|
|
const generateShadows = (color: string): Shadows => {
|
|
return [
|
|
'none',
|
|
`0px 2px 1px -1px ${color}`,
|
|
`0px 1px 1px 0px ${color}`,
|
|
`0px 1px 3px 0px ${color}`,
|
|
`0px 2px 4px -1px ${color}`,
|
|
|
|
`0px 3px 5px -1px ${color}`,
|
|
`0px 3px 5px -1px ${color}`,
|
|
`0px 4px 5px -2px ${color}`,
|
|
`0px 5px 5px -3px ${color}`,
|
|
`0px 5px 6px -3px ${color}`,
|
|
|
|
`0px 6px 6px -3px ${color}`,
|
|
`0px 6px 7px -4px ${color}`,
|
|
`0px 7px 8px -4px ${color}`,
|
|
`0px 7px 8px -4px ${color}`,
|
|
`0px 8px 9px -5px ${color}`,
|
|
|
|
`0px 8px 9px -5px ${color}`,
|
|
`0px 9px 10px -5px ${color}`,
|
|
`0px 9px 11px -6px ${color}`,
|
|
`0px 10px 12px -6px ${color}`,
|
|
`0px 10px 13px -6px ${color}`,
|
|
|
|
`0px 11px 13px -7px ${color}`,
|
|
`0px 11px 14px -7px ${color}`,
|
|
`0px 12px 15px -7px ${color}`,
|
|
`0px 12px 16px -8px ${color}`,
|
|
`0px 13px 17px -8px ${color}`,
|
|
];
|
|
};
|
|
export const themeOptions: ThemeOptions = {
|
|
// @ts-ignore
|
|
// cssVariables: true,
|
|
palette: {
|
|
primary: {
|
|
main: '#ffc107', // amber[300]
|
|
},
|
|
secondary: {
|
|
main: '#ffa000', // amber[500]
|
|
},
|
|
divider: amber[200],
|
|
common: {
|
|
white: '#ffa000',
|
|
},
|
|
text: {
|
|
primary: amber[600],
|
|
secondary: amber[600],
|
|
},
|
|
background: {
|
|
default: '#ffffff', // 设置默认背景颜色
|
|
// paper: '#f5f5f5', // 设置纸张背景颜色
|
|
},
|
|
error: {
|
|
main: red[500],
|
|
},
|
|
},
|
|
shadows: generateShadows('rgba(255, 193, 7, 0.2)'),
|
|
typography: {
|
|
// fontFamily: 'Roboto, sans-serif',
|
|
},
|
|
components: {
|
|
MuiButtonBase: {
|
|
defaultProps: {
|
|
disableRipple: true,
|
|
},
|
|
styleOverrides: {
|
|
root: {
|
|
'&:hover': {
|
|
backgroundColor: amber[100],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiButtonGroup: {
|
|
styleOverrides: {
|
|
root: {
|
|
'& .MuiButton-root': {
|
|
borderColor: amber[600],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiTextField: {
|
|
styleOverrides: {
|
|
root: {
|
|
'& .MuiOutlinedInput-root': {
|
|
'& fieldset': {
|
|
borderColor: amber[300],
|
|
},
|
|
'&:hover fieldset': {
|
|
borderColor: amber[500],
|
|
},
|
|
'& .MuiInputBase-input': {
|
|
color: amber[600],
|
|
},
|
|
},
|
|
'& .MuiInputLabel-root': {
|
|
color: amber[600],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiSelect: {
|
|
styleOverrides: {
|
|
root: {
|
|
'& .MuiOutlinedInput-notchedOutline': {
|
|
borderColor: amber[300],
|
|
},
|
|
'&:hover .MuiOutlinedInput-notchedOutline': {
|
|
borderColor: amber[500],
|
|
},
|
|
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
|
borderColor: amber[500],
|
|
},
|
|
'& .MuiSelect-icon': {
|
|
color: amber[500], // Set arrow icon color to primary
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiCard: {
|
|
styleOverrides: {
|
|
root: {
|
|
// border: `1px solid ${amber[300]}`,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
* https://bareynol.github.io/mui-theme-creator/
|
|
*/
|
|
export const theme = createTheme(themeOptions);
|
|
|
|
/**
|
|
*
|
|
* @returns
|
|
*/
|
|
export const useTheme = () => {
|
|
return useMuiTheme<Theme>();
|
|
};
|
|
|
|
/**
|
|
* 自定义主题设置。
|
|
* @param param0
|
|
* @returns
|
|
*/
|
|
export const CustomThemeProvider = ({ children, themeOptions: customThemeOptions }: { children: React.ReactNode; themeOptions?: ThemeOptions }) => {
|
|
const theme = createTheme(customThemeOptions || themeOptions);
|
|
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
|
|
};
|