Design
主题工厂
为应用创建设计主题和配色系统。适用于用户需要构建主题系统、调色板或设计令牌时。
为应用创建全面的设计主题和配色系统。
颜色令牌：
const colors = {
// Base colors
primary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
},
// Semantic colors
background: '#ffffff',
foreground: '#000000',
muted: '#f5f5f5',
accent: '#3b82f6',
destructive: '#ef4444',
};
间距令牌：
const spacing = {
0: '0px',
1: '4px',
2: '8px',
3: '12px',
4: '16px',
5: '20px',
6: '24px',
8: '32px',
10: '40px',
12: '48px',
16: '64px',
};
排版令牌：
const typography = {
fontFamily: {
sans: 'Inter, system-ui, sans-serif',
mono: 'JetBrains Mono, monospace',
},
fontSize: {
xs: '0.75rem',
sm: '0.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
},
};
提取品牌元素：
颜色提取：
function extractPalette(brandColor) {
return {
primary: generateShades(brandColor),
complementary: getComplementary(brandColor),
analogous: getAnalogous(brandColor),
};
}
浅色主题：
const lightTheme = {
background: '#ffffff',
foreground: '#000000',
card: '#ffffff',
muted: '#f5f5f5',
accent: colors.primary[500],
border: '#e5e5e5',
};
深色主题：
const darkTheme = {
background: '#0a0a0a',
foreground: '#fafafa',
card: '#1a1a1a',
muted: '#262626',
accent: colors.primary[400],
border: '#262626',
};
按钮变体：
const buttonThemes = {
primary: {
bg: colors.primary[500],
text: '#ffffff',
hover: colors.primary[600],
},
secondary: {
bg: colors.muted,
text: colors.foreground,
hover: colors.muted,
},
destructive: {
bg: colors.destructive,
text: '#ffffff',
hover: colors.destructive,
},
};
:root {
--background: 0 0% 100%;
--foreground: 0 0% 0%;
--primary: 221 83% 53%;
--primary-foreground: 0 0% 100%;
--muted: 0 0% 96%;
--border: 0 0% 90%;
}
[data-theme="dark"] {
--background: 0 0% 4%;
--foreground: 0 0% 98%;
--primary: 217 91% 60%;
--primary-foreground: 0 0% 100%;
--muted: 0 0% 15%;
--border: 0 0% 15%;
}