注册配置

在 TechUI 中，主题文件本身是独立的 JavaScript 模块。为了让系统能够识别并使用这些主题，您需要在应用启动时（通常在 main.js 或 App.vue 中）显式地引入它们。

引入主题

默认行为

如果您在项目中没有显式引入任何主题文件，TechUI 的核心包通常会默认加载 lightBlue（浅蓝）主题作为兜底，以确保应用能正常渲染。

手动引入

在实际开发中，建议您在入口文件中显式声明需要使用的主题。

// main.js

// 引入浅色主题 (必选推荐)
import "@techui/themes/lightBlue";

// 引入深色主题 (可选)
import "@techui/themes/darkBlue";

// 引入黑色主题 (可选)
import "@techui/themes/darkBlack";

引入语句执行时，主题文件内部会自动调用注册函数，将其配置加入到 TechUI 的全局主题池中。

单/多主题策略

TechUI 的全局服务会自动检测当前已注册的主题数量，并据此调整 UI 表现：

• 单主题模式： 当只引入一个主题时（例如仅引入了 lightBlue），系统会锁定主题切换功能。全局的 <TuiThemeToggle> 组件和控制面板中的主题切换选项将自动隐藏。

• 多主题模式： 当引入两个或更多主题时，系统会自动激活主题切换功能。用户可以通过控制面板或切换组件在已注册的主题之间自由切换。

自定义注册

除了使用官方主题，您也可以创建并注册自定义主题。这需要使用 @techui/utils 包中的 tTheme.register 方法。

注册函数 API

import { tTheme } from "@techui/utils";

tTheme.register({
  value: String,    // 主题唯一标识符
  scheme: String,   // 配色方案类型 ('light' | 'dark')
  colors: Array,    // 主题代表色数组（用于在切换器中展示）
  data: Object      // 完整的主题数据结构
});

注册示例

创建一个名为 myCustomTheme.js 的文件：

// myCustomTheme.js
import { tTheme } from "@techui/utils";
import { $c } from "@techui/colors";

// 定义主题数据
const themeData = {
  name: "myCustom",
  common: {
    bg: $c.wh,
    bd: $c.gyl3,
    // ... 其他配置项
  },
  // ... font, button, primary 等完整结构
};

// 执行注册
tTheme.register({
  value: "myCustom",      // 关键：在全局配置中引用的名称
  scheme: "light",        // 关键：告诉系统这是浅色系主题
  colors: [$c.rel5, $c.bll5], // 在主题切换面板中显示的预览色块
  data: themeData
});

启用自定义主题

注册完成后，需要在全局配置 $globalConfig 中指定使用该主题，或者在引入后通过控制面板切换。

// main.js
import "./path/to/myCustomTheme.js"; // 引入文件以触发注册

// 修改默认配置 (通常在 TechUIInit 或 Provide 配置中)
const globalConfig = {
  theme: "myCustom", // 设置默认主题为自定义主题
  // ...
};

注意事项

1. 唯一性：value 字段必须全局唯一，否则后注册的主题会覆盖同名主题。
2. 完整性：自定义主题的 data 对象必须遵循 TechUI 的完整 Schema 结构（包含 common, font, primary 等所有必要字段），否则可能导致组件样式缺失或报错。
3. 构建优化：未被引入的主题文件不会被打包工具（Vite/Webpack）构建到最终产物中，因此引入多个主题会增加少量的包体积（主要是 JS 数据大小，无额外 CSS 文件）。