How to learn material 3 component attribute use case

Question

Can someone help me on Material 3. I found this two method darkColorScheme and lightColorScheme . When I checked the definition of this function I found so many colors used in the function. I am confused which one using where so, Is there any documentation or blog where this type of attribute is using i.e. secondaryContainer, tertiary etc. this is few example I want to learn each attribute where this is using according to their name. I am new in material design with jetpack compose.

user_2422224 · Answer

Jetpack Compose functions darkColorScheme and lightColorScheme help you set up a whole MD3 theme with all the color roles. You would want to set/define all colors if you want that background and foreground colors will work nicely together.

The mapping for colors can be found at https://m3.material.io/styles/color/the-color-system/color-roles

See the sections for Mapping accent colors and for Mapping neutral colors

However, you don't have to set all colors manually. If you want you can use the theme builder, and only choose your primary, secondary, tertiary and neutral color and the theme will be generated for you (there are also extended colors if you need more). If you export it for Jetpack Compose you will get both Theme.kt and Color.kt which you then copy and replace in your project. The calls to darkColorScheme and lightColorScheme will be already included with all colors already set as parameters. If you don't like any of the mapped colors, you can then customize the theme further in code.

The theme builder https://material-foundation.github.io/material-theme-builder/#/custom

The documentation on how to use themed colors is from this section and on https://developer.android.com/jetpack/compose/themes/material#theme-colors

Material Design 3 components (buttons, inputs, text) will by default already use themed colors based on the defined theme, light/dark modes and the surface they are on, so for common use cases you don't even need to set their colors through parameters or modifiers.

Edit: To preview various MD3 components quickly without the need to run the app you can use the @Preview annotation like this

@Preview("Light Mode")
@Preview("Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun MyScreenPreview() {
    NameOfYourTheme { // update this line with the name of your theme
        Surface {
            // place any Composable you want to preview here
            Column {
                Text("Preview test")
                Button(onClick = {}) {
                    Text("OK")
                }
            }
        }
    }
}

You can place this in any file you want and then just replace the contents with various MD3 components to see how they look in the preview section both in light and dark mode with your theme.

And if you want to see their default colors, then just remove the NameOfYourTheme { } block.

For the above this is what I get for my theme in the preview section (your colors will be different of course)

How to learn material 3 component attribute use case

1 Answers