Material Design 3 主题配置说明
简介
Material Design 3 (MD3) 主题配置提供了一套完整的接口定义，用于构建符合MD3设计规范的主题。这包括颜色调色板、亮色和暗色模式的颜色方案等。
代码示例
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 |
阴影色 |
