Jetpack Compose not taking the colorScheme

Question

I have an android app written in Jetpack Compose. I am trying to set Icon colors using the defined colorScheme in my app, but it's not working.

Below is my code.

Color.kt

import androidx.compose.ui.graphics.Color

val green = Color(0xFF61FF67)

Theme.kt

private val MesColorDark = darkColorScheme(
        primary = green,
        secondary = green,
        tertiary = green,
        surface = green
)

private val MesColorLight = lightColorScheme(
        primary = green,
        secondary = green,
        tertiary = green,
        surface = green
)

@Composable
fun MesTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val mesColorScheme =
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        } else {
            if (darkTheme) MesColorDark else MesColorLight
        }

    MaterialTheme(
        colorScheme = mesColorScheme,
        typography = MesTypography,
        content = content
    )
}

colors.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>
    <!-- Status bar -->
    <color name="black30">#4D000000</color>
</resources>

themes.xml

<resources>

    <style name="Platform.Theme.Mes" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:statusBarColor">@color/black30</item>
    </style>

    <style name="Theme.Mes" parent="Platform.Theme.Mes" />

</resources>

Then I have an icon defined as such:

Icon(
imageVector = Icons.Outlined.Phone,
contentDescription = "Open navigation drawer",
tint = MaterialTheme.colorScheme.primary
)

This is the output:

As you can see, this color has not been defined in the color scheme. Even if I use surface, background etc... it still doesn't become green

However, if i use this code instead:

Icon(
imageVector = Icons.Outlined.Phone,
contentDescription = "Open navigation drawer",
tint = Colors.Green
)

It changes to this:

Can someone please help on why the colorScheme is not working ?

Guitarist

Answer 1

val mesColorScheme = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
    val context = LocalContext.current
    if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
} else {
    if (darkTheme) DarkColorScheme else LightColorScheme
}

Please check the above code in Theme.kt file. Since you are using Android S or greater, dynamic color will be enabled. Please change that code like below.

val mesColorScheme = if (darkTheme) DarkColorScheme else LightColorScheme

Beaux

I am using material3, so colors has been changed to colorScheme. And yes my root app is inside MesTheme { } – Guitarist

@MervinHemaraju Please check the updated answer. I verified it. It works. – Beaux

Oh yeah this is working! But my app works from Q and above. If I understand correctly, your answer works for S and above. So how do i fix this ? – Guitarist

Only In the devices that are S or above will have Dynamic Colors enabled. In the older devices it will work fine. we are just disabling Dynamic colors for all the devices. So In all the devices, the colors will be as expected. – Beaux

Ohh okay. What was the purpose of the dynamic colors then ? Why does google use that in the default project creation ? – Guitarist

Please check this link to get an overview about the dynamic colors – Beaux

Oh yeah I completely forgot about the new Material You! Thank you so much for helping out – Guitarist

Answer 2

I had a similar issue, that took me some time to figure out. I'm providing my own colors and typography. The problem was that my typography references the colors from the theme.

@Composable
fun MyTheme(content: @Composable () -> Unit) {
    val isSystemInDarkTheme = isSystemInDarkTheme()
    val colors = if (isSystemInDarkTheme) DarkColors else LightColors
    val typography = getTypography()

    CompositionLocalProvider(
        LocalColors provides colors,
        LocalTypography provides typography,
        ) {
            MaterialTheme(
                content = content,
                colors = colors
            )
        }
   }

when I changed it to this, it worked!

@Composable
fun MyTheme(content: @Composable () -> Unit) {
    val isSystemInDarkTheme = isSystemInDarkTheme()
    val colors = if (isSystemInDarkTheme) DarkColors else LightColors

    CompositionLocalProvider(
        LocalColors provides colors,
    ) {
        val typography = getTypography()
        CompositionLocalProvider(
            LocalTypography provides typography,
        ) {
            MaterialTheme(
                content = content,
                colors = colors
            )
        }
    }
}

Accumulation

Answer 3

Add onPrimary like this

private val MesColorDark = darkColorScheme(
    primary = green,
    onPrimary = green,
    primaryContainer =green,
    onPrimaryContainer = green
)

Schist

Tried it and it's still not working... – Guitarist

Answer 4

@Preview(apiLevel = 30, // The API level should be 30 or below for Jetpack Compose to pick the colors from the color schema.)
@Composable
    fun MyComposable() {
        MyTheme {....}
                       }

Stonge

Answer 5

As of today, the app theme created by the starting project (ui/theme/Theme.kt) includes a dynamicColor parameter which determines if the app should calculate the colors dynamically. If you disable it, getting colors from MaterialTheme.colorScheme will work:

// MainActivity.ky

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    // ...
    setContent {
      MyAppTheme(dynamicColor = false) {
        // ...
      }
    }
  }
}

Diet