Jetpack Compose 不采用 colorScheme

Question

我有一个用 Jetpack Compose 编写的 Android 应用程序。我正在尝试使用应用程序中定义的 colorScheme 设置图标颜色，但它不起作用。

下面是我的代码。

颜色.kt

import androidx.compose.ui.graphics.Color

val green = Color(0xFF61FF67)

主题.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
    )
}

颜色.xml

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

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

主题.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>

然后我有一个这样定义的图标：

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

这是输出：

如您所见，配色方案中尚未定义此颜色。即使我使用

surface

，

background

等...它仍然不会变成绿色

但是，如果我使用此代码：

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

变成这样：

有人可以帮忙解释为什么 colorScheme 不起作用吗？

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
}

请检查Theme.kt文件中的上述代码。由于您使用的是 Android S 或更高版本，因此将启用动态颜色。请像下面这样更改该代码。

val mesColorScheme = if (darkTheme) DarkColorScheme else LightColorScheme

Answer 2

像这样添加 onPrimary

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

Answer 3

@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 {....}
                       }

Answer 4

我也遇到了类似的问题，我花了一些时间才弄清楚。我提供我自己的颜色和版式。问题是我的排版引用了主题的颜色。

@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
            )
        }
   }

当我将其更改为这个时，它起作用了！

@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
            )
        }
    }
}