Set the AccentColor for both Android and iOS

[Sinan-Karakaya]

Reading the doc, I could not find any way to set the Accent Color for both Android and iOS. Setting it up in the xcassets file only set it up for iOS. Is it possible, or did I miss something ?

[aabewhite]

You're correct that Skip does not support setting the accent color via the asset catalog. You can, however, apply the .tint modifier to any view to set the color for its entire view hierarchy. And Skip offers additional customization of the colors Android will use: https://skip.tools/docs/modules/skip-ui/#material-colors

[Sinan-Karakaya]

Unless I'm doing something wrong, this also only applies to the iOS version again? The android version doesn't seem to change when I apply a tint modifier to my top level View.

I also tried adding the theme in my android project as you would normally, but end up with those errors:

error: resource style/Theme.MaterialComponents.DayNight.NoActionBar (aka sinan.karakaya.skip.proto:style/Theme.MaterialComponents.DayNight.NoActionBar) not found.
     skip.proto.app-mergeDebugResources-65:/values/values.xml:1921: error: style attribute 'attr/colorPrimaryVariant (aka sinan.karakaya.skip.proto:attr/colorPrimaryVariant)' not found.
     skip.proto.app-mergeDebugResources-65:/values/values.xml:1922: error: style attribute 'attr/colorOnPrimary (aka sinan.karakaya.skip.proto:attr/colorOnPrimary)' not found.
     skip.proto.app-mergeDebugResources-65:/values/values.xml:1925: error: style attribute 'attr/colorSecondary (aka sinan.karakaya.skip.proto:attr/colorSecondary)' not found.
     skip.proto.app-mergeDebugResources-65:/values/values.xml:1926: error: style attribute 'attr/colorSecondaryVariant (aka sinan.karakaya.skip.proto:attr/colorSecondaryVariant)' not found.
     skip.proto.app-mergeDebugResources-65:/values/values.xml:1927: error: style attribute 'attr/colorOnSecondary (aka sinan.karakaya.skip.proto:attr/colorOnSecondary)' not found.
     error: failed linking references.

I haven't really looked into those yet tho.

[aabewhite]

We show .tint working in our Showcase sample app, so we're confident that it behaves similarly to SwiftUI. Can you give any details on what you're trying that isn't working?

I'm not sure what you're doing exactly when you say you're also trying to add your Android theme "as you would normally", but the methods I linked to in our documentation work.

[Sinan-Karakaya]

Ah, on a new project, I'm not getting the same behaviour for some reasons.

After adding .tint to my ContentView at root, I got a different result for some reason, but some issues still persist.

• First of all, this only works on values that are not from the assets like you mentioned (so accentColor won't work on Android)
• And also, when using standards colours like .red, I would get some elements that would not follow the tint, such as the TabBar

So unfortunately, I had to go and follow the documentation. I ended up with this code:

@Composable
internal fun PresentationRootView(context: ComposeContext) {
    val primaryColor = Color(Double(255), Double(56), Double(132)).asComposeColor()
    //val primaryColor = Color(0xFF3884).asComposeColor()

    // Define the custom color scheme using Material3ColorScheme
    Material3ColorScheme(
        scheme = { colors, _ /* isDark */ ->
            // Customize the surface color based on dark mode
            colors.copy(
                background = Color.white.asComposeColor(),
                primary = primaryColor,
                onBackground = Color.black.asComposeColor(),
                onPrimary = Color.white.asComposeColor(),
                surfaceContainer = Color.white.asComposeColor(),
                surface = Color.white.asComposeColor(),
                onSurface = Color.black.asComposeColor(),
                onSurfaceVariant = Color.black.asComposeColor()
            )
        },
        content = {
            // The original content wrapped inside the custom color scheme
            PresentationRoot(defaultColorScheme = ColorScheme.dark, context = context) { ctx ->
                val contentContext = ctx.content()
                Box(modifier = ctx.modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                    RootView().Compose(context = contentContext)
                }
            }
        }
    )
}

However, my custom primary color end up looking white, when it should be pink. Is there any reason why ? I did tested by replacing the primaryColor by something like Color.green and it worked fine.