Material Theming: Android Basics with Compose - Theme colors not applying to Card Composable

[ParaMigi]

URL of codelab
https://developer.android.com/codelabs/basic-android-kotlin-compose-material-theming?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-3-pathway-3%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-material-theming#3

In which task and step of the codelab can this issue be found?
4: Add color

Describe the problem
The Card Composable does not use the correct color. It uses surfaceContainerHigh, which you forgot to define, so it defaults to some kind of purple. In fact, there are some additional colors you forgot to define. In the Theme.kt file:

    surfaceBright = md_theme_light_surfaceBright,
    surfaceContainer = md_theme_light_surfaceContainer,
    surfaceContainerHigh = md_theme_light_surfaceContainerHigh,
    surfaceContainerHighest = md_theme_light_surfaceContainerHighest,
    surfaceContainerLow = md_theme_light_surfaceContainerLow,
    surfaceContainerLowest = md_theme_light_surfaceContainerLowest,
    surfaceDim = md_theme_light_surfaceDim
    
    surfaceBright = md_theme_dark_surfaceBright,
    surfaceContainer = md_theme_dark_surfaceContainer,
    surfaceContainerHigh = md_theme_dark_surfaceContainerHigh,
    surfaceContainerHighest = md_theme_dark_surfaceContainerHighest,
    surfaceContainerLow = md_theme_dark_surfaceContainerLow,
    surfaceContainerLowest = md_theme_dark_surfaceContainerLowest,
    surfaceDim = md_theme_dark_surfaceDim

and in the Color.kt file:

val md_theme_light_surfaceBright = Color(0xfff5fbf5)
val md_theme_light_surfaceContainer = Color(0xffeaefea)
val md_theme_light_surfaceContainerHigh = Color(0xFFe4eae4)
val md_theme_light_surfaceContainerHighest = Color(0xFFdee4de)
val md_theme_light_surfaceContainerLow = Color(0xFFeff5ef)
val md_theme_light_surfaceContainerLowest = Color(0xFFffffff)
val md_theme_light_surfaceDim = Color(0xFFd6dbd6)

val md_theme_dark_surfaceBright = Color(0xFF353b37)
val md_theme_dark_surfaceContainer = Color(0xFF1b211e)
val md_theme_dark_surfaceContainerHigh = Color(0xFF252b28)
val md_theme_dark_surfaceContainerHighest = Color(0xFF303632)
val md_theme_dark_surfaceContainerLow = Color(0xFF171d1a)
val md_theme_dark_surfaceContainerLowest = Color(0xFF0a0f0c)
val md_theme_dark_surfaceDim = Color(0xFF0f1512)

(I'm not going to make all the letters in the hex code capitals, you can do that yourself, these were taken directly from the Material Theme Builder)

Steps to reproduce?
N.A.

Versions
Android Studio version: android-studio-2024.3.1.14-windows
API version of the emulator: N.A.

Additional information
Include screenshots if they would be useful in clarifying the problem.
N.A.

[qwe5283]

I downloaded the solution code and found it uses 1.1.0 material library, on the contrary, the starter code uses 1.3.1.🤔However, there are somethings different of its implementations, 1.3.1 library relies on an internal cached value, computed once. I think that's the reason for the problem👀

this is the implementations of 1.1.0

@Composable
    fun cardColors(
        containerColor: Color = FilledCardTokens.ContainerColor.toColor(),
        contentColor: Color = contentColorFor(containerColor),
        disabledContainerColor: Color =
            FilledCardTokens.DisabledContainerColor.toColor()
                .copy(alpha = FilledCardTokens.DisabledContainerOpacity)
                .compositeOver(
                    MaterialTheme.colorScheme.surfaceColorAtElevation(
                        FilledCardTokens.DisabledContainerElevation
                    )
                ),
        disabledContentColor: Color = contentColorFor(containerColor).copy(DisabledAlpha),
    ): CardColors = CardColors(
        containerColor = containerColor,
        contentColor = contentColor,
        disabledContainerColor = disabledContainerColor,
        disabledContentColor = disabledContentColor
    )

and this is the implementations of 1.3.1

@Composable fun cardColors() = MaterialTheme.colorScheme.defaultCardColors

internal val ColorScheme.defaultCardColors: CardColors
        get() {
            return defaultCardColorsCached
                ?: CardColors(
                        containerColor = fromToken(FilledCardTokens.ContainerColor),
                        contentColor = contentColorFor(fromToken(FilledCardTokens.ContainerColor)),
                        disabledContainerColor =
                            fromToken(FilledCardTokens.DisabledContainerColor)
                                .copy(alpha = FilledCardTokens.DisabledContainerOpacity)
                                .compositeOver(fromToken(FilledCardTokens.ContainerColor)),
                        disabledContentColor =
                            contentColorFor(fromToken(FilledCardTokens.ContainerColor))
                                .copy(DisabledAlpha),
                    )
                    .also { defaultCardColorsCached = it }
        }

maybe you can try to pass colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant) as the value of card composable🎉

[hashasino]

You hit the problem cause spot on @qwe5283 . This is indeed the reason why we have been facing this problem.

Btw, how were you able to infer which material library version those two implementation are from? I can't seem to find it.

[hashasino]

I have been trying to pinpoint when the exact change happened in material3 due of which we have been facing this theming problem of ours. Getting to know about BOM recently helped me further narrow the scope of search.

I found that that last time the cardColors used FilledCardTokens instead of Color.Unspecified and an internal cached value was in BOM 2024.01.00 (material3 v1.1.2). The change happened in 2024.02.00 (material3 v1.2.0).

But this doesn't seem to be why our custom material themes don't seem to apply to the apps. The material theming seem to work fine until BOM 2024.08.00 (material3 v1.2.1). It's only after 2024.09.00 (material3 v1.3.0) and above that the theming problems start happening (as per my experimentation).

And actually this is the BOM version (2024.09.00) that Android Studio has been implementing for any new project that you may create. And so the same theming problem is happening in those as well.

TLDR; set your compose bom version in libs.versions.toml to 2024.08.00 and the theming should work fine. That's what I'm going to do for my projects as well now.

p.s. Would appreciate any help about further finding any clues for the reason for this problem from you guys :)