Unable to see Cupertino components on iOS

[schott12521]

I'm using both this guide and the example to try and build the exact same application as the guide, a KMP project that has 2 tabs and a couple components.

On Android everything looks great, very material. On iOS, I see this, it's like a mix between material and cupertino?

My code is more or less exactly as the example/guide, from what I can tell:

@Composable
@OptIn(ExperimentalAdaptiveApi::class)
fun AppTheme(
    theme: Theme = determineTheme(),
    content: @Composable () -> Unit
) {
    AdaptiveTheme(
        target = theme,
        material = MaterialThemeSpec.Default(),
        cupertino = CupertinoThemeSpec.Default(),
        content = content
    )
}

which is used here:

import androidx.compose.foundation.layout.padding
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Info
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import io.github.alexzhirkevich.cupertino.adaptive.AdaptiveAlertDialog
import io.github.alexzhirkevich.cupertino.adaptive.AdaptiveNavigationBar
import io.github.alexzhirkevich.cupertino.adaptive.AdaptiveNavigationBarItem
import io.github.alexzhirkevich.cupertino.adaptive.AdaptiveScaffold
import io.github.alexzhirkevich.cupertino.adaptive.AdaptiveTopAppBar
import io.github.alexzhirkevich.cupertino.adaptive.ExperimentalAdaptiveApi
import io.github.alexzhirkevich.cupertino.default

@OptIn(ExperimentalAdaptiveApi::class, ExperimentalMaterial3Api::class)
@Composable
fun App() {

    AppTheme {
        var activeTab by remember { mutableStateOf(Tabs.Home) }
        var showDialog by remember { mutableStateOf(false) }

        if (showDialog) {
            AdaptiveAlertDialog(
                title = { Text("Contact info") },
                message = { Text("Contact info could be here!") },
                buttons = {
                    default(onClick = { showDialog = false }) { Text("OK") }
                },
                onDismissRequest = { showDialog = false }
            )
        }

        AdaptiveScaffold(
            topBar = {
                AdaptiveTopAppBar(
                    title = { Text("Cupertino Sample") },
                    actions = {
                        IconButton(onClick = { showDialog = true }) {
                            Icon(Icons.Filled.Email, contentDescription = null)
                        }
                    }
                )
            },
            bottomBar = {
                AdaptiveNavigationBar {
                    AdaptiveNavigationBarItem(
                        selected = activeTab == Tabs.Home,
                        icon = { Icon(Icons.Filled.Home, contentDescription = null) },
                        label = { Text("Home") },
                        onClick = { activeTab = Tabs.Home }
                    )
                    AdaptiveNavigationBarItem(
                        selected = activeTab == Tabs.About,
                        icon = { Icon(Icons.Filled.Info, contentDescription = null) },
                        label = { Text("Settings") },
                        onClick = { activeTab = Tabs.About }
                    )
                }
            }
        ) {
            when (activeTab) {
                Tabs.Home -> MainTab(Modifier.padding(it))
                Tabs.About -> AboutTab(Modifier.padding(it))
            }
        }
    }
}

enum class Tabs {
    Home, About
}

and finally, my actual definition for iOS:

import io.github.alexzhirkevich.cupertino.adaptive.Theme

actual fun determineTheme(): Theme = Theme.Material3

For clarity, the issue is that beyond the "Click me!" buttons, the rest of the UI elements on screen appear to be in Material as opposed to Cupertino; although the theme is properly set to Cupertino.

For reference, this is on version: 0.1.0-alpha04

I'm loving the library, thank you for making this.

[schott12521]

Okay here's what I think is a better representation of the issue, this is my theme:

@Composable
@OptIn(ExperimentalAdaptiveApi::class)
fun AppTheme(
    content: @Composable () -> Unit
) {
    AdaptiveTheme(
        material = MaterialThemeSpec.Default(),
        cupertino = CupertinoThemeSpec.Default(
            colorScheme = darkColorScheme()
        ),
        content = content
    )
}

And this is how its appearing for me:

Here we can see that something doesn't look exactly right, but I'm probably doing something wrong!