Material3中primaryVariant与secondaryVariant变体颜色的替代方案咨询

Material3重构了颜色体系，移除了primaryVariant和secondaryVariant，可根据原颜色的使用场景选择以下替代方案：

primaryVariant 替代场景 #

• 主色深色/柔和变体场景（如Toolbar背景、选中导航项）：使用ColorScheme.primaryContainer，它是主色的规范深色变体，适配Material3组件设计；
• 主色高亮强调场景：直接基于ColorScheme.primary调整色调或透明度，例如colorScheme.primary.copy(brightness = Brightness.Dark)；
• 深色模式下主色反向对比：使用ColorScheme.inversePrimary，适合需要与主色背景形成鲜明对比的元素。

secondaryVariant 替代场景 #

• 次要色柔和变体场景：使用ColorScheme.secondaryContainer，对应原secondaryVariant的次要色变体定位；
• 次要色强调场景：基于ColorScheme.secondary调整透明度或色调，例如colorScheme.secondary.copy(alpha = 0.8f)；
• 次要色反向对比场景：使用ColorScheme.inverseSecondary，适配深色模式下的次要元素高亮。

代码示例对比 #

Material 原写法

MaterialTheme(
    colors = Colors(
        primary = Color(0xFF6200EE),
        primaryVariant = Color(0xFF3700B3),
        secondary = Color(0xFF03DAC6),
        secondaryVariant = Color(0xFF018786)
    )
) {
    Button(
        colors = ButtonDefaults.buttonColors(
            backgroundColor = MaterialTheme.colors.primaryVariant
        )
    ) {
        Text("Primary Variant Button")
    }
}

Material3 替代写法

MaterialTheme(
    colorScheme = lightColorScheme(
        primary = Color(0xFF6200EE),
        primaryContainer = Color(0xFF3700B3), // 替代primaryVariant
        secondary = Color(0xFF03DAC6),
        secondaryContainer = Color(0xFF018786) // 替代secondaryVariant
    )
) {
    Button(
        colors = ButtonDefaults.buttonColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer
        )
    ) {
        Text("Primary Container Button")
    }
}

如果需要自定义完整配色体系，推荐使用ColorScheme.fromSeed()方法，基于种子色自动生成符合Material3规范的全色板，避免手动调整颜色导致的不协调。

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