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 |
阴影色 |
用于提供阴影效果，增强立体感 |
MD3Palettes 接口
MD3Palettes 定义了主题的颜色调色板，包括各种色调的集合。
主色调（Primary）
| 属性名称 |
色调值 |
描述 |
用途 |
| primary |
0-100 |
主色调 |
用于按钮、开关等主色调背景 |
次色调（Secondary）
| 属性名称 |
色调值 |
描述 |
用途 |
| secondary |
0-100 |
次色调 |
用于按钮、开关等次色调背景 |
第三色（Tertiary）
| 属性名称 |
色调值 |
描述 |
用途 |
| tertiary |
0-100 |
第三色 |
用于按钮、开关等第三色调背景 |
错误色（Error）
| 属性名称 |
色调值 |
描述 |
用途 |
| error |
0-100 |
错误色 |
用于错误提示按钮、文本等 |
信息色（Info）
| 属性名称 |
色调值 |
描述 |
用途 |
| info |
0-100 |
信息色 |
用于信息提示按钮、文本等 |
警告色（Warning）
| 属性名称 |
色调值 |
描述 |
用途 |
| warning |
0-100 |
警告色 |
用于警告提示按钮、文本等 |
成功色（Success）
| 属性名称 |
色调值 |
描述 |
用途 |
| success |
0-100 |
成功色 |
用于成功提示按钮、文本等 |
中性色（Neutral）
| 属性名称 |
色调值 |
描述 |
用途 |
| neutral |
0-100 |
中性色 |
用于文本、图标等默认颜色 |
中性色变体（Neutral Variant）
| 属性名称 |
色调值 |
描述 |
用途 |
| neutralVariant |
0-100 |
中性色变体 |
用于提供中性色的变体，以增加层次感 |
常用颜色（Common）
| 属性名称 |
描述 |
用途 |
| black |
黑色 |
用于文本、图标等需要强调的地方 |
| white |
白色 |
用于背景、弹窗等需要高亮显示的地方 |
