T1TransOneGitHub

主题定制

设计令牌表、Web 端 injectTuTheme 与小程序端 wxss 覆盖。

设计令牌定义在 lib/theme.ts：颜色、文字与边框色、圆角、弹层层级与动画时长均为 CSS 变量，组件内联默认值保证开箱即用。

设计令牌（TU_THEME_DEFAULTS）
名称类型说明
--tu-primary#1677ff主色（按钮 / 选中态 / 指示线）。
--tu-success#00b578成功色。
--tu-warning#ff8f1f警告色。
--tu-danger#ff3141危险色（徽标 / 必填标记）。
--tu-info#969799信息色。
--tu-text#323233主文字色。
--tu-text-secondary#969799次级文字色。
--tu-border#ebedf0边框色（轨道 / 分隔线）。
--tu-background#f7f8fa输入框 / 搜索栏背景。
--tu-white#ffffff白色。
--tu-radius-sm / md / lg4 / 8 / 12px圆角等级。
--tu-popup-z-index1000弹层 / 轻提示层级。
--tu-duration300ms过渡动画时长。

Web 端

调用 injectTuTheme()（可在入口执行一次），向 <head> 注入 style[data-tu-theme] 的 :root 默认令牌；传入覆盖对象可自定义：

ts
import { injectTuTheme } from 'transone-ui';
injectTuTheme({ '--tu-primary': '#ff6600' });

也可不调用注入，直接在任意外层选择器覆盖同名变量（CSS 变量可继承）。

小程序端

小程序不支持运行时注入 CSS 变量，在 app.wxss 的 page 选择器中覆盖同名变量即可（需基础库支持 CSS 变量）：

css
page {
  --tu-primary: #ff6600;
  --tu-danger: #e60000;
}