Material 3自定义颜色：如何程序化生成色调调色板？

当然可以通过程序化方式，基于给定的协调色生成符合Material 3规范的色调调色板，进而替换整个主题的配色方案。

原示例代码的问题 #

你提供的示例只是单一替换了surfaceVariant的颜色，这种方式不仅效率低，还破坏了Material 3颜色系统的协调性——不同颜色项之间的色调、对比度关系没有遵循设计规范，容易出现视觉不协调或 accessibility 问题。

正确实现步骤 #

1. 生成色调调色板
   使用Material 3提供的TonalPalette.fromColor()方法，传入你的自定义协调色，就能生成包含从0到100不同色调值的调色板，覆盖从最浅到最深的颜色变化。

2. 构建自定义配色方案
   基于生成的调色板，你可以选择：

   • 复制现有ColorScheme并替换指定颜色项（保留其他默认配色）
   • 直接用调色板构建全新的ColorScheme

3. 应用到MaterialTheme
   将新的ColorScheme传入MaterialTheme，整个主题的相关组件都会自动使用这套协调的配色。

修改后的示例代码 #

@Composable
fun CardCustomPaletteExample(
    customColor: Color = Color.Red
) {
    // 从自定义协调色生成完整色调调色板
    val customPalette = TonalPalette.fromColor(customColor)
    
    // 基于原主题配色，替换需要的颜色项（遵循Material 3色调规范）
    val customColorScheme = MaterialTheme.colorScheme.copy(
        primary = customPalette.get(40),       // 主色调常用40值
        onPrimary = customPalette.get(100),    // 主色调文本用100（浅色文本）
        primaryContainer = customPalette.get(90), // 主容器用90
        onPrimaryContainer = customPalette.get(10), // 主容器文本用10
        surfaceVariant = customPalette.get(90), // 变体表面用90
        onSurfaceVariant = customPalette.get(30) // 变体表面文本用30
        // 可根据需求添加更多配色项替换
    )
    
    MaterialTheme(colorScheme = customColorScheme) {
        Card() {
            Text(text = "Hello, world!")
        }
    }
}

@Preview
@Composable
private fun PreviewCustomPalette() {
    CardCustomPaletteExample()
}

进阶：构建完整配色方案 #

如果需要完全替换整个配色系统，也可以直接用ColorScheme.from()方法，基于调色板生成整套配色：

val customColorScheme = ColorScheme.from(
    primaryPalette = customPalette,
    secondaryPalette = TonalPalette.fromColor(Color.Blue), // 可选：自定义次要调色板
    isLight = MaterialTheme.colorScheme.isLight // 继承原主题的明暗模式
)

内容的提问来源于stack exchange，提问作者BPDev