主色系
-
primary:主品牌色,最常出现的强调色
-
onPrimary:放在 primary 上面的内容色
-
primaryContainer:主色的容器色,通常比 primary 更"柔和"
-
onPrimaryContainer:放在 primaryContainer 上的内容色
-
inversePrimary:反转场景里使用的主色,比如 Snackbar 之类需要和普通主题相反的地方
次色系
-
secondary:次级强调色,用来和主色区分开
-
onSecondary:放在 secondary 上的内容色
-
secondaryContainer:次级容器色
-
onSecondaryContainer:放在 secondaryContainer 上的内容色
第三色系
-
tertiary:第三强调色,用来平衡主色和次色,或者突出某个元素
-
onTertiary:放在 tertiary 上的内容色
-
tertiaryContainer:第三容器色
-
onTertiaryContainer:放在 tertiaryContainer 上的内容色
背景和表面
-
background:页面最底层背景
-
onBackground:放在背景上的文字/图标
-
surface:卡片、Sheet、菜单等组件的表面色
-
onSurface:放在表面上的内容色
-
surfaceVariant:surface 的变体,通常用于次级表面
-
onSurfaceVariant:放在 surfaceVariant 上的内容色
-
surfaceTint:用于"tonal elevation"的叠色,官方默认通常和 primary 相关
反转表面
-
inverseSurface:和普通 surface 对比强烈的反转表面
-
inverseOnSurface:放在 inverseSurface 上的内容色
错误色
-
error:错误提示色
-
onError:放在 error 上的内容色
-
errorContainer:错误容器色
-
onErrorContainer:放在 errorContainer 上的内容色
边界和遮罩
-
outline:边框/分割线的主边界色
-
outlineVariant:更弱一些的边界色,装饰性边界常用
-
scrim:遮罩色,用于弹窗、抽屉打开时盖住背景
Surface 容器系列
这些是 Material3 新增的"不同层级的表面容器":
-
surfaceBright
-
surfaceDim
-
surfaceContainer
-
surfaceContainerHigh
-
surfaceContainerHighest
-
surfaceContainerLow
-
surfaceContainerLowest