androidmaterial-designandroid-jetpack-composematerial-you

Surface at +(...)% colors in jetpack compose


In official Material Design 3 resources (e.g. the Figma design kit), there have been many references to colors called "Surface at +x". These colors are the surface color mixed with x% of the primary color.

Now my question:

How can you implement the "Surface at +x" colors in Jetpack Compose? There is no documentation and no property on the MaterialTheme.colorScheme object.

Figma Design Kit reference: Colors in the Figma Material Design 3 UI Kit


Solution

  • Surface uses MaterialTheme.colorScheme.surface by default, they also have a new tonalElevation property which you can read about here.

    The gist of it is that increasing the tonal elevation changes the color automatically, try it yourself:

    Surface(tonalElevation = 5.dp) {
        // content
    }