I am learning Jetpack compose of Android Development.

Sometimes, I use

MaterialTheme.colors MaterialTheme.coloScheme

because one of them shows red.

For example,

Surface(
        color = MaterialTheme.colorScheme.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier
                .weight(1f)
                .padding(bottom = extraPadding)
            ) {
                Text(text = "Hello, ")
                Text(text = name)
            }
            ElevatedButton(
                onClick = { expanded.value = !expanded.value }
            ) {
                Text(if (expanded.value) "Show less" else "Show more")
            }
        }
    }

So, what's the difference and which one is better or how to use them properly?

CodePudding user response：

In Material 2 you would use one and in Material 3 the other. For instance:

Material 2:

    Surface(
    color = MaterialTheme.colors.surface,
    contentColor = contentColorFor(color),
    // ...

TopAppBar(
    backgroundColor = MaterialTheme.colors.primarySurface,
    contentColor = contentColorFor(backgroundColor),
    // ...

Material 3:

    Card(
    colors = CardDefaults.cardColors(
        containerColor =
        if (isSelected) MaterialTheme.colorScheme.primaryContainer
        else
            MaterialTheme.colorScheme.surfaceVariant)
) {
    Text(
        text = “Dinner club”,
        style = MaterialTheme.typography.bodyLarge,
        color =
        if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
        else MaterialTheme.colorScheme.onSurface, ),
        ….
        ….
}

CodePudding user response：

They are the same.

colors is available only on material 2 so when you use MaterialTheme.colors you will notice that MaterialTheme is imported from material with import androidx.compose.material.MaterialTheme

colorScheme is available only on material 3 so when you use MaterialTheme.colorScheme you will notice that MaterialTheme is imported from material3 with import androidx.compose.material3.MaterialTheme

So if you are using material 3 in your project make sure that you are working with colorScheme and if you are using material 2 make sure that you are using color.

CodePudding user response：

Basically ,

MaterialTheme.colorScheme.primary is part of Material 3 Design library.

MaterialTheme.colors.background is part of Legacy Material 2 Design Library.

Material 3 library for compose has additional features compared to Material 2.

CodePudding user response：

These are 2 different color selection systems. In material design 2 Color swatch that was between 100, and 900 was used. You can check out swatches in

When you select primary 500 and 700, for selecting secondary 200 and 700 variants are used

When you call androidx.compose.material.MaterialTheme.colors.x

you are getting these colors.

Material Design3

For Material Design 3 they invented a new color system(RGB, HSV, HSL) called HCT(hue-colorfulness-tone). If you are interested in details you can check out this

There is

The primary key color is used to derive roles for key components across the UI, such as the FAB, prominent buttons, active states, as well as the tint of elevated surfaces.

The secondary key color is used for less prominent components in the UI such as filter chips, while expanding the opportunity for color expression.

The tertiary key color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element. The tertiary color role is left for teams to use at their discretion and is intended to support broader color expression in products.

You can check out

Primary

Primary roles are used for key components across the UI, such as the FAB, prominent buttons, active states, as well as the tint of elevated surfaces.

Secondary

Secondary roles are used for less prominent components in the UI, such as filter chips, while expanding the opportunity for color expression.

Tertiary

Tertiary roles are used for contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element, such as an input field.

The tertiary color role is left for makers to use at their discretion and is intended to support broader color expression in products.

How are these in code are like this? As in mentioned above Composables pick respective color tokens, Buttons primary to match with your theme's set colors.

internal object FilledButtonTokens {
    val ContainerColor = ColorSchemeKeyTokens.Primary
    val ContainerElevation = ElevationTokens.Level0
    val ContainerHeight = 40.0.dp
    val ContainerShape = ShapeKeyTokens.CornerFull
    val DisabledContainerColor = ColorSchemeKeyTokens.OnSurface
    val DisabledContainerElevation = ElevationTokens.Level0
    const val DisabledContainerOpacity = 0.12f
    val DisabledLabelTextColor = ColorSchemeKeyTokens.OnSurface
    const val DisabledLabelTextOpacity = 0.38f
    val FocusContainerElevation = ElevationTokens.Level0
    val FocusLabelTextColor = ColorSchemeKeyTokens.OnPrimary
    val HoverContainerElevation = ElevationTokens.Level1
    val HoverLabelTextColor = ColorSchemeKeyTokens.OnPrimary
    val LabelTextColor = ColorSchemeKeyTokens.OnPrimary
    val LabelTextFont = TypographyKeyTokens.LabelLarge
    val PressedContainerElevation = ElevationTokens.Level0
    val PressedLabelTextColor = ColorSchemeKeyTokens.OnPrimary
    val DisabledIconColor = ColorSchemeKeyTokens.OnSurface
    const val DisabledIconOpacity = 0.38f
    val FocusIconColor = ColorSchemeKeyTokens.OnPrimary
    val HoverIconColor = ColorSchemeKeyTokens.OnPrimary
    val IconColor = ColorSchemeKeyTokens.OnPrimary
    val IconSize = 18.0.dp
    val PressedIconColor = ColorSchemeKeyTokens.OnPrimary
}