73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import type { ConfigProviderThemeVars } from "@wot-ui/ui";
|
|
|
|
export type ThemeKey = 'purple' | 'green' | 'blue' | 'amber'
|
|
|
|
interface ThemeMeta {
|
|
label: string;
|
|
vars: ConfigProviderThemeVars
|
|
}
|
|
|
|
const THEMES: Record<ThemeKey, ThemeMeta> = {
|
|
purple: {
|
|
label: '暮夜紫',
|
|
vars: {
|
|
primary1: '#f5f3ff', primary2: '#ede9fe', primary3: '#ddd6fe', primary4: '#c4b5fd',
|
|
primary5: '#8b5cf6', primary6: '#7c3aed', primary7: '#6d28d9',
|
|
primary8: '#5b21b6', primary9: '#4c1d95', primary10: '#3b1779'
|
|
}
|
|
},
|
|
green: {
|
|
label: '薄荷绿',
|
|
vars: {
|
|
primary1: '#ecfdf5', primary2: '#d1fae5', primary3: '#a7f3d0', primary4: '#6ee7b7',
|
|
primary5: '#34d399', primary6: '#059669', primary7: '#047857',
|
|
primary8: '#065f46', primary9: '#04472f', primary10: '#03301f'
|
|
}
|
|
},
|
|
blue: {
|
|
label: '极客蓝',
|
|
vars: {
|
|
primary1: '#eff6ff', primary2: '#dbeafe', primary3: '#bfdbfe', primary4: '#93c5fd',
|
|
primary5: '#60a5fa', primary6: '#2563eb', primary7: '#1d4ed8',
|
|
primary8: '#1e40af', primary9: '#1e3a8a', primary10: '#172554'
|
|
}
|
|
},
|
|
amber: {
|
|
label: '落日橙',
|
|
vars: {
|
|
primary1: '#fff7ed', primary2: '#ffedd5', primary3: '#fed7aa', primary4: '#fdba74',
|
|
primary5: '#fb923c', primary6: '#ea580c', primary7: '#c2410c',
|
|
primary8: '#9a3412', primary9: '#7c2d12', primary10: '#4a1d0b'
|
|
}
|
|
}
|
|
}
|
|
|
|
export const DEFAULT_THEME: ThemeKey = 'purple'
|
|
|
|
export function getTheme(key?: string | ThemeKey | null): ConfigProviderThemeVars {
|
|
const safeKey = (key ?? DEFAULT_THEME) as ThemeKey
|
|
return THEMES[safeKey].vars ?? THEMES[DEFAULT_THEME].vars
|
|
}
|
|
|
|
export const getThemeStyle: Record<ThemeKey, { backgroundImage: string }> = {
|
|
purple: {
|
|
backgroundImage: 'linear-gradient(180deg, #7c3aed 0%, #a78bfa 42%, #ede9fe 100%)'
|
|
},
|
|
green: {
|
|
backgroundImage: 'linear-gradient(180deg, #059669 0%, #34d399 42%, #d1fae5 100%)'
|
|
},
|
|
blue: {
|
|
backgroundImage: 'linear-gradient(180deg, #2563eb 0%, #60a5fa 42%, #dbeafe 100%)'
|
|
},
|
|
amber: {
|
|
backgroundImage: 'linear-gradient(180deg, #c2410c 0%, #fb923c 42%, #ffedd5 100%)'
|
|
}
|
|
}
|
|
|
|
export const getThemePrimaryColor: Record<ThemeKey, string> = {
|
|
purple: '#6d28d9',
|
|
green: '#047857',
|
|
blue: '#1d4ed8',
|
|
amber: '#b45309'
|
|
}
|