主题切换

一个轻量级的主题切换组件。它能自动读取当前应用中已注册的所有 TechUI 主题，并以精简的色块形式展示，允许用户点击快速切换。

此组件常用于：

• 登录页/演示页：无需完整的控制面板即可展示多主题效果。
• 独立子系统：如 TechUI-Scifi 不包含完整配置面板的场景。

主题注册 前置条件

TuiThemeToggle 的核心特性是自动感知。它不会凭空生成选项，而是基于您在项目中实际导入的主题包。

在您的入口文件（如 main.js）中，只需直接 import 您想要开启的主题包，组件即可自动识别。

// main.js - 注册主题
import { createApp } from 'vue'
import App from './App.vue'

// 2. 导入想要开启的主题 (组件会自动检测到这些导入)
import "@techui/themes/lightBlue"  // 浅蓝
import "@techui/themes/darkBlue"   // 深蓝
import "@techui/themes/darkBlack"  // 暗黑

基础用法

默认布局

直接调用组件，默认使用水平布局 (h)。

<template>
  <div class="header-bar">
    <TuiThemeToggle />
  </div>
</template>

布局方向

通过 direction 属性可以控制色块的排列方向，以适应不同的页面布局位置。

• h (Horizontal): 水平排列。适合放在顶部导航栏。
• v (Vertical): 垂直排列。适合悬浮在页面左/右侧边缘（如登录页演示）。

<template>
  <div style="position: fixed; top: 20px; right: 20px;">
    <TuiThemeToggle direction="v" />
  </div>
</template>

API 参考

Props

属性名	说明	类型	可选值	默认值
direction	排列方向	String	'h' (水平), 'v' (垂直)	'h'