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.

Basic Usage

Preset Themes

Built-in preset palettes for one-click switching.

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