Skip to content

Theme System Examples

This page demonstrates the full functionality of the YH-UI theme system.

Basic Usage

Dynamically toggle primary colors and dark mode.

Basic Usage

Preset Themes

Built-in common color presets for quick one-click switching.

Preset Themes

Density/Compactness System

Supports three visual modes: Comfortable, Compact, and Dense.

Density System

Color Algorithms

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

Color Algorithms

Intelligent Color Generation

Automatically calculate and apply a full set of semantic colors from a single primary color.

Intelligent Generation

Colorblind Friendly Mode

Built-in colorblind simulation support to ensure an accessible experience.

Colorblind Mode

Component-Level Theme Overriding

Precisely control style variables for specific components without making global changes.

Component Override

Theme Config Export

Supports exporting the current theme state as a JSON configuration.

Config Export

Released under the MIT License.