2025-03-15 23:54:53 +08:00

65 lines
1.4 KiB
TypeScript

import { createTheme, ThemeOptions } from '@mui/material/styles';
import { useTheme as useMuiTheme, Theme } from '@mui/material/styles';
import { amber } from '@mui/material/colors';
export const themeOptions: ThemeOptions = {
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', // 设置纸张背景颜色
},
},
typography: {
// fontFamily: 'Roboto, sans-serif',
},
components: {
MuiButtonBase: {
defaultProps: {
disableRipple: true,
},
},
MuiTextField: {
styleOverrides: {
root: {
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: amber[300],
},
'&:hover fieldset': {
borderColor: amber[500],
},
'& .MuiInputBase-input': {
color: amber[600],
},
},
'& .MuiInputLabel-root': {
color: amber[600],
},
},
},
},
},
};
/**
* https://bareynol.github.io/mui-theme-creator/
*/
export const theme = createTheme(themeOptions);
export const useTheme = () => {
return useMuiTheme<Theme>();
};