主题生成器

主题生成器用于可视化配置一套或多套 Snake UI 主题，并导出可直接注册的 @puresnake/snake-ui.theme.ts。

生成步骤

选择或输入主题颜色，并确认颜色选择器。
填写唯一的 name，按需补充 label 和 description。
单主题可直接导出；多主题先逐套加入导出队列。
下载 @puresnake/snake-ui.theme.ts 并放入宿主项目。

工具能力

分组色票：按品牌与状态、文本与描边、背景与表面、通知与浮层分组，覆盖完整令牌。
智能生成暗色值：开启暗黑色值后，基于亮色方案智能生成暗黑初始色值，可以逐项覆盖；支持一键刷新。
随机主题：主题色组支持随机生成配色，作为起步方案再逐项调整。
导出队列：配置好一套主题后加入队列，继续配置下一套，最后统一导出多套主题。
本地保存：配置保存在浏览器本地，刷新页面不丢失。

配置工具

请为下列色票选择颜色，支持可选的暗黑模式色值。支持智能生成颜色值、随机主题颜色等。

主题色成功色警告色错误色信息色

卡片标题

这是一段示例内容，用于展示文字色与背景色的搭配。

成功警告信息

启用暗黑色值（可选）

提示：开启暗黑色值后，系统会基于亮色方案智能生成暗黑初始色值，您可以逐项覆盖。

请填写主题元信息（name/label/description），为上述已选择颜色赋予名称。

主题标识显示名称主题描述

如需多个主题，请先将当前已配置好的变量添加到导出队列，继续进行下一套主题配置，最后导出即可！

导出文件为 snake-ui.theme.ts，覆盖 demo 工程 src/snake-ui.theme.ts 后重新编译即可使用。

注册导出结果

import SnakeUI from '@puresnake/snake-ui';
import snakeThemePresets from './snake-ui.theme';

app.use(SnakeUI, {
    theme: {
        themes: snakeThemePresets,
        defaultTheme: 'snake',
        defaultDarkMode: 'light'
    }
});

导出文件只保留相对默认色板发生变化的令牌，运行时会自动补齐其余颜色。

导出后检查

每套主题的 name 唯一，且 defaultTheme 能找到对应主题。
主按钮文字与实心主色有足够对比度。
浅色、暗色下的文字、边框、背景和禁用状态都可辨识。
在实际 H5、小程序或 App 页面检查，而不只依赖生成器预览。

暗色生成

暗色值由启发式规则生成。复杂品牌色、无障碍要求或关键交易页面应由设计与前端共同复核。

主题结构和运行时切换方式见多主题与暗黑模式。

主题生成器 ​

生成步骤 ​

工具能力 ​

配置工具 ​