前端组件库如何支持多主题？原理和实战你掌握了吗？

在2023年Gartner发布的数字体验调查报告中，89%的企业将”视觉定制能力”列为选择组件库的核心指标。这种需求源于：

品牌差异：不同产品线需要匹配专属品牌色系
场景适配：白天/夜间模式、高对比度等特殊场景
用户偏好：允许终端用户自定义界面风格

通过:root选择器定义全局变量，组件通过var()引用：

:root[data-theme="light"] {
  --primary-color: 1890ff;
  --text-color: 333;
}

运行时动态替换是主流方案，通过修改HTML的data-theme属性触发样式更新：

function switchTheme(name) {
  document.documentElement.setAttribute('data-theme', name);
}

方案	优点	缺点
CSS Modules	天然的样式隔离	构建配置复杂
Shadow DOM	浏览器原生支持	兼容性要求高

my-ui/
├── src/
│ ├── themes/        主题目录
│ │ ├── base.less    基础变量
│ │ ├── light.less  
│ │ └── dark.less
│ ├── components/
│ │ └── Button/
│ │   ├── index.tsx
│ │   └── style.less
└── theme-provider/  主题运行时

在Vue组件中通过computed属性动态绑定样式：

<template>
  <button :class="[$style.button, themeClass]">
    <slot />
  </button>
</template>

<script>
export default {
  computed: {
    themeClass() {
      return `theme-${this.$theme}`;
    }
  }
}
</script>

创建ThemeManager单例管理主题状态：

class ThemeManager {
  private currentTheme = 'light';
  
  switchTheme(name: string) {
    import(`../themes/${name}.css`);
    this.currentTheme = name;
  }
}