前端主题切换方案(React+Antd) 万字详解

本文详细介绍了基于React和Ant Design的主题切换系统实现方案。系统采用分层架构设计，包含配置层、服务层、组件层和工具层，支持亮色/暗色主题动态切换、自定义主色调、系统主题自动适配等功能。关键技术包括：CSS-in-JS样式方案、全局状态管理、类型安全定义、设计令牌生成算法等。文章还提供了完整的项目结构设计、核心代码实现、性能优化策略（样式缓存、防抖处理、过渡动画）以及测试方案。系统具有

油墨香^_^

1820人浏览 · 2022-08-10 09:49:18

油墨香^_^ · 2022-08-10 09:49:18 发布

1. 主题切换的核心概念与价值

1.1 什么是主题切换

主题切换是指应用程序能够在不同视觉样式之间动态切换的能力，主要包括：

色彩系统：主色调、辅助色、中性色等
字体系统：字族、字号、字重、行高等
间距系统：边距、内边距、组件间距等
圆角系统：边框圆角大小
阴影系统：投影效果
动效系统：过渡动画、微交互等

1.2 主题切换的业务价值

用户体验提升
- 满足用户个性化需求
- 适应不同使用环境（光线条件）
- 减少视觉疲劳
品牌一致性
- 快速适配品牌色彩
- 多产品线统一视觉语言
可维护性
- 集中管理样式变量
- 降低样式代码冗余

2. 技术选型与架构设计

2.1 技术栈分析

bash

# 核心依赖
react: ^18.0.0
antd: ^5.0.0
@ant-design/cssinjs: ^1.0.0

# 状态管理
zustand 或 @reduxjs/toolkit

# 工具库
lodash-es
color

2.2 架构设计原则

分层架构
- 配置层：主题变量定义
- 服务层：主题管理逻辑
- 组件层：主题消费组件
- 工具层：辅助函数
单一数据源
- 全局主题状态管理
- 状态持久化机制
类型安全
- TypeScript 全面支持
- 完整的类型定义

3. Antd 5.x 主题机制深度解析

3.1 CSS-in-JS 原理

Antd 5.x 使用 @ant-design/cssinjs 作为样式解决方案：

typescript

// CSS-in-JS 核心流程
1. Token 解析 → 2. 样式生成 → 3. Style 注入 → 4. 缓存优化

3.2 ConfigProvider 工作机制

typescript

import { ConfigProvider, theme } from 'antd';

const { darkAlgorithm, defaultAlgorithm } = theme;

// 主题配置核心属性
const themeConfig = {
  algorithm: darkAlgorithm,        // 主题算法
  token: {                         // 设计令牌
    colorPrimary: '#1890ff',
    borderRadius: 6,
  },
  components: {                    // 组件级定制
    Button: {
      colorPrimary: '#1890ff',
    },
  },
};

3.3 主题算法详解

typescript

// 内置算法
const algorithms = {
  defaultAlgorithm,   // 默认亮色主题
  darkAlgorithm,      // 暗色主题
  compactAlgorithm,   // 紧凑主题
};

// 自定义算法
const customAlgorithm = (seedToken, mapToken) => {
  return {
    ...mapToken,
    colorBgLayout: '#f5f5f5',
    colorPrimary: '#00b96b',
  };
};

4. 完整主题系统实现方案

4.1 项目结构设计

text

src/
├── styles/
│   ├── theme/
│   │   ├── index.ts           # 主题入口
│   │   ├── types.ts           # 类型定义
│   │   ├── constants.ts       # 主题常量
│   │   ├── generators/        # 主题生成器
│   │   │   ├── base.ts
│   │   │   ├── light.ts
│   │   │   └── dark.ts
│   │   └── utils/             # 主题工具
│   │       ├── color.ts
│   │       └── storage.ts
├── stores/
│   └── theme.ts               # 主题状态管理
└── components/
    └── ThemeToggle/           # 主题切换组件
        ├── index.tsx
        └── ThemeColorPicker.tsx

4.2 类型定义

typescript

// styles/theme/types.ts
export type ThemeMode = 'light' | 'dark' | 'auto';

export interface ThemeConfig {
  mode: ThemeMode;
  algorithm: ThemeAlgorithm;
  token: Partial<GlobalToken>;
  components?: Record<string, any>;
}

export interface ThemeState {
  config: ThemeConfig;
  isDark: boolean;
  isAuto: boolean;
}

export interface ThemeContextValue extends ThemeState {
  setTheme: (config: Partial<ThemeConfig>) => void;
  toggleTheme: () => void;
  resetTheme: () => void;
}

export interface ThemeProviderProps {
  children: React.ReactNode;
  defaultTheme?: ThemeConfig;
}

4.3 主题常量定义

typescript

// styles/theme/constants.ts
import { ThemeConfig } from './types';

export const DEFAULT_THEME: ThemeConfig = {
  mode: 'light',
  algorithm: defaultAlgorithm,
  token: {
    colorPrimary: '#1677FF',
    borderRadius: 6,
    wireframe: false,
  },
  components: {
    Layout: {
      colorBgHeader: '#001529',
    },
  },
};

export const THEME_MODES = {
  light: {
    name: '浅色模式',
    icon: '☀️',
  },
  dark: {
    name: '深色模式',
    icon: '🌙',
  },
  auto: {
    name: '自动模式',
    icon: '⚙️',
  },
} as const;

// 预设色板
export const PRESET_COLORS = {
  blue: '#1677FF',
  purple: '#722ED1',
  cyan: '#13C2C2',
  green: '#52C41A',
  magenta: '#EB2F96',
  pink: '#EB2F96',
  red: '#F5222D',
  orange: '#FA8C16',
  yellow: '#FADB14',
  volcano: '#FA541C',
  geekblue: '#2F54EB',
  gold: '#FAAD14',
  lime: '#A0D911',
} as const;

4.4 主题生成器

typescript

// styles/theme/generators/base.ts
import { ThemeConfig } from '../types';
import { generate } from '@ant-design/colors';

export const generateBaseTheme = (primaryColor: string): Partial<ThemeConfig> => {
  const colors = generate(primaryColor);
  
  return {
    token: {
      colorPrimary: primaryColor,
      colorSuccess: '#52c41a',
      colorWarning: '#faad14',
      colorError: '#ff4d4f',
      colorInfo: primaryColor,
      colorLink: primaryColor,
      colorTextBase: '#000000',
      colorBgBase: '#ffffff',
      fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial`,
      fontSize: 14,
      borderRadius: 6,
      wireframe: false,
    },
    components: {
      Button: {
        colorPrimary: primaryColor,
        algorithm: true,
      },
      Input: {
        colorPrimary: primaryColor,
        algorithm: true,
      },
    },
  };
};

// styles/theme/generators/light.ts
export const generateLightTheme = (primaryColor: string): ThemeConfig => {
  const baseTheme = generateBaseTheme(primaryColor);
  
  return {
    mode: 'light',
    algorithm: defaultAlgorithm,
    ...baseTheme,
    token: {
      ...baseTheme.token,
      colorBgContainer: '#ffffff',
      colorBgElevated: '#ffffff',
      colorBgLayout: '#f5f5f5',
      colorBorder: '#d9d9d9',
      colorText: 'rgba(0, 0, 0, 0.88)',
      colorTextSecondary: 'rgba(0, 0, 0, 0.65)',
      colorTextTertiary: 'rgba(0, 0, 0, 0.45)',
      colorTextQuaternary: 'rgba(0, 0, 0, 0.25)',
    },
  };
};

// styles/theme/generators/dark.ts
export const generateDarkTheme = (primaryColor: string): ThemeConfig => {
  const baseTheme = generateBaseTheme(primaryColor);
  
  return {
    mode: 'dark',
    algorithm: darkAlgorithm,
    ...baseTheme,
    token: {
      ...baseTheme.token,
      colorBgContainer: '#141414',
      colorBgElevated: '#1f1f1f',
      colorBgLayout: '#000000',
      colorBorder: '#424242',
      colorText: 'rgba(255, 255, 255, 0.85)',
      colorTextSecondary: 'rgba(255, 255, 255, 0.65)',
      colorTextTertiary: 'rgba(255, 255, 255, 0.45)',
      colorTextQuaternary: 'rgba(255, 255, 255, 0.25)',
    },
  };
};

4.5 主题工具函数

typescript

// styles/theme/utils/color.ts
import { generate } from '@ant-design/colors';

export class ColorUtils {
  /**
   * 检查颜色是否偏暗
   */
  static isDarkColor(color: string): boolean {
    const hex = color.replace('#', '');
    const r = parseInt(hex.substr(0, 2), 16);
    const g = parseInt(hex.substr(2, 2), 16);
    const b = parseInt(hex.substr(4, 2), 16);
    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
    return brightness < 128;
  }

  /**
   * 生成色板
   */
  static generatePalette(color: string, dark = false) {
    return generate(color, {
      theme: dark ? 'dark' : 'default',
    });
  }

  /**
   * 颜色混合
   */
  static mix(color1: string, color2: string, weight: number): string {
    // 实现颜色混合算法
    // 简化实现，实际项目可使用 color 库
    return color1; // 实际实现需要完整的颜色混合逻辑
  }

  /**
   * 调整颜色亮度
   */
  static lighten(color: string, amount: number): string {
    // 实现颜色变亮逻辑
    return color;
  }

  static darken(color: string, amount: number): string {
    // 实现颜色变暗逻辑
    return color;
  }
}

// styles/theme/utils/storage.ts
const THEME_STORAGE_KEY = 'app_theme_config';

export const ThemeStorage = {
  get(): ThemeConfig | null {
    try {
      const stored = localStorage.getItem(THEME_STORAGE_KEY);
      return stored ? JSON.parse(stored) : null;
    } catch {
      return null;
    }
  },

  set(config: ThemeConfig): void {
    try {
      localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(config));
    } catch (error) {
      console.warn('Failed to save theme configuration:', error);
    }
  },

  clear(): void {
    try {
      localStorage.removeItem(THEME_STORAGE_KEY);
    } catch (error) {
      console.warn('Failed to clear theme configuration:', error);
    }
  },
};

4.6 主题状态管理

typescript

// stores/theme.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { ThemeConfig, ThemeState } from '../styles/theme/types';
import { DEFAULT_THEME } from '../styles/theme/constants';
import { generateLightTheme, generateDarkTheme } from '../styles/theme/generators';

interface ThemeStore extends ThemeState {
  setTheme: (config: Partial<ThemeConfig>) => void;
  toggleTheme: () => void;
  resetTheme: () => void;
  setPrimaryColor: (color: string) => void;
}

export const useThemeStore = create<ThemeStore>()(
  persist(
    (set, get) => ({
      config: DEFAULT_THEME,
      isDark: false,
      isAuto: false,

      setTheme: (newConfig) => {
        const currentConfig = get().config;
        const mergedConfig = { ...currentConfig, ...newConfig };
        
        set({
          config: mergedConfig,
          isDark: mergedConfig.mode === 'dark',
          isAuto: mergedConfig.mode === 'auto',
        });

        // 自动模式处理
        if (mergedConfig.mode === 'auto') {
          ThemeStorage.set(mergedConfig);
        }
      },

      toggleTheme: () => {
        const { config, isDark } = get();
        const newMode = isDark ? 'light' : 'dark';
        const newTheme = newMode === 'light' 
          ? generateLightTheme(config.token.colorPrimary as string)
          : generateDarkTheme(config.token.colorPrimary as string);

        set({
          config: newTheme,
          isDark: !isDark,
          isAuto: false,
        });
      },

      resetTheme: () => {
        set({
          config: DEFAULT_THEME,
          isDark: false,
          isAuto: false,
        });
      },

      setPrimaryColor: (color: string) => {
        const { config, isDark } = get();
        const generator = isDark ? generateDarkTheme : generateLightTheme;
        const newTheme = generator(color);

        set({
          config: newTheme,
        });
      },
    }),
    {
      name: 'theme-storage',
      partialize: (state) => ({ config: state.config }),
    }
  )
);

4.7 主题 Provider 组件

typescript

// styles/theme/ThemeProvider.tsx
import React, { useEffect } from 'react';
import { ConfigProvider, theme } from 'antd';
import { useThemeStore } from '../../stores/theme';
import { ThemeContext } from './ThemeContext';

const { darkAlgorithm, defaultAlgorithm, compactAlgorithm } = theme;

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ 
  children 
}) => {
  const { config, isDark, isAuto, setTheme } = useThemeStore();

  // 监听系统主题变化
  useEffect(() => {
    if (!isAuto) return;

    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    
    const handleChange = (e: MediaQueryListEvent) => {
      const newMode = e.matches ? 'dark' : 'light';
      setTheme({ mode: 'auto' }); // 触发主题重新计算
    };

    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, [isAuto, setTheme]);

  // 获取当前算法
  const getAlgorithm = () => {
    if (isAuto) {
      const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      return systemDark ? [darkAlgorithm] : [defaultAlgorithm];
    }
    return isDark ? [darkAlgorithm] : [defaultAlgorithm];
  };

  const contextValue = {
    config,
    isDark,
    isAuto,
    setTheme: useThemeStore.getState().setTheme,
    toggleTheme: useThemeStore.getState().toggleTheme,
    resetTheme: useThemeStore.getState().resetTheme,
  };

  return (
    <ThemeContext.Provider value={contextValue}>
      <ConfigProvider
        theme={{
          algorithm: getAlgorithm(),
          token: config.token,
          components: config.components,
        }}
      >
        {children}
      </ConfigProvider>
    </ThemeContext.Provider>
  );
};

4.8 主题切换组件

typescript

// components/ThemeToggle/ThemeColorPicker.tsx
import React from 'react';
import { ColorPicker, Space, Tooltip } from 'antd';
import { PRESET_COLORS } from '../../styles/theme/constants';
import { useThemeStore } from '../../stores/theme';

export const ThemeColorPicker: React.FC = () => {
  const { setPrimaryColor, config } = useThemeStore();

  const handleColorChange = (color: { hex: string }) => {
    setPrimaryColor(color.hex);
  };

  return (
    <div className="theme-color-picker">
      <h4>主题色</h4>
      <Space wrap size="small">
        {Object.entries(PRESET_COLORS).map(([name, color]) => (
          <Tooltip key={name} title={name}>
            <div
              className="color-swatch"
              style={{
                backgroundColor: color,
                width: 20,
                height: 20,
                borderRadius: 4,
                cursor: 'pointer',
                border: config.token.colorPrimary === color ? '2px solid #1890ff' : '1px solid #d9d9d9',
              }}
              onClick={() => setPrimaryColor(color)}
            />
          </Tooltip>
        ))}
      </Space>
      <div style={{ marginTop: 16 }}>
        <ColorPicker
          value={config.token.colorPrimary as string}
          onChange={handleColorChange}
          presets={[
            {
              label: '预设颜色',
              colors: Object.values(PRESET_COLORS),
            },
          ]}
        />
      </div>
    </div>
  );
};

// components/ThemeToggle/index.tsx
import React from 'react';
import { Segmented, Space, Switch, Button, Divider, Popover } from 'antd';
import { 
  BulbOutlined, 
  BulbFilled, 
  SettingOutlined, 
  ReloadOutlined 
} from '@ant-design/icons';
import { useThemeStore } from '../../stores/theme';
import { THEME_MODES } from '../../styles/theme/constants';
import { ThemeColorPicker } from './ThemeColorPicker';

export const ThemeToggle: React.FC = () => {
  const { config, isDark, isAuto, toggleTheme, setTheme, resetTheme } = useThemeStore();

  const handleModeChange = (value: string) => {
    setTheme({ mode: value as any });
  };

  const handleAutoChange = (checked: boolean) => {
    setTheme({ mode: checked ? 'auto' : 'light' });
  };

  const themeSettingsContent = (
    <div style={{ width: 280 }}>
      <Space direction="vertical" style={{ width: '100%' }} size="middle">
        <div>
          <div style={{ marginBottom: 8, fontWeight: 500 }}>主题模式</div>
          <Segmented
            block
            value={config.mode}
            onChange={handleModeChange}
            options={Object.entries(THEME_MODES).map(([key, { name, icon }]) => ({
              label: (
                <div style={{ padding: 4 }}>
                  <div>{icon}</div>
                  <div>{name}</div>
                </div>
              ),
              value: key,
            }))}
          />
        </div>

        <Divider style={{ margin: '12px 0' }} />

        <ThemeColorPicker />

        <Divider style={{ margin: '12px 0' }} />

        <Button 
          block 
          icon={<ReloadOutlined />} 
          onClick={resetTheme}
        >
          重置主题
        </Button>
      </Space>
    </div>
  );

  return (
    <Space>
      <Switch
        checked={isDark}
        onChange={toggleTheme}
        checkedChildren={<BulbFilled />}
        unCheckedChildren={<BulbOutlined />}
      />
      
      <Popover
        title="主题设置"
        content={themeSettingsContent}
        trigger="click"
        placement="bottomRight"
      >
        <Button icon={<SettingOutlined />} />
      </Popover>
    </Space>
  );
};

5. 高级主题功能实现

5.1 动态 CSS 变量

typescript

// styles/theme/utils/css-vars.ts
export class CssVarsManager {
  private static instance: CssVarsManager;
  private rootElement: HTMLElement;

  private constructor() {
    this.rootElement = document.documentElement;
  }

  static getInstance(): CssVarsManager {
    if (!CssVarsManager.instance) {
      CssVarsManager.instance = new CssVarsManager();
    }
    return CssVarsManager.instance;
  }

  setVariables(variables: Record<string, string>): void {
    Object.entries(variables).forEach(([key, value]) => {
      this.rootElement.style.setProperty(`--${key}`, value);
    });
  }

  getVariable(name: string): string {
    return getComputedStyle(this.rootElement).getPropertyValue(`--${name}`);
  }

  removeVariable(name: string): void {
    this.rootElement.style.removeProperty(`--${name}`);
  }

  // 生成 CSS 变量映射
  generateCssVars(themeConfig: ThemeConfig): Record<string, string> {
    const { token } = themeConfig;
    const vars: Record<string, string> = {};

    Object.entries(token).forEach(([key, value]) => {
      if (value !== undefined) {
        const varName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
        vars[`ant-${varName}`] = String(value);
      }
    });

    return vars;
  }
}

5.2 主题监听器

typescript

// styles/theme/ThemeListener.tsx
import React, { useEffect } from 'react';
import { useThemeStore } from '../../stores/theme';
import { CssVarsManager } from './utils/css-vars';

export const ThemeListener: React.FC = () => {
  const { config } = useThemeStore();

  useEffect(() => {
    // 更新 CSS 变量
    const cssVarsManager = CssVarsManager.getInstance();
    const cssVars = cssVarsManager.generateCssVars(config);
    cssVarsManager.setVariables(cssVars);

    // 更新 HTML 属性
    document.documentElement.setAttribute('data-theme', config.mode);
    document.documentElement.setAttribute('data-color-scheme', config.mode === 'dark' ? 'dark' : 'light');
  }, [config]);

  return null;
};

5.3 自定义 Hook

typescript

// hooks/useTheme.ts
import { useCallback } from 'react';
import { useThemeStore } from '../stores/theme';
import { ThemeConfig } from '../styles/theme/types';

export const useTheme = () => {
  const { config, isDark, isAuto, setTheme, toggleTheme, resetTheme } = useThemeStore();

  const updateTheme = useCallback((updates: Partial<ThemeConfig>) => {
    setTheme(updates);
  }, [setTheme]);

  const setPrimaryColor = useCallback((color: string) => {
    const { setPrimaryColor } = useThemeStore.getState();
    setPrimaryColor(color);
  }, []);

  return {
    theme: config,
    isDark,
    isAuto,
    updateTheme,
    toggleTheme,
    resetTheme,
    setPrimaryColor,
  };
};

// hooks/useCssVar.ts
import { useLayoutEffect } from 'react';
import { CssVarsManager } from '../styles/theme/utils/css-vars';

export const useCssVar = (name: string, value: string) => {
  useLayoutEffect(() => {
    const cssVarsManager = CssVarsManager.getInstance();
    cssVarsManager.setVariables({ [name]: value });

    return () => {
      cssVarsManager.removeVariable(name);
    };
  }, [name, value]);
};

6. 主题切换的性能优化

6.1 样式注入优化

typescript

// styles/theme/optimization.ts
import { createCache, StyleProvider } from '@ant-design/cssinjs';
import { useMemo } from 'react';

// 客户端样式缓存
const styleCache = createCache();

export const OptimizedStyleProvider: React.FC<{ children: React.ReactNode }> = ({ 
  children 
}) => {
  const cache = useMemo(() => styleCache, []);

  return (
    <StyleProvider cache={cache}>
      {children}
    </StyleProvider>
  );
};

// 服务端样式提取
export const extractStyle = () => {
  if (typeof window !== 'undefined') return '';
  
  const cache = createCache();
  return extractStyle(cache);
};

6.2 防抖主题更新

typescript

// styles/theme/utils/debounce.ts
export const debounce = <T extends (...args: any[]) => any>(
  func: T,
  wait: number
): ((...args: Parameters<T>) => void) => {
  let timeout: NodeJS.Timeout;
  
  return (...args: Parameters<T>) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
};

// 在主题存储中使用
const debouncedSetTheme = debounce(useThemeStore.getState().setTheme, 100);

6.3 主题切换动画

typescript

// styles/theme/transition.css
.theme-transition * {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease,
              box-shadow 0.3s ease !important;
}

// components/ThemeTransition.tsx
import React, { useEffect, useState } from 'react';
import { useThemeStore } from '../stores/theme';

export const ThemeTransition: React.FC<{ children: React.ReactNode }> = ({ 
  children 
}) => {
  const [isTransitioning, setIsTransitioning] = useState(false);
  const { isDark } = useThemeStore();

  useEffect(() => {
    setIsTransitioning(true);
    const timer = setTimeout(() => setIsTransitioning(false), 300);
    
    return () => clearTimeout(timer);
  }, [isDark]);

  return (
    <div className={isTransitioning ? 'theme-transition' : ''}>
      {children}
    </div>
  );
};

7. 测试策略

7.1 单元测试

typescript

// __tests__/theme/utils/color.test.ts
import { ColorUtils } from '../../../styles/theme/utils/color';

describe('ColorUtils', () => {
  describe('isDarkColor', () => {
    it('should return true for dark colors', () => {
      expect(ColorUtils.isDarkColor('#000000')).toBe(true);
      expect(ColorUtils.isDarkColor('#333333')).toBe(true);
    });

    it('should return false for light colors', () => {
      expect(ColorUtils.isDarkColor('#FFFFFF')).toBe(false);
      expect(ColorUtils.isDarkColor('#F5F5F5')).toBe(false);
    });
  });

  describe('generatePalette', () => {
    it('should generate correct number of colors', () => {
      const palette = ColorUtils.generatePalette('#1890ff');
      expect(palette).toHaveLength(10);
    });
  });
});

// __tests__/components/ThemeToggle.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { ThemeToggle } from '../../components/ThemeToggle';
import { ThemeProvider } from '../../styles/theme/ThemeProvider';

describe('ThemeToggle', () => {
  it('should render theme toggle buttons', () => {
    render(
      <ThemeProvider>
        <ThemeToggle />
      </ThemeProvider>
    );

    expect(screen.getByRole('switch')).toBeInTheDocument();
    expect(screen.getByRole('button')).toBeInTheDocument();
  });

  it('should toggle theme when switch is clicked', () => {
    render(
      <ThemeProvider>
        <ThemeToggle />
      </ThemeProvider>
    );

    const switchButton = screen.getByRole('switch');
    fireEvent.click(switchButton);

    // 添加断言验证主题切换
  });
});

7.2 E2E 测试

typescript

// e2e/theme.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Theme Switching', () => {
  test('should switch between light and dark themes', async ({ page }) => {
    await page.goto('/');

    // 初始应该是浅色主题
    await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');

    // 点击切换按钮
    await page.click('[role="switch"]');

    // 应该切换到深色主题
    await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
  });

  test('should persist theme preference', async ({ page }) => {
    await page.goto('/');
    
    // 切换到深色主题
    await page.click('[role="switch"]');
    
    // 刷新页面
    await page.reload();
    
    // 主题应该保持深色
    await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
  });
});

8. 部署与生产环境考虑

8.1 构建优化

typescript

// vite.config.ts (或 webpack 配置)
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'antd-theme': ['@ant-design/cssinjs', 'antd'],
        },
      },
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          // 构建时主题变量
          'primary-color': '#1677FF',
        },
        javascriptEnabled: true,
      },
    },
  },
});

8.2 CDN 与缓存策略

typescript

// 主题资源缓存
const themeCacheStrategy = {
  // 主题配置 API 缓存
  '/api/theme': {
    maxAge: 86400, // 24小时
    staleWhileRevalidate: 604800, // 7天
  },
  // 静态主题资源
  '/themes/': {
    maxAge: 31536000, // 1年
    immutable: true,
  },
};