Theme Toggle

A lightweight theme toggle component. It automatically detects all registered TechUI themes in the current application and displays them as streamlined color blocks, allowing users to switch themes quickly with a click.

This component is commonly used for:

• Login Pages / Demo Pages: To showcase multi-theme effects without needing a full control panel.
• Independent Subsystems: Such as scenarios using TechUI-Scifi that do not include a complete configuration panel.

Theme Registration

The core feature of TuiThemeToggle is automatic perception. It does not generate options out of thin air; instead, it is based on the theme packages you have actually imported into your project.

In your entry file (e.g., main.js), simply import the theme packages you want to enable, and the component will recognize them automatically.

// main.js - Registering themes
import { createApp } from 'vue'
import App from './App.vue'

// 2. Import the themes you want to enable (the component will automatically detect these imports)
import "@techui/themes/lightBlue"  // Light Blue
import "@techui/themes/darkBlue"   // Dark Blue
import "@techui/themes/darkBlack"  // Dark Black

Basic Usage

Default Layout

Call the component directly; it uses a horizontal layout (h) by default.

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

Layout Direction

The direction property controls the arrangement of the color blocks to suit different page layout positions.

• h (Horizontal): Arranged horizontally. Suitable for top navigation bars.
• v (Vertical): Arranged vertically. Suitable for floating on the left or right edges of the page (e.g., for login page demos).

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

API Reference

Props

Property	Description	Type	Optional Values	Default
direction	Arrangement direction	String	'h' (Horizontal), 'v' (Vertical)	'h'