Jetpack compose theme color not applied

Question

I created to kt files MainActivity.kt and MainPage.kt, I pu my own colors in color.ket and refeerenced them in theme.kt

Omposables in MainActivity.kt get the right colors but MainPage.kt do not

I have a card in MainPage.kt:

Card(
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.onPrimary
    ),
    modifier = Modifier
        .clip(cardShape)
        .height(200.dp)
        .width(cardWidth)
        .border(
            width = 3.dp,
            color = MaterialTheme.colorScheme.secondaryContainer,
            shape = cardShape
        )
) {
    Column(modifier = Modifier.padding(start = 15.dp, top=10.dp)) {
        Text(text = "Info Card bottom")
    }
}

MaterialTheme.colorScheme.onPrimary (material3) should be greenish, but it gives me light purple.

Any ideas, plesae?

*** I am learning making android app and I probably just dd something wrong.

I deleted the original purple colors in color.kt so I do not know where that color comes from. I also pur dynamicColor to false in theme.kt

Slipcase

Answer 1

Try removing(or commenting) the following code snippet from the colorScheme in your Theme.kt file.

dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
    val context = LocalContext.current
    if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
}

It should be like:

val colorScheme = when {
    darkTheme -> darkColorScheme
    else -> lightColorScheme
}

Pacesetter

Answer 2

May be helpful:

Sometimes all you need is to set: dynamicColor: Boolean = false, in your AppTheme Composable in Theme.kt.

Rex

I don't know how to properly thank you for this correct answer. – Sontich

This helped me, thanks! Dynamic colors is the feature that override the app color based on user preference/wallpaper colors. Disabling this feature ensures the apps chosen colors are displayed instead. – Disallow

Answer 3

maybe it's a Material version problem.
Always try to make your testing code as simple as possible.
I had a similar problem. I mixed Material with Material3. Removing the library Material from the whole project and change everything to Material3 solved my problem.

To make it simple. I had following code and my color was not applied to the preview (and nowhere else):

@Composable
fun ImportExportPageContent(modifier: Modifier = Modifier) {
    Text(
        text = "Hello name!",
        modifier = modifier,
        color = MaterialTheme.color.secondary
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    EmptyJetpackComposeTheme {
        ImportExportPageContent()
    }
}

The problem was MaterialTheme.color is from Material (1.9.0).
I had following implementation for my Theme:

@Composable
fun EmptyJetpackComposeTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        darkTheme -> darkColorScheme(
            primary = Red,
            secondary = Green,
            tertiary = Green
        )
        else -> lightColorScheme(
            primary = Red,
            secondary = Green,
            tertiary = Green
        )
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

The class MaterialTheme is from androidx.compose.material3.
As you see, I set the colorScheme property. On the other side (In my Text) I called the MaterialTheme.color property.

Required Change: Change MaterialTheme.color to MaterialTheme.colorScheme from Material3.

Degrading

Answer 4

Could be any number of places that the connection is being lost. I'll just list a few palces to double check (Some of them you have mentioned already) -

• md_theme_light_onPrimary is set to the correct color in Color.kt
• onPrimaryContainer = md_theme_light_onPrimaryContainer, is assigned in your initialization for private val LightColors = lightColorScheme(). Usually in Theme.kt
• LightColors is used when initialising your MaterialTheme()
• Dynamic color is disabled
• Your composable is wrapped in your theme - MyTheme{ MyComposable() }

Also worth noting, that you don't need to specify the colors parameter for Card() if you're going to use the default color scheme assignments. Generally it's recommended to stick to the defaults to avoid color & contrast mistakes. Card by default uses surface for example

Celebration

Answer 5

For me, my ColorScheme object didn't have a surface color, after I added it, the whole app window became of BackgroundDark color:

private val LightColorScheme : ColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40,

    background = BackgroundDark,
    surface = BackgroundDark

   val colorScheme = when {
      darkTheme -> DarkColorScheme
      else -> LightColorScheme
    }

Slapstick