// ============================================================ // Ant Design 主题适配器 —— 蓝紫渐变主题(亮色 + 暗色) // 通过 ConfigProvider 的 theme 属性覆盖 Ant Design 默认主题变量, // 确保与 Tailwind 主题令牌(tokens.ts / globals.css)同步。 // ============================================================ import type { ThemeConfig } from 'antd'; import { theme } from 'antd'; import { colorPrimary, colorPrimaryLight, colorSuccess, colorWarning, colorError, colorInfo, colorTextBase, colorTextSecondary, colorBgBase, colorBgContainer, colorBgElevated, colorBgLayout, colorBorder, colorBorderSecondary, borderRadiusBase, borderRadiusLG, borderRadiusSM, borderRadiusXS, fontFamily, fontFamilyCode, fontSizeBase, fontSizeLG, fontSizeSM, fontSizeXL, boxShadowBase, boxShadowLG, gradientPrimary, // 暗色令牌 darkColorTextBase, darkColorTextSecondary, darkColorTextTertiary, darkColorBgBase, darkColorBgContainer, darkColorBgElevated, darkColorBgLayout, darkColorBorder, darkColorBorderSecondary, } from './tokens'; // ============================================================ // 共享的组件级覆盖(亮色 & 暗色通用) // ============================================================ const sharedComponents: ThemeConfig['components'] = { Button: { colorPrimary, colorPrimaryHover: colorPrimaryLight, colorPrimaryActive: '#4F46E5', primaryShadow: '0 2px 0 rgba(99, 102, 241, 0.15)', borderRadius: borderRadiusBase, defaultBorderColor: colorBorder, }, Menu: { itemSelectedBg: '#EEF2FF', itemSelectedColor: colorPrimary, itemHoverBg: '#F5F3FF', itemActiveBg: '#E0E7FF', }, Tabs: { itemSelectedColor: colorPrimary, itemHoverColor: colorPrimaryLight, inkBarColor: colorPrimary, }, Modal: { borderRadiusLG, }, Card: { borderRadiusLG, }, Tag: { defaultBg: '#EEF2FF', defaultColor: colorPrimary, }, Input: { activeBorderColor: colorPrimary, hoverBorderColor: colorPrimaryLight, }, Select: { activeBorderColor: colorPrimary, hoverBorderColor: colorPrimaryLight, }, DatePicker: { activeBorderColor: colorPrimary, hoverBorderColor: colorPrimaryLight, }, Switch: { colorPrimary, colorPrimaryHover: colorPrimaryLight, }, Slider: { colorPrimary, colorPrimaryBorder: colorPrimary, colorPrimaryBorderHover: colorPrimaryLight, }, Progress: { defaultColor: colorPrimary, }, Spin: { colorPrimary, }, Breadcrumb: { linkColor: colorPrimary, linkHoverColor: colorPrimaryLight, lastItemColor: colorTextBase, }, Pagination: { itemActiveBg: colorPrimary, colorPrimary, colorPrimaryHover: colorPrimaryLight, }, Notification: { borderRadiusLG, }, Tooltip: { borderRadius: borderRadiusSM, }, }; // ============================================================ // 共享的 token 基座(不变部分) // ============================================================ const sharedTokens = { // 品牌色 colorPrimary, colorPrimaryBg: '#EEF2FF', colorPrimaryBgHover: '#E0E7FF', colorPrimaryBorder: '#C7D2FE', colorPrimaryBorderHover: '#A5B4FC', colorPrimaryHover: colorPrimaryLight, colorPrimaryActive: '#4F46E5', colorPrimaryTextHover: colorPrimaryLight, colorPrimaryText: colorPrimary, colorPrimaryTextActive: '#4338CA', // 功能色 colorSuccess, colorWarning, colorError, colorInfo, // 圆角 borderRadius: borderRadiusBase, borderRadiusLG, borderRadiusSM, borderRadiusXS, // 字体 fontFamily, fontFamilyCode, fontSize: fontSizeBase, fontSizeLG, fontSizeSM, fontSizeXL, fontSizeHeading1: 28, fontSizeHeading2: 24, fontSizeHeading3: 20, fontSizeHeading4: 18, fontSizeHeading5: 16, // 间距 padding: 16, paddingLG: 24, paddingSM: 12, paddingXS: 8, paddingXXS: 4, // 链接 colorLink: colorPrimary, colorLinkHover: colorPrimaryLight, colorLinkActive: '#4F46E5', }; // ============================================================ // 🌞 亮色主题配置 // ============================================================ export const lightTheme: ThemeConfig = { algorithm: theme.defaultAlgorithm, token: { ...sharedTokens, // 文字色 — 亮色 colorText: colorTextBase, colorTextSecondary, colorTextTertiary: '#9CA3AF', // 背景色 — 亮色 colorBgBase, colorBgContainer, colorBgElevated, colorBgLayout, // 边框 — 亮色 colorBorder, colorBorderSecondary, // 阴影 boxShadow: boxShadowBase, boxShadowSecondary: boxShadowLG, }, components: { ...sharedComponents, Layout: { siderBg: `linear-gradient(180deg, #1E1B4B 0%, #312E81 100%)`, headerBg: colorBgBase, bodyBg: colorBgLayout, }, Table: { headerBg: '#EEF2FF', headerColor: colorTextBase, rowHoverBg: '#F5F3FF', borderColor: colorBorderSecondary, }, }, }; // ============================================================ // 🌙 暗色主题配置 // ============================================================ export const darkTheme: ThemeConfig = { algorithm: theme.darkAlgorithm, token: { ...sharedTokens, // 暗色模式下品牌色适当提亮以保证对比度 colorPrimary: colorPrimaryLight, colorPrimaryHover: '#A5B4FC', colorPrimaryActive: colorPrimary, colorPrimaryBg: '#1E1B4B', colorPrimaryBgHover: '#312E81', colorPrimaryBorder: '#4338CA', colorPrimaryBorderHover: colorPrimary, colorPrimaryTextHover: '#A5B4FC', colorPrimaryText: colorPrimaryLight, colorPrimaryTextActive: colorPrimary, // 链接 colorLink: colorPrimaryLight, colorLinkHover: '#A5B4FC', colorLinkActive: colorPrimary, // 文字色 — 暗色 colorText: darkColorTextBase, colorTextSecondary: darkColorTextSecondary, colorTextTertiary: darkColorTextTertiary, // 背景色 — 暗色 colorBgBase: darkColorBgBase, colorBgContainer: darkColorBgContainer, colorBgElevated: darkColorBgElevated, colorBgLayout: darkColorBgLayout, // 边框 — 暗色 colorBorder: darkColorBorder, colorBorderSecondary: darkColorBorderSecondary, // 阴影 — 暗色模式下用更深的投影 boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3)', boxShadowSecondary: '0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4)', }, components: { ...sharedComponents, Button: { ...sharedComponents?.Button, defaultBorderColor: darkColorBorder, }, Menu: { itemSelectedBg: '#312E81', itemSelectedColor: colorPrimaryLight, itemHoverBg: '#242040', itemActiveBg: '#1E1B4B', }, Layout: { siderBg: `linear-gradient(180deg, #0B0A15 0%, #1A1730 100%)`, headerBg: darkColorBgContainer, bodyBg: darkColorBgLayout, }, Table: { headerBg: '#1E1B4B', headerColor: darkColorTextBase, rowHoverBg: '#242040', borderColor: darkColorBorderSecondary, }, Tag: { defaultBg: '#1E1B4B', defaultColor: colorPrimaryLight, }, }, }; // ============================================================ // 辅助导出 // ============================================================ /** 根据 isDark 获取对应的主题配置 */ export function getThemeConfig(isDark: boolean): ThemeConfig { return isDark ? darkTheme : lightTheme; } export { gradientPrimary };