主题工厂

为应用创建全面的设计主题和配色系统。

主题架构

设计令牌

颜色令牌：

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',
  },
};

主题生成流程

1. 品牌分析

提取品牌元素：

• 主品牌色
• 辅助色
• 品牌个性
• 目标受众

颜色提取：

function extractPalette(brandColor) {
  return {
    primary: generateShades(brandColor),
    complementary: getComplementary(brandColor),
    analogous: getAnalogous(brandColor),
  };
}

2. 主题创建

浅色主题：

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',
};

3. 组件主题化

按钮变体：

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,
  },
};

CSS 变量实现

: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%;
}

最佳实践

• 使用一致的命名约定
• 以编程方式生成主题
• 支持系统偏好检测
• 确保可访问性（WCAG 对比度）
• 记录令牌的使用方式
• 提供主题切换能力
• 在不同组件间进行测试