Theme Overview

TechUI's theme system adopts a "data-driven" design pattern. Unlike traditional theme solutions that rely solely on CSS preprocessor (Less/Sass) variables, TechUI defines a theme as a standard JavaScript data structure.

This data is parsed by TuiProvider at application runtime and distributed to two different rendering channels: CSS Variables and Vue Reactive State. This design ensures that both DOM elements and Canvas canvases (such as ECharts and Three.js) can respond to theme switching in real-time.

Core Architecture

The operational workflow of the TechUI theme system is as follows:

1. Definition: Developers create a JS object containing semantic color definitions (e.g., lightBlue.js) and register it using tTheme.register.
2. Processing: When the TuiProvider component initializes, it reads the currently active theme data.
3. Distribution:

• Channel A (CSS): The system automatically generates CSS variables (CSS Custom Properties) and injects them into the document root. For example, primary.base is converted to --primary-base.
• Channel B (JS): The system mounts the complete theme tree to $tState.themePalette for use by component logic and chart libraries.

Why Choose This Design?

Semantics and Standardization

We no longer focus on specific color values (such as #1890ff), but rather on the semantics of the color. All TechUI themes follow the same Schema structure (such as common, font, primary, etc.), which means you can switch themes at any time without changing any component code.

Crossing the "Canvas Barrier"

Traditional CSS-based theme solutions are difficult for Canvas-based libraries (like ECharts) to access. TechUI provides the $tState.themePalette and the $tc() function, allowing the JS side to easily retrieve the current theme color just like writing CSS, thereby achieving seamless integration between charts and the UI.

Runtime Zero-Compilation Switching

There is no need to generate multiple CSS files at build time. TechUI's theme switching is purely at runtime; the switching process is as simple and efficient as updating a Vue variable. Combined with view transition animations, it can achieve a cinema-grade smooth skin-changing experience.

Data Flow Diagram

[ Theme File (lightBlue.js) ]
          |
          v
[ tTheme.register (Registry) ]
          |
   (App Startup / Switch Theme)
          |
          v
[ TuiProvider (Core Processing) ]
          |
          +-------------------------------------+
          |                                     |
          v                                     v
[ CSS Variable System ]                 [ Vue Reactive System ]
:root {                                 $tState.themePalette
  --primary-base: #007bff;              {
  --bg-root: #ffffff;                     primary: { base: "#007bff" },
}                                         bg: { root: "#ffffff" }
          |                                     }
          |                                     |
          v                                     v
   [ DOM Components ]                   [ Canvas/JS Components ]
   div {                                echarts.init(..., {
     background: var(--bg-root);          color: [ theme.primary.base ]
   }                                    })

Core Capabilities Overview

• Dual-Modal Access: Use var(--key-sub) in CSS and $tc('key.sub') in JS.
• Automatic Chart Adaptation: Automatically generates and registers the corresponding ECharts theme JSON after enabling ECharts features.
• Built-in Color Algorithm: Based on @techui/colors, the theme file only needs to define the base color, and the system can automatically calculate the derived gradient colors or interactive state colors.
• 3D Adaptation: Includes the scifi field, specifically used to configure the glow and highlight effects of 3D panels and decorative SVG components.