I’m trying to use <https://github.com/alexzhirkevich/compose-cupertino> adaptive theme. However, I’m...

# compose

[Pavel S]

I’m trying to use https://github.com/alexzhirkevich/compose-cupertino adaptive theme. However, I’m not sure why when theme is equal to Theme.Material3 , the cupertino = { CupertinoTheme(//.. callback is called and vice-versa. Is this how it’s supposed to work? How to use dynamic colors in this case if dynamicLightColorScheme dynamicDarkColorScheme are android specific functions that return material3.ColorScheme and not cupertino.theme.ColorScheme? What do I need to do to just use cupertino theme on ios and material on android?

[Colton Idle]

I think the authors intent is for you to provide the theme via a expect/actual property.

[Colton Idle]

I agree though that the docs/usage is a bit unclear. THe author does come around kotlinlang slack too!

[Alexander Zhirkevich]

You must use a lambda parameter as content instead of content variable inside theme blocks. It described in the docs and AdaptiveTheme KDoc

[Alexander Zhirkevich]

image.png

[Alexander Zhirkevich]

There will be a new release this weekend that will simplify this part

[Pavel S]

Also, when using the adaptive theme and material theme for android, what color is used for the background? I feel like it’s not the same as in the regular material theme

[Pavel S]

For some reason the background became pure black in the dark theme and pure white in the light theme (regardless of the colors I use in my theme), but other components did change accordingly

[Alexander Zhirkevich]

It depends on components that represent your background (surfaces, scaffolds)

[Pavel S]

The base background is Surface

[Alexander Zhirkevich]

Material surface will take material background

[Pavel S]

But the color doesn’t work at all on it, even if you hardcode

[Alexander Zhirkevich]

There is no adaptive surface

[Alexander Zhirkevich]

Submit an issue with a reproducer

[Pavel S]

I see why the background color was not as I had expected. It uses systemBackground token for it, even when Material3 theme is used, not sure why. Below is the code I’m using to configure the theme. I set the background color to 🟥 in Material scheme and systemBackground to 🟩 in Cupertino scheme. My expectation was that the background would be 🟥 on android and 🟩 on iOS. However the result is on the screenshots, both end up using the CupertinoTheme

@OptIn(ExperimentalAdaptiveApi::class)
@Composable
fun AppTheme(
    isDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit,
) {
    val colorScheme = if (isDarkTheme) {
        darkColorScheme(background = Color.Red)
    } else {
        lightColorScheme(background = Color.Red)
    }
    val cupertinoColorScheme = if (isDarkTheme) {
        io.github.alexzhirkevich.cupertino.theme.darkColorScheme(systemBackground = Color.Green)
    } else {
        io.github.alexzhirkevich.cupertino.theme.lightColorScheme(systemBackground = Color.Green)
    }
    AdaptiveTheme(
        target = theme,
        material = { theContent ->
            MaterialTheme(
                colorScheme = colorScheme,
                content = theContent,
            )
        },
        cupertino = { theContent ->
            CupertinoTheme(
                colorScheme = cupertinoColorScheme,
                content = theContent,
            )
        },
        content = content,
    )
}

[Pavel S]

image.png,image.png

[Alexander Zhirkevich]

OK. AdaptiveScaffold uses systemBackground for both themes. It will be fixed in upcoming release

[Pavel S]

I’ve created this issue. Made some adjustments compared to the previous screenshots