应用主题

iBizHUB主题主要包括pc端主题（web-theme）和移动端主题（mob-theme）提供，它主要由预置界面布局与主题样式组成。提供了界面默认的布局模型与以下默认主题：

web端

• 亮色主题（light）：以白色与蓝青色为主色调，适用于数据看板等需要高可视性的场景

• 暗色主题（dark）：以黑色为主色调，优化夜间使用体验，降低视觉疲劳

• 蓝色主题（blue）：以蓝色与白色为主色调，符合企业UI规范的定制化配色方案

移动端

• 亮色主题（light）：以白色与蓝色为主色调，标准移动端色调。

设计变量

在项目开发中，主题设计变量（Theme Design Variables）是样式体系的核心基础，应在初期架构阶段明确定义。iBizHUB框架的主题变量主要包括以下几类：

名称	标题	描述
color	颜色	主题中的颜色变量，包括成功色、警告色等
shadow	阴影	主题中的阴影色，包括模态阴影、按钮阴影、popover 阴影等
font-size	字号	主题字号，包括 h1 到 h6 等
font-weight	字重	主题字重
border-radius	圆角	主题圆角标准
height/width	尺寸	主题尺寸，包括按钮、输入框高度，图标宽高等
spacing	间距	主题尺寸，控制界面所有控件间距离

TIP

设计变量详细信息可参考：设计变量

主题实现

iBizHUB采用基于 CSS 变量和 DOM 根节点绑定的主题架构，其核心实现原理如下：

1. 主题注入机制

   • 通过动态绑定 :root 元素的 class 作为主题选择器（如 light/dark）
   • 所有主题相关的 CSS 变量（如色彩、间距、字体等设计变量）以 --ibiz 形式挂载到 :root 作用域

2. 组件级主题消费

   • 组件内部通过 var(--ibiz-color-primary) 方式消费主题变量
   • 结合 Sass 预处理器封装变量映射层，保证类型安全
   • 支持运行时动态切换主题

主题切换

主题是通过绑定class的方式进行实现，切换主题将会替换主题class。iBizHUB封装了主题的工具类，可通过调用它对主题进行切换与调整。

// 设置主题
ibiz.util.theme.setTheme('light');
// 获取主题标识
ibiz.util.theme.getTheme();
// 打开自定义主题配置
ibiz.util.theme.customTheme();

使用主题工具修改主题变量后，会根据当前主题标识与修改的主题变量生成一个css内容，然后在header后添加一个style元素节点。

<style id="light" type="text/css">
// 应用主题变量
:root.light{
	--ibiz-color-primary: rgba(30, 215, 172, 1);
}
// 部件主题变量
.ibiz-control-grid{
	--ibiz-control-grid-text-color: rgba(208, 30, 170, 1);
}
</style>

组件绘制时会拿取更改过的主题样式值

// 按钮背景色变为rgba(30, 215, 172, 1)
.el-button {
	--el-button-bg-color: var(--ibiz-color-primary);
}
// 表格字体颜色变为rgba(208, 30, 170, 1)
.ibiz-grid-field-column__text {
	color: var(--ibiz-control-grid-text-color);
}