主题系统示例

本页面展示 YH-UI 主题系统的完整交互能力。所有示例都会在点击后立即生效，无需刷新页面。

基础用法

动态切换主色和暗黑模式。

点击上方按钮后，当前主题按钮会立即切换到新的主题色。

基础用法

预设主题

内置常用配色预设，支持一键快速切换。

当前选中的预设按钮和预览按钮都会立即进入当前主题态。

预设主题

密度/紧凑度系统

支持舒适、紧凑、密集三种视觉模式。

密度系统

色彩算法

提供默认、鲜艳、柔和、粉彩四种生成逻辑。

色彩算法

智能色彩生成

从单一主色自动计算并应用一组语义色。

智能生成

色盲友好模式

内置色盲模式支持，用于辅助验证可访问性体验。

色盲模式

组件级主题覆盖

无需修改全局主题，即可精确控制特定组件的样式变量。

组件覆盖

主题配置导出

支持将当前主题状态导出为 JSON 配置。

配置导出