m3颜色定义

张开发
2026/4/18 18:49:40 15 分钟阅读

分享文章

m3颜色定义
### 主色系- 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放在表面上的内容色- surfaceVariantsurface 的变体通常用于次级表面- 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

更多文章