色彩优化

This commit is contained in:
‘Liammcl’
2024-12-26 22:10:19 +08:00
parent 6a86447029
commit bde0a8fd65
9 changed files with 129 additions and 188 deletions

View File

@@ -20,46 +20,119 @@ export const ThemeProvider = ({ children }) => {
return (
<ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
<ConfigProvider
componentSize="small"
theme={{
algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
token: {
colorPrimary: "#1677ff",
borderRadius: 4,
colorBgContainer: isDarkMode ? "#141414" : "#ffffff",
colorBgElevated: isDarkMode ? "#1f1f1f" : "#ffffff",
colorText: isDarkMode
? "rgba(255, 255, 255, 0.85)"
: "rgba(0, 0, 0, 0.85)",
colorTextSecondary: isDarkMode
? "rgba(255, 255, 255, 0.45)"
: "rgba(0, 0, 0, 0.45)",
// 主色调 - Google Blue
colorPrimary: '#1a73e8',
colorPrimaryHover: '#1557b0',
colorPrimaryActive: '#174ea6',
// 成功色 - Google Green
colorSuccess: '#1e8e3e',
colorSuccessHover: '#188130',
colorSuccessActive: '#137333',
// 警告色 - Google Yellow
colorWarning: '#f9ab00',
colorWarningHover: '#f29900',
colorWarningActive: '#ea8600',
// 错误色 - Google Red
colorError: '#d93025',
colorErrorHover: '#c5221f',
colorErrorActive: '#a50e0e',
// 文字颜色
colorText: isDarkMode ? 'rgba(255, 255, 255, 0.87)' : 'rgba(0, 0, 0, 0.87)',
colorTextSecondary: isDarkMode ? 'rgba(255, 255, 255, 0.60)' : 'rgba(0, 0, 0, 0.60)',
colorTextTertiary: isDarkMode ? 'rgba(255, 255, 255, 0.38)' : 'rgba(0, 0, 0, 0.38)',
// 背景色
colorBgContainer: isDarkMode ? '#1f1f1f' : '#ffffff',
colorBgElevated: isDarkMode ? '#2d2d2d' : '#ffffff',
colorBgLayout: isDarkMode ? '#121212' : '#f8f9fa',
// 边框
borderRadius: 8,
borderRadiusLG: 12,
borderRadiusSM: 4,
colorBorder: isDarkMode ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)',
// 阴影
boxShadow: '0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15)',
boxShadowSecondary: '0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15)',
// 字体
fontFamily: 'Google Sans, Roboto, Arial, sans-serif',
fontSize: 14,
// 控件尺寸
controlHeight: 36,
controlHeightSM: 32,
controlHeightLG: 44,
},
components: {
// 为所有支持 variant 的组件设置 filled 模式
Form: {
variant: 'filled',
Button: {
algorithm: true,
borderRadius: 20, // Google 风格的圆角按钮
controlHeight: 36,
controlHeightSM: 32,
controlHeightLG: 44,
paddingContentHorizontal: 24,
},
Input: {
variant: 'filled',
algorithm: true,
controlHeight: 36,
controlHeightSM: 32,
controlHeightLG: 44,
paddingContentHorizontal: 16,
borderRadius: 4,
controlOutline: 'none',
controlOutlineWidth: 0,
controlPaddingHorizontal: 16,
controlPaddingHorizontalSM: 12,
addonBg: 'transparent',
},
Select: {
variant: 'filled',
algorithm: true,
controlHeight: 36,
controlHeightSM: 32,
controlHeightLG: 44,
borderRadius: 4,
controlOutline: 'none',
controlOutlineWidth: 0,
selectorBg: 'transparent',
},
TreeSelect: {
variant: 'filled',
Card: {
algorithm: true,
borderRadiusLG: 8,
boxShadow: '0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15)',
},
DatePicker: {
variant: 'filled',
Menu: {
algorithm: true,
itemBorderRadius: 20, // Google 风格的圆角菜单项
itemHeight: 36,
itemHeightSM: 32,
},
TimePicker: {
variant: 'filled',
Tabs: {
algorithm: true,
inkBarColor: '#1a73e8',
itemSelectedColor: '#1a73e8',
itemHoverColor: '#174ea6',
},
Cascader: {
variant: 'filled',
},
AutoComplete: {
variant: 'filled',
Table: {
algorithm: true,
borderRadius: 8,
headerBg: isDarkMode ? '#2d2d2d' : '#f8f9fa',
},
Modal: {
algorithm: true,
borderRadius: 28, // Google 风格的大圆角对话框
paddingContentHorizontal: 24,
paddingContentVertical: 24,
}
}
}}
>