Material3 Color Harmonization in Jetpack Compose

Question

While using the view-based system, we can harmonize a color using the below code.

MaterialColors.harmonizeWithPrimary(context, colorToHarmonize)

In a project that is fully migrated to Jetpack Compose and all the color values are stored in the Color.kt file, how do you apply harmonization to color at runtime?

Answer 1

You can use the method

MaterialColors.harmonize(colorToHarmonize, colorToHarmonizeWith)

And harmonize your custom color with the primaryColor from the dynamic color scheme

MaterialColors.harmonize(customColor.toArgb(), MaterialTheme.colorScheme.primary.toArgb())

If you want to go the extra step you can provide the harmonized value(s) through CompositionLocalProvider to provide it down the composition, to match the way dynamic colors are provided by MaterialTheme.colorScheme.

I explored the issue a little more in this project: https://github.com/acolombo25/harmonized-colors-compose