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?

I was able to find a codelab about this topic, but it uses XML views. https://codelabs.developers.google.com/harmonize-color-android-views#0 — ShadeToD, Sep 19 '22 at 07:16
@ShadeToD Yes, I also came across this concept through this codelab but wasn't able to find the same for Jetpack Compose. — Mehul Kanzariya, Sep 19 '22 at 13:42

score 1 · Answer 1 · answered Jun 18 '23 at 23:17

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

Material3 Color Harmonization in Jetpack Compose

1 Answers1