关于White Label Design System与Figma Tokens的多品牌切换方案咨询

我做过多个ToB白标产品的设计系统落地，完全可以通过主题化配置驱动实现单一组件库适配多品牌，不用复制文件改样式，以下是具体可行的方法：

核心思路 #

把所有品牌相关的可配置项（主色、排版、圆角、Logo、间距等）抽离成独立的主题配置，组件库完全基于这些配置渲染，切换品牌时仅需替换配置即可批量更新所有界面元素。

1. CSS变量+全局配置注入 #

这是最轻量化的方案，适合纯前端项目或轻框架场景：

• 定义全局CSS变量集合，所有组件样式都使用变量而非硬编码值：

/* 基础无品牌主题变量 */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --border-radius: 4px;
  --font-family: 'Roboto', sans-serif;
  --logo-url: url('/assets/logos/default.svg');
}

/* 品牌A的主题变量（可单独存为brand-a.css） */
.brand-a {
  --primary-color: #2ecc71;
  --border-radius: 8px;
  --logo-url: url('/assets/logos/brand-a.svg');
}

• 切换品牌时，仅需给根元素（如<html>或<body>）添加对应的品牌类名，所有组件会自动应用新样式：

// 切换到品牌A
document.documentElement.classList.add('brand-a');
document.documentElement.classList.remove('brand-b');

2. 框架级主题Provider（React/Vue） #

对于React、Vue这类SPA框架，用全局状态管理+Context/混入实现主题切换：

• React示例：封装ThemeProvider组件，通过Context传递主题配置：

// ThemeContext.js
import { createContext, useContext } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ theme, children }) => {
  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

• 组件中通过useTheme读取配置：

// Button.jsx
import { useTheme } from './ThemeContext';

const Button = ({ children }) => {
  const { primaryColor, borderRadius } = useTheme();
  return (
    <button style={{
      backgroundColor: primaryColor,
      borderRadius,
      padding: '8px 16px',
      border: 'none',
      color: 'white'
    }}>
      {children}
    </button>
  );
};

• 切换品牌时，仅需更新ThemeProvider的theme属性：

// 品牌配置文件：brandConfigs.js
export const brandConfigs = {
  brandA: { primaryColor: '#2ecc71', borderRadius: '8px', logoUrl: '/assets/logos/brand-a.svg' },
  brandB: { primaryColor: '#e74c3c', borderRadius: '2px', logoUrl: '/assets/logos/brand-b.svg' }
};

// 切换逻辑
const [currentBrand, setCurrentBrand] = useState('brandA');
<ThemeProvider theme={brandConfigs[currentBrand]}>
  {/* 应用内容 */}
</ThemeProvider>

3. 构建时主题打包（适合需要独立产物的场景） #

如果需要为每个品牌生成独立的部署包，但不想重复编译组件库代码，可以用构建工具的环境变量实现：

• Vite/Webpack中配置环境变量，打包时注入当前品牌的配置：

// vite.config.js（Vite示例）
import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  const brand = mode.split('-')[1] || 'default'; // 比如build-brandA模式
  return {
    define: {
      'process.env.BRAND_CONFIG': JSON.stringify(require(`./src/configs/${brand}.json`))
    }
  };
});

• 代码中直接读取环境变量中的配置：

const theme = process.env.BRAND_CONFIG;

这样打包时仅需指定不同的mode（如vite build --mode build-brandA），即可生成对应品牌的独立包，组件库代码无需修改。

关键优化技巧 #

• 统一主题配置Schema：定义必填字段（如主色、字体、圆角），新增品牌时按Schema填写，避免遗漏配置导致样式异常。
• 主题预览工具：开发一个内部工具，可快速切换不同品牌主题，实时预览所有组件的适配效果，提升测试效率。
• 避免硬编码：严格禁止组件中出现固定的颜色、圆角等值，所有样式必须从主题配置中读取。

内容的提问来源于stack exchange，提问作者Olen