主题设计器

从一套预设出发，或者自己挑品牌色，再定明暗、密度、对比度与圆角，下方整面真实组件随之实时变化；满意后复制最下面的 CSS 与接入代码放进项目。设置只保存在当前浏览器里。

邮箱

水果

交付日期

yyyy

苹果梨

单选

苹果

梨

登录密码

会话时长（分钟）

常驻城市

技术栈

Vue

TypeScript

成功错误默认处理中警告

按 CtrlK 打开命令面板

附件

把文件拖到这里

还没有消息

有新的评论或提及时会出现在这里。

验证账号

验证码已发送至 a****@example.com

验证码

没收到验证码？重新发送

曦寒懿

@xihanfun

快速、轻量、高效、用心的开源生态。

月度销售额

1 series, 6 points from 一月 to 六月. 销售额: lowest 986 at 二月, highest 1,745 at 五月.

Data table
Category	销售额
一月	1,204
二月	986
三月	1,530
四月	1,382
五月	1,745
六月	1,618

本月新增用户12,480

转化率23.6%

09:12
构建通过
全部检查均已通过
09:20
灰度发布
一成流量切到新版本
09:41
响应变慢
已自动扩容一台实例
10:05
全量上线
等待值班同学确认

复制本页导出的 CSS 与接入代码，品牌色与视觉环境随之生效。

创建账号

免费试用 7 天，无需绑定支付方式。

2026年10月

一二三四五六日

删除项目

删除后项目里的数据无法恢复，确定继续吗？

部署完成

所有检查均已通过，新版本已对外提供服务。

配额即将用尽

本月还可处理 120 次请求。

最近 7 天共有 12 次部署，全部成功。

成员

角色

状态

赵一

管理员

在线

钱二

开发者

忙碌

孙三

开发者

离线

李四

访客

在线

订单详情

订单号: XH-20261008-0042
下单时间: 2026-10-08 09:31
支付方式: 余额支付
实付金额: ¥ 3,240.00

CSS：品牌色与圆角

/* 品牌色：根元素写 data-brand="custom" 即生效 */
[data-brand='custom'] {
  --xh-color-brand-50: oklch(0.971 0.014 259.15);
  --xh-color-brand-100: oklch(0.936 0.032 259.15);
  --xh-color-brand-200: oklch(0.885 0.061 259.15);
  --xh-color-brand-300: oklch(0.809 0.104 259.15);
  --xh-color-brand-400: oklch(0.702 0.163 259.15);
  --xh-color-brand-500: oklch(0.623 0.212 259.15);
  --xh-color-brand-600: oklch(0.546 0.214 259.15);
  --xh-color-brand-700: oklch(0.488 0.194 259.15);
  --xh-color-brand-800: oklch(0.424 0.162 259.15);
  --xh-color-brand-900: oklch(0.379 0.131 259.15);
  --xh-color-brand-950: oklch(0.282 0.088 259.15);
}

TypeScript：注册品牌并提交视觉环境

import {
  brandId,
  createVisualEnvironmentController,
  registerBrand,
} from "@xihan-ui/tokens/runtime";

registerBrand("custom", "#0067ea");

const visual = createVisualEnvironmentController({
  root: document.documentElement,
  initial: {
    // 预览用的是浅色；跟随系统写 "system"
    mode: "light",
    brand: brandId("custom"),
    density: "comfortable",
    contrast: "default",
  },
});

能改什么

设置	改的是	项目里怎么用
品牌色	由种子色派生的整套 `--xh-color-brand-50…950` 原语	导出的 `[data-brand]` 取值块，或运行时 `registerBrand`
明暗	`data-theme`	视觉环境控制器的 `mode`
密度	`data-density`	控制器的 `density`
对比度	`data-contrast`	控制器的 `contrast`
圆角	原始阶梯 `--xh-radius-sm / md / lg`	导出的 `:root` 覆盖

预设只是上面五项的一组取值，选中后照样可以逐项微调；与哪套预设完全一致，哪套就显示为选中。

品牌色只取种子的色相与彩度，明度曲线沿用基线，所以换任何种子，语义层（实心按钮、链接、选中态）的对比度保证都不变；种子本身的明暗不会被原样搬进来。圆角改的是原始阶梯，控件、表面、浮层三档形状语义跟着走，组件之间的层次关系保持不变：

圆角	`--xh-radius-sm / md / lg`	控件 / 表面 / 浮层
方正	0 / 2 / 4px	0 / 2 / 2px
默认	2 / 4 / 8px（令牌缺省，不导出覆盖）	2 / 4 / 4px
圆润	4 / 8 / 12px	4 / 8 / 8px

控件与内层取 sm，表面与浮层取 md；lg 不进形状令牌，留给作者直接取用。

接入

把「CSS」一栏放进全局样式，或者只用「TypeScript」一栏在运行时注册品牌：两者给出的品牌色是同一套。明暗、密度与对比度属于视觉环境，按设计令牌与主题里的控制器提交，Vue 与 React 也可以经 XhConfigProvider 传入。

预览区本身就是一个局部视觉环境：它用 XhConfigProvider 的同一套机制把设置写到自己的根元素上，下拉、日期面板这类渲染到预览区之外的浮层也会带上同样的设置。项目里把控制器挂在根元素上，整站随之生效。

主题设计器 ​

怎么安装

怎么换主题

键盘怎么操作

能改什么 ​

接入 ​

主题设计器

能改什么

接入