Theme

TechUI features a powerful full-stack theme system that drives both CSS styles and JS chart rendering using "a single set of data".

Detailed Documentation This page serves only as a feature overview. For the complete semantic structure, ECharts integration principles, and complete theme development cases, please consult the Theme System Complete Documentation.

Core Mechanisms

• Data Driven: Themes are standard JavaScript objects, not merely CSS files.
• Bi-directional Distribution: The system automatically converts theme data into CSS Variables (for style usage) and Reactive State (for JS logic usage).
• Zero-Compile Switching: Pure runtime switching without page refreshes, supporting smooth transition animations.

Import & Registration

Import the official theme in the project entry file (main.js) to automatically register it.

// Import light theme (as default)
import "@techui/themes/lightBlue";

// Import dark theme (enable switching function)
import "@techui/themes/darkBlue";

Tip: After importing multiple themes, the system will automatically display the theme toggle control.

Development Usage

The system automatically generates semantic CSS variables. Variable names follow Kebab Case.

Example of Common Variables:

.my-card {
  /* Common background and border */
  background: var(--common-bg);
  border: 1px solid var(--common-bd);

  /* Primary color text */
  color: var(--primary-base);
  
  /* Automatically generated opacity variables (10% - 90%) */
  background: var(--primary-base_op1); /* Primary color background with 10% opacity */
}

Development Usage JS

In Vue components or Canvas drawing, use the globally injected $tc function to get colors.

import { inject, computed } from 'vue';

const { $tc, $c } = inject('$global');

// 1. Get static color string (e.g., "#1890ff")
const color = $tc('primary.base');

// 2. Get reactive color (updates automatically on theme switch)
const activeColor = computed(() => $tc('success.base', true).value);

// 3. Handle opacity (recommended to use $c utility)
const maskColor = $c.fade($tc('common.bg'), 0.5);

Switch Control

Use Component

Directly place the toggle button on the page; clicking it cycles through registered themes. Or switch themes in the control panel.

<TuiThemeToggle />

<TuiThemeToggle direction="v" />

Programmatic Control

Use the themeToggle function to force switch.

const { themeToggle } = inject('$global');

// Switch to darkBlue theme
themeToggle('darkBlue', 'dark');

ECharts Adaptation

If features.echarts: true is enabled, charts will automatically apply the current theme color scheme without extra configuration.

Semantic Quick Reference

Semantic Category	Key Name (Key)	Description
Common	common.bg, common.bg_layer	Base background, container background
Text	font.base, font.weak	Body text color, auxiliary text color
Primary	primary.base	Brand primary color
Functional	success, warning, danger	Status feedback colors (includes base, weaker, stronger, etc.)
Chart	chart.palette	Chart default color palette sequence