183 lines
4.4 KiB
TypeScript
183 lines
4.4 KiB
TypeScript
/**
|
|
* 深色模式颜色主题配置
|
|
* 仅包含颜色相关的样式类名
|
|
*/
|
|
|
|
export const themeColors = {
|
|
// 卡片颜色
|
|
card: {
|
|
border: 'border-slate-700',
|
|
bg: 'bg-slate-800',
|
|
shadow: 'shadow-none',
|
|
shadowHover: 'hover:border-slate-600',
|
|
shadowLarge: 'shadow-none',
|
|
shadowLargeHover: 'hover:border-slate-600',
|
|
shadowRainbow: 'shadow-none',
|
|
shadowRainbowHover: 'hover:border-slate-600',
|
|
shadowGlass: 'shadow-none',
|
|
shadowGlassHover: 'hover:border-slate-600',
|
|
shadowNeon: 'shadow-none',
|
|
shadowNeonHover: 'hover:border-slate-600',
|
|
borderNeon: 'border-slate-700',
|
|
bgRainbow: 'bg-slate-800',
|
|
bgGlass: 'bg-slate-800',
|
|
borderGlass: 'border-slate-700',
|
|
},
|
|
|
|
// 按钮颜色
|
|
button: {
|
|
primary: {
|
|
bg: 'bg-slate-100 text-slate-950',
|
|
hover: 'hover:bg-white',
|
|
shadow: 'shadow-none',
|
|
shadowHover: '',
|
|
},
|
|
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-none',
|
|
shadowHover: '',
|
|
},
|
|
success: {
|
|
bg: 'bg-emerald-500',
|
|
hover: 'hover:bg-emerald-600',
|
|
shadow: 'shadow-none',
|
|
shadowHover: '',
|
|
},
|
|
glass: {
|
|
bg: 'bg-slate-800',
|
|
hover: 'hover:bg-slate-700',
|
|
border: 'border-slate-600',
|
|
},
|
|
},
|
|
|
|
// 输入框颜色
|
|
input: {
|
|
border: 'border-slate-600',
|
|
bg: 'bg-slate-800',
|
|
text: 'text-white',
|
|
placeholder: 'placeholder:text-slate-400',
|
|
focusRing: 'focus:ring-slate-700',
|
|
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',
|
|
bg: 'bg-slate-800',
|
|
text: 'text-slate-200',
|
|
hoverBg: 'hover:bg-slate-700',
|
|
hoverShadow: 'hover:border-slate-600',
|
|
activeBg: 'bg-slate-700',
|
|
activeText: 'text-white',
|
|
activeShadow: 'border-slate-100',
|
|
rainbowBg: 'bg-slate-800',
|
|
rainbowShadow: 'hover:border-slate-600',
|
|
tabText: 'text-slate-400',
|
|
tabTextHover: 'hover:text-white',
|
|
tabTextActive: 'text-white',
|
|
},
|
|
|
|
// 徽章颜色
|
|
badge: {
|
|
primary: {
|
|
bg: 'bg-slate-800',
|
|
text: 'text-slate-200',
|
|
},
|
|
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-slate-800',
|
|
text: 'text-slate-200',
|
|
border: 'border-slate-700',
|
|
hover: 'hover:bg-slate-700',
|
|
},
|
|
purple: {
|
|
bg: 'bg-slate-800',
|
|
text: 'text-slate-200',
|
|
border: 'border-slate-700',
|
|
hover: 'hover:bg-slate-700',
|
|
},
|
|
blue: {
|
|
bg: 'bg-slate-800',
|
|
text: 'text-slate-200',
|
|
border: 'border-slate-700',
|
|
hover: 'hover:bg-slate-700',
|
|
},
|
|
cyan: {
|
|
bg: 'bg-slate-800',
|
|
text: 'text-slate-200',
|
|
border: 'border-slate-700',
|
|
hover: 'hover:bg-slate-700',
|
|
},
|
|
emerald: {
|
|
bg: 'bg-emerald-900/20',
|
|
text: 'text-emerald-300',
|
|
border: 'border-emerald-700/50',
|
|
hover: 'hover:bg-emerald-900/30',
|
|
},
|
|
orange: {
|
|
bg: 'bg-amber-900/20',
|
|
text: 'text-amber-300',
|
|
border: 'border-amber-700/50',
|
|
hover: 'hover:bg-amber-900/30',
|
|
},
|
|
rainbow: {
|
|
bg: 'bg-slate-800',
|
|
text: 'text-slate-200',
|
|
border: 'border-slate-700',
|
|
hover: 'hover:bg-slate-700',
|
|
},
|
|
},
|
|
|
|
// Modal 颜色
|
|
modal: {
|
|
overlay: 'bg-slate-950/70',
|
|
bg: 'bg-slate-900',
|
|
border: 'border-slate-800',
|
|
shadow: 'shadow-lg shadow-black/30',
|
|
headerBorder: 'border-slate-800',
|
|
title: 'text-white',
|
|
body: 'text-slate-200',
|
|
footerBorder: 'border-slate-800',
|
|
closeButton: 'text-slate-300 hover:text-white hover:bg-white/10',
|
|
},
|
|
|
|
// 开关切换器颜色
|
|
toggle: {
|
|
trackBg: 'bg-slate-700',
|
|
trackChecked: 'peer-checked:bg-slate-300',
|
|
thumbBg: 'after:bg-white',
|
|
thumbBorder: 'after:border-slate-600',
|
|
},
|
|
} as const
|
|
|