129 lines
5.1 KiB
Markdown
129 lines
5.1 KiB
Markdown
# Material Design 3 主题配置说明
|
||
|
||
## 简介
|
||
|
||
Material Design 3 (MD3) 主题配置提供了一套完整的接口定义，用于构建符合MD3设计规范的主题。这包括颜色调色板、亮色和暗色模式的颜色方案等。
|
||
|
||
### 代码示例
|
||
|
||
```typescript
|
||
import { generateTheme } from './generateTheme';
|
||
|
||
const theme = generateTheme({
|
||
primary: '#FF6F00',
|
||
secondary: '#00B0FF',
|
||
tertiary: '#00C853',
|
||
error: '#B00020',
|
||
info: '#304FFE',
|
||
warning: '#FF9100',
|
||
success: '#00C853',
|
||
neutral: '#000000',
|
||
neutralVariant: '#757575',
|
||
});
|
||
```
|
||
|
||
### 返回值
|
||
|
||
生成的主题对象包含以下属性：
|
||
|
||
| 属性名称 | 描述 |
|
||
| ----------- | -------------------- |
|
||
| palette | 主题的颜色调色板 |
|
||
| lightScheme | 亮色模式下的颜色方案 |
|
||
| darkScheme | 暗色模式下的颜色方案 |
|
||
|
||
## MD3ColorSchemeTokens 接口
|
||
|
||
`MD3ColorSchemeTokens` 定义了颜色方案的详细配置，包括亮色模式和暗色模式。
|
||
|
||
### 主色（Primary）
|
||
|
||
| 属性名称 | 描述 |
|
||
| ------------------ | ------------------------------ |
|
||
| primary | 主色 |
|
||
| onPrimary | 主色上的文本和图标颜色 |
|
||
| primaryContainer | 主色容器颜色 |
|
||
| onPrimaryContainer | 主色容器颜色上的文本和图标颜色 |
|
||
|
||
### 次色（Secondary）
|
||
|
||
| 属性名称 | 描述 |
|
||
| -------------------- | ------------------------------ |
|
||
| secondary | 次色 |
|
||
| onSecondary | 次色上的文本和图标颜色 |
|
||
| secondaryContainer | 次色容器颜色 |
|
||
| onSecondaryContainer | 次色容器颜色上的文本和图标颜色 |
|
||
|
||
### 第三色（Tertiary）
|
||
|
||
| 属性名称 | 描述 |
|
||
| ------------------- | -------------------------------- |
|
||
| tertiary | 第三色 |
|
||
| onTertiary | 第三色上的文本和图标颜色 |
|
||
| tertiaryContainer | 第三色容器颜色 |
|
||
| onTertiaryContainer | 第三色容器颜色上的文本和图标颜色 |
|
||
|
||
### 错误色（Error）
|
||
|
||
| 属性名称 | 描述 |
|
||
| ---------------- | ------------------------------ |
|
||
| error | 错误色 |
|
||
| onError | 错误色上的文本和图标颜色 |
|
||
| errorContainer | 错误容器颜色 |
|
||
| onErrorContainer | 错误容器颜色上的文本和图标颜色 |
|
||
|
||
### 信息色（Info）
|
||
|
||
| 属性名称 | 描述 |
|
||
| --------------- | ------------------------------ |
|
||
| info | 信息色 |
|
||
| onInfo | 信息色上的文本和图标颜色 |
|
||
| infoContainer | 信息容器颜色 |
|
||
| onInfoContainer | 信息容器颜色上的文本和图标颜色 |
|
||
|
||
### 警告色（Warning）
|
||
|
||
| 属性名称 | 描述 |
|
||
| ------------------ | ------------------------------ |
|
||
| warning | 警告色 |
|
||
| onWarning | 警告色上的文本和图标颜色 |
|
||
| warningContainer | 警告容器颜色 |
|
||
| onWarningContainer | 警告容器颜色上的文本和图标颜色 |
|
||
|
||
### 成功色（Success）
|
||
|
||
| 属性名称 | 描述 |
|
||
| ------------------ | ------------------------------ |
|
||
| success | 成功色 |
|
||
| onSuccess | 成功色上的文本和图标颜色 |
|
||
| successContainer | 成功容器颜色 |
|
||
| onSuccessContainer | 成功容器颜色上的文本和图标颜色 |
|
||
|
||
### 背景和表面（Background and Surface）
|
||
|
||
| 属性名称 | 描述 |
|
||
| ----------------------- | ---------------------------- |
|
||
| background | 背景色 |
|
||
| onBackground | 背景色上的文本和图标颜色 |
|
||
| surface | 表面色 |
|
||
| onSurface | 表面色上的文本和图标颜色 |
|
||
| surfaceVariant | 表面变体色 |
|
||
| onSurfaceVariant | 表面变体色上的文本和图标颜色 |
|
||
| surfaceContainerLowest | 最低表面容器颜色 |
|
||
| surfaceContainerLow | 低表面容器颜色 |
|
||
| surfaceContainer | 表面容器颜色 |
|
||
| surfaceContainerHigh | 高表面容器颜色 |
|
||
| surfaceContainerHighest | 最高表面容器颜色 |
|
||
|
||
### 其他（Others）
|
||
|
||
| 属性名称 | 描述 |
|
||
| ---------------- | ---------------------------- |
|
||
| inverseSurface | 反色表面色 |
|
||
| inverseOnSurface | 反色表面色上的文本和图标颜色 |
|
||
| inversePrimary | 反色主色 |
|
||
| surfaceTint | 表面色调 |
|
||
| outline | 轮廓色 |
|
||
| outlineVariant | 轮廓变体色 |
|
||
| shadow | 阴影色 |
|