init
This commit is contained in:
226
src/theme/index.tsx
Normal file
226
src/theme/index.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
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}`,
|
||||
];
|
||||
};
|
||||
const primaryMain = amber[300]; // #ffc107
|
||||
const secondaryMain = amber[500]; // #ffa000
|
||||
export const themeOptions: ThemeOptions = {
|
||||
// @ts-ignore
|
||||
// cssVariables: true,
|
||||
palette: {
|
||||
primary: {
|
||||
main: primaryMain, // amber[300]
|
||||
},
|
||||
secondary: {
|
||||
main: secondaryMain, // amber[500]
|
||||
},
|
||||
divider: amber[200],
|
||||
common: {
|
||||
white: secondaryMain,
|
||||
},
|
||||
text: {
|
||||
primary: amber[600],
|
||||
secondary: amber[600],
|
||||
},
|
||||
background: {
|
||||
default: '#ffffff', // 设置默认背景颜色
|
||||
// paper: '#f5f5f5', // 设置纸张背景颜色
|
||||
},
|
||||
error: {
|
||||
main: red[500], // 设置错误颜色 "#f44336"
|
||||
},
|
||||
},
|
||||
shadows: generateShadows('rgba(255, 193, 7, 0.2)'),
|
||||
typography: {
|
||||
// fontFamily: 'Roboto, sans-serif',
|
||||
},
|
||||
components: {
|
||||
MuiButtonBase: {
|
||||
defaultProps: {
|
||||
disableRipple: true,
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'&:hover': {
|
||||
backgroundColor: amber[100],
|
||||
},
|
||||
'&.MuiButton-contained': {
|
||||
color: '#ffffff',
|
||||
':hover': {
|
||||
color: secondaryMain,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiButtonGroup: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'& .MuiButton-root': {
|
||||
borderColor: amber[600],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTextField: {
|
||||
defaultProps: {
|
||||
fullWidth: true,
|
||||
size: 'small',
|
||||
slotProps: {
|
||||
inputLabel: {
|
||||
shrink: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': {
|
||||
borderColor: amber[300],
|
||||
},
|
||||
'&:hover fieldset': {
|
||||
borderColor: amber[500],
|
||||
},
|
||||
'& .MuiInputBase-input': {
|
||||
color: amber[600],
|
||||
},
|
||||
},
|
||||
'& .MuiInputLabel-root': {
|
||||
color: amber[600],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiAutocomplete: {
|
||||
defaultProps: {
|
||||
size: 'small',
|
||||
},
|
||||
},
|
||||
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]}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiIconButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
color: '#ffffff', // Set default font color to white
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiFormControlLabel: {
|
||||
defaultProps: {
|
||||
labelPlacement: 'top',
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
color: amber[600],
|
||||
alignItems: 'flex-start',
|
||||
'& .MuiFormControlLabel-label': {
|
||||
textAlign: 'left',
|
||||
width: '100%',
|
||||
},
|
||||
'& .MuiFormControlLabel-root': {
|
||||
width: '100%',
|
||||
},
|
||||
'& .MuiInputBase-root': {
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiMenuItem: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'&.Mui-selected': {
|
||||
backgroundColor: amber[500],
|
||||
color: '#ffffff',
|
||||
'&:hover': {
|
||||
backgroundColor: amber[600],
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 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>;
|
||||
};
|
||||
|
||||
// TODO: think
|
||||
export const getComponentProps = () => {};
|
||||
76
src/theme/wind-theme.css
Normal file
76
src/theme/wind-theme.css
Normal file
@@ -0,0 +1,76 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@theme {
|
||||
--color-primary: #ffc107;
|
||||
--color-secondary: #ffa000;
|
||||
--color-success: #28a745;
|
||||
--color-scrollbar-thumb: #999999;
|
||||
--color-scrollbar-track: rgba(0, 0, 0, 0.1);
|
||||
--color-scrollbar-thumb-hover: #666666;
|
||||
--scrollbar-color: #ffc107; /* 滚动条颜色 */
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
/* font-family */
|
||||
@utility font-family-mon {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
@utility font-family-rob {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
@utility font-family-int {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
@utility font-family-orb {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
@utility font-family-din {
|
||||
font-family: 'DIN', sans-serif;
|
||||
}
|
||||
|
||||
@utility flex-row-center {
|
||||
@apply flex flex-row items-center justify-center;
|
||||
}
|
||||
@utility flex-col-center {
|
||||
@apply flex flex-col items-center justify-center;
|
||||
}
|
||||
|
||||
@utility scrollbar {
|
||||
overflow: auto;
|
||||
/* 整个滚动条 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--color-scrollbar-track);
|
||||
}
|
||||
/* 滚动条有滑块的轨道部分 */
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* 滚动条滑块(竖向:vertical 横向:horizontal) */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-scrollbar-thumb);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* 滚动条滑块hover */
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
/* 同时有垂直和水平滚动条时交汇的部分 */
|
||||
&::-webkit-scrollbar-corner {
|
||||
display: block; /* 修复交汇时出现的白块 */
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user