190 lines
5.1 KiB
TypeScript
190 lines
5.1 KiB
TypeScript
/**
|
|
* 浅色模式颜色主题配置
|
|
* 仅包含颜色相关的样式类名
|
|
*/
|
|
|
|
export const themeColors = {
|
|
// 卡片颜色
|
|
card: {
|
|
border: 'border-slate-200/70',
|
|
bg: 'bg-white',
|
|
shadow: 'shadow-slate-200/50',
|
|
shadowHover: 'hover:shadow-indigo-500/20',
|
|
shadowLarge: 'shadow-slate-200/60',
|
|
shadowLargeHover: 'hover:shadow-indigo-500/25',
|
|
shadowRainbow: 'shadow-purple-500/20',
|
|
shadowRainbowHover: 'hover:shadow-purple-500/30',
|
|
shadowGlass: 'shadow-slate-200/50',
|
|
shadowGlassHover: 'hover:shadow-indigo-500/20',
|
|
shadowNeon: 'shadow-cyan-500/30',
|
|
shadowNeonHover: 'hover:shadow-cyan-500/50',
|
|
borderNeon: 'border-cyan-400/50',
|
|
bgRainbow: 'bg-gradient-to-br from-pink-100 via-purple-100 via-indigo-100 to-blue-100',
|
|
bgGlass: 'bg-white/10',
|
|
borderGlass: 'border-white/20',
|
|
},
|
|
|
|
// 按钮颜色
|
|
button: {
|
|
primary: {
|
|
bg: 'bg-indigo-600',
|
|
hover: 'hover:bg-indigo-700',
|
|
shadow: 'shadow-indigo-500/40',
|
|
shadowHover: 'hover:shadow-indigo-500/50',
|
|
},
|
|
secondary: {
|
|
border: 'border-slate-300',
|
|
bg: 'bg-white',
|
|
text: 'text-slate-900', // 使用更深的文字颜色，确保在浅色模式下清晰可见
|
|
hover: 'hover:bg-slate-50',
|
|
},
|
|
ghost: {
|
|
text: 'text-slate-700',
|
|
hover: 'hover:bg-slate-100',
|
|
},
|
|
danger: {
|
|
bg: 'bg-red-500', // 使用适中的红色，确保可见性
|
|
hover: 'hover:bg-red-600',
|
|
shadow: 'shadow-red-500/50',
|
|
shadowHover: 'hover:shadow-red-500/60',
|
|
},
|
|
success: {
|
|
bg: 'bg-emerald-600',
|
|
hover: 'hover:bg-emerald-700',
|
|
shadow: 'shadow-emerald-500/40',
|
|
shadowHover: 'hover:shadow-emerald-500/50',
|
|
},
|
|
glass: {
|
|
bg: 'bg-white/10',
|
|
hover: 'hover:bg-white/20',
|
|
border: 'border-white/20',
|
|
},
|
|
},
|
|
|
|
// 输入框颜色
|
|
input: {
|
|
border: 'border-slate-300',
|
|
bg: 'bg-white',
|
|
text: 'text-slate-900',
|
|
placeholder: 'placeholder:text-slate-400',
|
|
focusRing: 'focus:ring-indigo-200',
|
|
errorBorder: 'border-red-500',
|
|
errorBg: 'bg-white',
|
|
errorText: 'text-slate-900',
|
|
errorPlaceholder: 'placeholder:text-slate-400',
|
|
errorFocusRing: 'focus:ring-red-200',
|
|
},
|
|
|
|
// 导航项颜色
|
|
navItem: {
|
|
border: 'border-slate-200/70',
|
|
bg: 'bg-white',
|
|
text: 'text-slate-700',
|
|
hoverBg: 'hover:bg-indigo-50',
|
|
hoverShadow: 'hover:shadow-indigo-500/20',
|
|
activeBg: 'bg-indigo-50',
|
|
activeText: 'text-indigo-700',
|
|
activeShadow: 'shadow-indigo-500/30',
|
|
rainbowBg: 'bg-gradient-to-r from-pink-50/50 via-purple-50/50 to-indigo-50/50',
|
|
rainbowShadow: 'hover:shadow-purple-500/20',
|
|
tabText: 'text-slate-600',
|
|
tabTextHover: 'hover:text-slate-900',
|
|
tabTextActive: 'text-slate-900',
|
|
},
|
|
|
|
// 徽章颜色
|
|
badge: {
|
|
primary: {
|
|
bg: 'bg-indigo-100',
|
|
text: 'text-indigo-700',
|
|
},
|
|
success: {
|
|
bg: 'bg-green-100',
|
|
text: 'text-green-700',
|
|
},
|
|
warning: {
|
|
bg: 'bg-yellow-100',
|
|
text: 'text-yellow-700',
|
|
},
|
|
danger: {
|
|
bg: 'bg-red-100',
|
|
text: 'text-red-700',
|
|
},
|
|
},
|
|
|
|
// 低饱和度炫彩元素（用于标签、强调色等）
|
|
accent: {
|
|
// 粉紫色系（低饱和度）
|
|
pink: {
|
|
bg: 'bg-pink-50',
|
|
text: 'text-pink-700',
|
|
border: 'border-pink-200',
|
|
hover: 'hover:bg-pink-100',
|
|
},
|
|
// 紫色系（低饱和度）
|
|
purple: {
|
|
bg: 'bg-purple-50',
|
|
text: 'text-purple-700',
|
|
border: 'border-purple-200',
|
|
hover: 'hover:bg-purple-100',
|
|
},
|
|
// 蓝色系（低饱和度）
|
|
blue: {
|
|
bg: 'bg-blue-50',
|
|
text: 'text-blue-700',
|
|
border: 'border-blue-200',
|
|
hover: 'hover:bg-blue-100',
|
|
},
|
|
// 青色系（低饱和度）
|
|
cyan: {
|
|
bg: 'bg-cyan-50',
|
|
text: 'text-cyan-700',
|
|
border: 'border-cyan-200',
|
|
hover: 'hover:bg-cyan-100',
|
|
},
|
|
// 绿色系（低饱和度）
|
|
emerald: {
|
|
bg: 'bg-emerald-50',
|
|
text: 'text-emerald-700',
|
|
border: 'border-emerald-200',
|
|
hover: 'hover:bg-emerald-100',
|
|
},
|
|
// 橙色系（低饱和度）
|
|
orange: {
|
|
bg: 'bg-orange-50',
|
|
text: 'text-orange-700',
|
|
border: 'border-orange-200',
|
|
hover: 'hover:bg-orange-100',
|
|
},
|
|
// 渐变炫彩（低饱和度）
|
|
rainbow: {
|
|
bg: 'bg-gradient-to-r from-pink-50 via-purple-50 via-indigo-50 to-blue-50',
|
|
text: 'text-slate-700',
|
|
border: 'border-purple-200',
|
|
hover: 'hover:from-pink-100 hover:via-purple-100 hover:via-indigo-100 hover:to-blue-100',
|
|
},
|
|
},
|
|
|
|
// Modal 颜色
|
|
modal: {
|
|
overlay: 'bg-slate-900/35 backdrop-blur-xl',
|
|
bg: 'bg-white/80',
|
|
border: 'border-white/30',
|
|
shadow: 'shadow-[0_35px_110px_rgba(15,23,42,0.25)] shadow-slate-900/20',
|
|
headerBorder: 'border-white/30',
|
|
title: 'text-slate-900',
|
|
body: 'text-slate-600',
|
|
footerBorder: 'border-white/30',
|
|
closeButton: 'text-slate-500 hover:text-slate-700 hover:bg-white/40',
|
|
},
|
|
|
|
// 开关切换器颜色
|
|
toggle: {
|
|
trackBg: 'bg-slate-200',
|
|
trackChecked: 'peer-checked:bg-indigo-600',
|
|
thumbBg: 'after:bg-white',
|
|
thumbBorder: 'after:border-slate-300',
|
|
},
|
|
} as const
|
|
|