主题定制

PolyUI 使用 OKLCH 色彩空间的 CSS 变量存储所有设计令牌。修改一个 CSS 文件，运行时即刻生效，无需重新构建。

基础令牌

css

:root {
  /* 背景与表面 */
  --background:       oklch(0.16 0.008 222);
  --card:             oklch(0.19 0.006 222);

  /* 文字 */
  --foreground:       oklch(0.94 0.005 75);
  --foreground-muted: oklch(0.60 0.008 75);

  /* 主题色 */
  --primary:          oklch(0.72 0.18 55);   /* 琥珀色 */
  --primary-foreground: oklch(0.15 0.01 55);

  /* 边框 */
  --border:           oklch(0.28 0.008 222);
  --ring:             oklch(0.72 0.18 55);

  /* 圆角 */
  --radius:           8px;
}

覆盖令牌

在你的 globals.css 里覆盖任意令牌，无需修改组件代码。

css

/* 换成蓝色主题 */
:root {
  --primary: oklch(0.60 0.22 260);
  --primary-foreground: oklch(0.98 0.002 260);
  --ring: oklch(0.60 0.22 260);
}

/* 圆角更大 */
:root {
  --radius: 12px;
}

亮色主题

css

[data-theme="light"] {
  --background:       oklch(0.97 0.005 75);
  --foreground:       oklch(0.18 0.008 222);
  --primary:          oklch(0.48 0.20 55);
  --primary-foreground: oklch(0.98 0.002 75);
  --border:           oklch(0.88 0.005 220);
}

在 html 元素上添加 data-theme="light" 属性即可切换到亮色模式。

OKLCH 说明

PolyUI 使用 OKLCH 色彩空间，而非 HEX 或 HSL。OKLCH 的亮度（L）与人眼感知一致，同一亮度值在不同色相下看起来一样亮，适合构建可预测的设计系统。

css

/* oklch(lightness chroma hue) */
--primary: oklch(0.72 0.18 55);
/*               ^L    ^C   ^H
   L: 0-1 (亮度)
   C: 0-0.4 (饱和度)
   H: 0-360 (色相角度，55 = 琥珀)
*/

/* 带透明度 */
background: oklch(from var(--primary) l c h / 0.1);

动效令牌

css

:root {
  --ease-out:            cubic-bezier(0.16, 1, 0.3, 1);
  --duration-instant:    80ms;
  --duration-fast:       150ms;
  --duration-base:       240ms;
  --duration-deliberate: 400ms;
  --duration-slow:       600ms;
}

/* 使用示例 */
.btn {
  transition: background var(--duration-fast) var(--ease-out);
}