182 lines
4.9 KiB
TypeScript
182 lines
4.9 KiB
TypeScript
/**
|
|
* 深色模式颜色主题配置
|
|
* 仅包含颜色相关的样式类名
|
|
*/
|
|
|
|
export const themeColors = {
|
|
// 卡片颜色
|
|
card: {
|
|
border: 'border-slate-700/70',
|
|
bg: 'bg-slate-800',
|
|
shadow: 'shadow-black/50',
|
|
shadowHover: 'hover:shadow-indigo-500/30',
|
|
shadowLarge: 'shadow-black/60',
|
|
shadowLargeHover: 'hover:shadow-indigo-500/35',
|
|
shadowRainbow: 'shadow-purple-500/30',
|
|
shadowRainbowHover: 'hover:shadow-purple-500/40',
|
|
shadowGlass: 'shadow-black/50',
|
|
shadowGlassHover: 'hover:shadow-indigo-500/30',
|
|
shadowNeon: 'shadow-cyan-500/40',
|
|
shadowNeonHover: 'hover:shadow-cyan-500/60',
|
|
borderNeon: 'border-cyan-400/70',
|
|
bgRainbow: 'bg-gradient-to-br from-pink-900/20 via-purple-900/20 via-indigo-900/20 to-blue-900/20',
|
|
bgGlass: 'bg-white/5',
|
|
borderGlass: 'border-white/20',
|
|
},
|
|
|
|
// 按钮颜色
|
|
button: {
|
|
primary: {
|
|
bg: 'bg-indigo-500',
|
|
hover: 'hover:bg-indigo-600',
|
|
shadow: 'shadow-indigo-500/50',
|
|
shadowHover: 'hover:shadow-indigo-500/60',
|
|
},
|
|
secondary: {
|
|
border: 'border-slate-600',
|
|
bg: 'bg-slate-800',
|
|
text: 'text-slate-200',
|
|
hover: 'hover:bg-slate-700',
|
|
},
|
|
ghost: {
|
|
text: 'text-slate-200',
|
|
hover: 'hover:bg-slate-800',
|
|
},
|
|
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-500',
|
|
hover: 'hover:bg-emerald-600',
|
|
shadow: 'shadow-emerald-500/50',
|
|
shadowHover: 'hover:shadow-emerald-500/60',
|
|
},
|
|
glass: {
|
|
bg: 'bg-white/5',
|
|
hover: 'hover:bg-white/10',
|
|
border: 'border-white/20',
|
|
},
|
|
},
|
|
|
|
// 输入框颜色
|
|
input: {
|
|
border: 'border-slate-600',
|
|
bg: 'bg-slate-800',
|
|
text: 'text-white',
|
|
placeholder: 'placeholder:text-slate-400',
|
|
focusRing: 'focus:ring-indigo-800',
|
|
errorBorder: 'border-red-600',
|
|
errorBg: 'bg-slate-800',
|
|
errorText: 'text-white',
|
|
errorPlaceholder: 'placeholder:text-slate-400',
|
|
errorFocusRing: 'focus:ring-red-800',
|
|
},
|
|
|
|
// 导航项颜色
|
|
navItem: {
|
|
border: 'border-slate-700/70',
|
|
bg: 'bg-slate-800',
|
|
text: 'text-slate-200',
|
|
hoverBg: 'hover:bg-indigo-900/30',
|
|
hoverShadow: 'hover:shadow-indigo-500/30',
|
|
activeBg: 'bg-indigo-900/40',
|
|
activeText: 'text-indigo-200',
|
|
activeShadow: 'shadow-indigo-500/40',
|
|
rainbowBg: 'bg-gradient-to-r from-pink-900/20 via-purple-900/20 to-indigo-900/20',
|
|
rainbowShadow: 'hover:shadow-purple-500/30',
|
|
tabText: 'text-slate-400',
|
|
tabTextHover: 'hover:text-white',
|
|
tabTextActive: 'text-white',
|
|
},
|
|
|
|
// 徽章颜色
|
|
badge: {
|
|
primary: {
|
|
bg: 'bg-indigo-900/30',
|
|
text: 'text-indigo-300',
|
|
},
|
|
success: {
|
|
bg: 'bg-green-900/30',
|
|
text: 'text-green-300',
|
|
},
|
|
warning: {
|
|
bg: 'bg-yellow-900/30',
|
|
text: 'text-yellow-300',
|
|
},
|
|
danger: {
|
|
bg: 'bg-red-900/30',
|
|
text: 'text-red-300',
|
|
},
|
|
},
|
|
|
|
// 低饱和度炫彩元素（用于标签、强调色等）
|
|
accent: {
|
|
// 粉紫色系（低饱和度）
|
|
pink: {
|
|
bg: 'bg-pink-900/20',
|
|
text: 'text-pink-300',
|
|
border: 'border-pink-700/50',
|
|
hover: 'hover:bg-pink-900/30',
|
|
},
|
|
// 紫色系（低饱和度）
|
|
purple: {
|
|
bg: 'bg-purple-900/20',
|
|
text: 'text-purple-300',
|
|
border: 'border-purple-700/50',
|
|
hover: 'hover:bg-purple-900/30',
|
|
},
|
|
// 蓝色系（低饱和度）
|
|
blue: {
|
|
bg: 'bg-blue-900/20',
|
|
text: 'text-blue-300',
|
|
border: 'border-blue-700/50',
|
|
hover: 'hover:bg-blue-900/30',
|
|
},
|
|
// 青色系（低饱和度）
|
|
cyan: {
|
|
bg: 'bg-cyan-900/20',
|
|
text: 'text-cyan-300',
|
|
border: 'border-cyan-700/50',
|
|
hover: 'hover:bg-cyan-900/30',
|
|
},
|
|
// 绿色系（低饱和度）
|
|
emerald: {
|
|
bg: 'bg-emerald-900/20',
|
|
text: 'text-emerald-300',
|
|
border: 'border-emerald-700/50',
|
|
hover: 'hover:bg-emerald-900/30',
|
|
},
|
|
// 橙色系（低饱和度）
|
|
orange: {
|
|
bg: 'bg-orange-900/20',
|
|
text: 'text-orange-300',
|
|
border: 'border-orange-700/50',
|
|
hover: 'hover:bg-orange-900/30',
|
|
},
|
|
// 渐变炫彩（低饱和度）
|
|
rainbow: {
|
|
bg: 'bg-gradient-to-r from-pink-900/20 via-purple-900/20 via-indigo-900/20 to-blue-900/20',
|
|
text: 'text-slate-200',
|
|
border: 'border-purple-700/50',
|
|
hover: 'hover:from-pink-900/30 hover:via-purple-900/30 hover:via-indigo-900/30 hover:to-blue-900/30',
|
|
},
|
|
},
|
|
|
|
// Modal 颜色
|
|
modal: {
|
|
overlay: 'bg-black/70',
|
|
bg: 'bg-slate-800',
|
|
border: 'border-slate-700/70',
|
|
shadow: 'shadow-black/60',
|
|
headerBorder: 'border-slate-700/70',
|
|
title: 'text-white',
|
|
body: 'text-slate-200',
|
|
footerBorder: 'border-slate-700/70',
|
|
closeButton: 'text-slate-400 hover:text-slate-200 hover:bg-slate-700',
|
|
},
|
|
} as const
|
|
|