定制主题
通过 ConfigProvider 设置组件的主题。通常只需调整主题色、基础圆角和控件高度，其余样式会自动配合。
从几个设置开始
在应用最外层放置 ConfigProvider，并引入一次组件样式：
import { Button, ConfigProvider, Input } from '@sudden3/leaf-ui';
import '@sudden3/leaf-ui/styles.css';
export function App() {
return (
<ConfigProvider theme={{
primaryColor: '#7654c6',
borderRadius: 8,
controlHeight: 34,
}}>
<Input aria-label="项目名称" placeholder="项目名称" />
<Button>保存</Button>
</ConfigProvider>
);
}
未传入的选项使用默认值。悬停、按下、浅色背景和焦点颜色会跟随主题色，不需要分别配置。
试试你的风格
调整颜色、圆角、高度和外观，预览会立即更新。复制生成的 ConfigProvider 代码即可应用到自己的页面。
LESS, BUT BETTER一点绿意，很多可能。
从小小的交互开始，构建属于你的界面。
Solid
Soft
Outline
Ghost
自动生成大小尺寸
默认基础圆角为 10px，单行控件高度为 34px，字号为 14px。修改基础值后，其他尺寸会同步调整：
数字表示像素，也可以传入带单位的 CSS 长度。按钮、输入框和选择器共用这套尺寸，放在一起时保持一致。
局部主题与嵌套
ConfigProvider 可以包裹整个应用，也可以只包裹一个区域。内层只覆盖明确设置的选项：
<ConfigProvider theme={{ primaryColor: '#20834a', controlHeight: 36 }}>
<Button>默认区域</Button>
<ConfigProvider theme={{ primaryColor: '#7654c6', borderRadius: 16 }}>
<Button>活动区域</Button>
</ConfigProvider>
</ConfigProvider>
浮层、Modal 和区域内的 message / confirm contextHolder 会继承相同的主题。语言通过 ConfigProvider 的 locale 单独设置。
深色外观与动态切换
使用 appearance 切换浅色与深色；主题是普通 React 属性，可以用状态动态更新：
import { useState } from 'react';
import { Button, ConfigProvider } from '@sudden3/leaf-ui';
export function ThemeSwitch() {
const [dark, setDark] = useState(false);
return (
<ConfigProvider theme={{ appearance: dark ? 'dark' : 'light' }}>
<Button onClick={() => setDark(!dark)}>切换外观</Button>
</ConfigProvider>
);
}
深色外观会提供适合深色表面的文字、边框和状态色。显式设置的主题色保留原值；很浅的品牌色可以在高级配置中搭配 onPrimaryColor。
有特殊需求时再覆盖
theme.tokens 可以单独调整自动生成的尺寸、语义色、表面色、文字色、动效或浮层层级：
import type { LeafTheme } from '@sudden3/leaf-ui';
const theme: LeafTheme = {
controlHeight: 36,
borderRadius: 8,
tokens: {
controlHeightSm: 28,
borderRadiusLg: 18,
infoColor: '#1677ff',
motionDuration: 200,
},
};
手动设置的小 / 大尺寸优先于自动生成的值。嵌套配置按字段合并，包括 tokens；未覆盖的配置继续继承。完整选项见 LeafThemeTokens。
motion: false 关闭过渡并暂停加载图标的旋转。系统的“减少动态效果”偏好仍会生效。
在自己的组件中复用样式
CSS 变量用于读取当前区域的主题，方便自己编写的组件与 Leaf UI 保持一致。调整库组件的主题时使用 ConfigProvider；在业务 CSS 中通过 var() 消费这些变量：
<ConfigProvider theme={{ primaryColor: '#7654c6', borderRadius: 8 }}>
<button className="product-button" type="button">自己的按钮</button>
<Button>Leaf UI 按钮</Button>
</ConfigProvider>
.product-button {
min-height: var(--leaf-control-height);
padding: 0 14px;
border: 0;
border-radius: var(--leaf-radius);
background: var(--leaf-color-primary);
color: var(--leaf-color-on-primary);
font-family: var(--leaf-font-family);
font-size: var(--leaf-font-size);
font-weight: var(--leaf-font-weight);
cursor: pointer;
}
业务组件需要位于相应的 ConfigProvider 区域内，才能读取该区域的主题。使用者只需引入编译好的 styles.css，无需安装 Sass。
服务端渲染
静态 CSS 与动态主题可以一起使用，不需要运行时生成 CSS。Next.js 与其他 SSR 框架的接入方法见 SSR 使用。
