主题定制

用 CSS 变量在全局或局部调整配色、圆角、时长与缓动，并适配深色模式。

#工作方式

所有可定制的值都是以 --elyri- 开头的 CSS 变量，默认值由 styles.css 定义在 :root 上。覆盖变量即可换肤，不需要改组件代码。

#全局覆盖

在 styles.css 之后加载的样式表里，于 :root 上重新声明变量：

theme.css

:root {
  --elyri-duration-base: 500ms;
  --elyri-ui-accent: #0f766e;
  --elyri-ui-accent-soft: rgb(15 118 110 / 12%);
  --elyri-ui-radius: 6px;
}

#局部覆盖

CSS 变量会向下继承，把它写在任意容器上，就只影响该容器内的组件。

theme.css

/* 只影响 .marketing 内部的组件 */
.marketing {
  --elyri-ui-accent: #e11d48;
  --elyri-duration-base: 700ms;
}

#动效变量（@elyri/motion）

变量	默认值	用途
`--elyri-ease-out`	`cubic-bezier(0.16, 1, 0.3, 1)`	入场、展开的缓动
`--elyri-ease-in-out`	`cubic-bezier(0.65, 0, 0.35, 1)`	往复、循环的缓动
`--elyri-duration-fast`	`200ms`	短时长
`--elyri-duration-base`	`400ms`	常规时长
`--elyri-duration-slow`	`800ms`	长时长

#UI 变量（@elyri/ui）

变量	用途
`--elyri-ui-accent`	强调色（主按钮、选中态）
`--elyri-ui-accent-text`	强调色上的文字
`--elyri-ui-accent-soft`	浅强调底色
`--elyri-ui-text / --elyri-ui-muted`	正文 / 次要文字
`--elyri-ui-surface / --elyri-ui-surface-muted`	表面 / 次级表面
`--elyri-ui-border`	边框
`--elyri-ui-danger / -success / -warning`	状态色
`--elyri-ui-radius / --elyri-ui-radius-sm`	圆角
`--elyri-ui-shadow / --elyri-ui-ring`	阴影 / 焦点环
`--elyri-ui-duration / --elyri-ui-ease`	交互过渡

#深色模式

UI 变量默认通过 prefers-color-scheme 跟随系统明暗。如果站点有自己的主题开关，请在对应选择器下同时覆盖浅色与深色两套值，避免系统设置与站点主题不一致时出现混搭。

theme.css

/* 站点用 data-theme 切换明暗时，按同一选择器覆盖 */
:root[data-theme='light'] {
  --elyri-ui-text: #1a1d23;
  --elyri-ui-surface: #ffffff;
}
:root[data-theme='dark'] {
  --elyri-ui-text: #eef0f4;
  --elyri-ui-surface: #16191f;
}

#组件级定制

组件还有自己的变量（如 --elyri-gradient-colors），以及颜色、速度、尺寸等 props。props 会以内联样式写入，优先级高于样式表；WebGL 背景的配色只能通过 props 传入。每个组件可用的参数见组件页的「属性」表。

需要超出变量范围的改动？用 CLI 把源码拷进项目后直接修改。