主题定制器

运行时动态定制 business-ui 的主题色与样式：主色、语义色、密度、磨砂全部实时生效，无需刷新页面。下面的 Playground 即改即见，底部同步生成等效的声明式配置代码。

主色

语义色successwarningdangerinfo

图表配色

密度

磨砂

primarysuccesswarningdangerinfo

同步完成

3 个数据源已接入。

额度提醒

本月同步量已用 82%。

62%

等效配置代码

上面每一步调整都会同步生成对应的声明式配置，复制到应用根组件即可获得同样的主题。组件卸载时会自动移除注入的令牌回到默认主题；需要跨刷新保留用户选择，加 persist-theme（存档将优先于声明式配置）。

<eb-config-provider
  theme-color="#175dff"
  :semantic='{"success":"#16a34a","warning":"#d97706","danger":"#dc2626","info":"#0e7490"}'
  :series='["#175DFF","#5AD8A6","#F6BD16","#6DC8EC","#E8684A","#9270CA","#FF9D4D","#5D7092"]'
  density="default"
>
  <router-view />
</eb-config-provider>

命令式 API

运行中动态换色（不经过 ConfigProvider）直接调用工具函数，同样全库生效、图表自动重绘：

import {
  setPrimaryColor,      // 换主色（7 档梯度 + rgb，暗色自适应）
  setSemanticColors,    // 语义色部分更新
  resetTheme,           // 移除注入令牌，回到样式表默认
  getPrimaryColor,      // 当前运行时主色
  saveThemeConfig,      // 持久化 { primary, semantic }
  loadThemeConfig,
  clearThemeConfig,
  EB_THEME_PRESETS,     // 预设色板
} from '@wil-works/evoke-business-ui'

setPrimaryColor('#0fa968')
setSemanticColors({ danger: '#e64980' })

暗色模式下梯度自动反向派生（light 档向深底混合），且 html.dark 切换时已注入的主题会跟随重注入——详见主题与暗色模式。

主题定制器 ​

等效配置代码

命令式 API ​

主题定制器

命令式 API