Material Theming: Android Basics with Compose

[Mohamedahmed-Abdelgadir]

[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?
Task: Add a color
Step: Color Mapping

Describe the problem
Cards don't use the surfaceVariant color automatically. I had to specify it in the code:

       Card(
        modifier = modifier,
        colors = CardDefaults.cardColors(MaterialTheme.colorScheme.surfaceVariant)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(dimensionResource(id = R.dimen.padding_small))
        ) {
            DogIcon(dog.imageResourceId)
            DogInformation(dog.name, dog.age)
        }
    }

Steps to reproduce?
Just follow the codelab normally, and add the card without explicitly specifying a color for it.

Versions
Android Studio version: Narwhal 2025.1.1 Patch 1
API version of the emulator: API 36.0-ext18

Additional information

Without explicitly specifying surfaceVariant for the cards:

After specifying it:

[hashasino]

Yes this is indeed the way to solve the problem simply. However, if you're curious about the root cause for this, check out @qwe5283 's explanation: #132 (comment)