Theme System Examples

This page demonstrates the full interactive capabilities of the YH-UI theme system. Every example responds immediately after clicking, without refreshing the page.

Basic Usage

Dynamically switch primary colors and dark mode.

After clicking above, the current theme button switches immediately to the new theme color.

Basic Usage

Preset Themes

Built-in preset palettes for one-click switching.

The selected preset button and preview button both switch into the active theme instantly.

Preset Themes

Density / Compactness System

Supports Comfortable, Compact, and Dense visual modes.

Density System

Color Algorithms

Provides four generation modes: Default, Vibrant, Muted, and Pastel.

Color Algorithms

Intelligent Color Generation

Automatically derives semantic colors from a single primary color.

Intelligent Generation

Colorblind Friendly Mode

Built-in simulation modes help verify accessibility quickly.

Colorblind Mode

Component-Level Theme Override

Override specific component variables without changing the global theme.

Component Override

Theme Config Export

Export the current theme state as JSON.

Config Export