Compose预览中MaterialTheme.colorScheme颜色不生效问题（Material 3）

问题描述 #

刚开始学习Compose UI，使用MaterialTheme.colorScheme中的颜色时，预览始终显示默认颜色（比如MaterialTheme.colorScheme.surface显示白色、MaterialTheme.colorScheme.primary显示紫色），但真机运行显示正常。已自定义LearningComposeTheme并配置了Dark/Light颜色方案，也更新了theme.xml，但预览里的组件还是默认样式。

相关代码如下：

自定义Theme代码 #

fun LearningComposeTheme(
    darkTheme: Boolean = false,
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colorScheme = colors,
        content = content
    )
}

private val DarkColorPalette = darkColorScheme(
    primary = ColorPrimaryDark,
    onPrimary = ColorOnPrimary,
    primaryContainer = ColorPrimaryContainerDark,
    onPrimaryContainer = ColorOnPrimary,
    inversePrimary = ColorInversePrimary,
    background = ColorPrimaryContainerDark,
    surface = ColorSurface,
    onSurface = ColorOnSurface,
    error = ColorError,
)

// For now dark and light themes are exactly same.
private val LightColorPalette = lightColorScheme(
    primary = ColorPrimaryDark,
    onPrimary = ColorOnPrimary,
    primaryContainer = ColorPrimaryContainerDark,
    onPrimaryContainer = ColorOnPrimary,
    inversePrimary = ColorInversePrimary,
    background = ColorPrimaryContainerDark,
    surface = ColorSurface,
    onSurface = ColorOnSurface,
    error = ColorError,
)

theme.xml配置 #

<style name="Theme.MyAppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryVariant">@color/colorPrimaryDark</item>
    <item name="colorOnPrimary">@color/white</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/teal_200</item>
    <item name="colorSecondaryVariant">@color/teal_700</item>
    <item name="colorOnSecondary">@color/black</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
    <!-- Customize your theme here. -->
</style>

Compose UI代码 #

Surface(
    modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight(),
    color = MaterialTheme.colorScheme.primary,
    contentColor = MaterialTheme.colorScheme.primary,
) {
...
}

解决方案 #

1. 确保预览代码包裹在自定义Theme内 #

预览的Composable必须被你的LearningComposeTheme包裹，否则预览会使用默认的MaterialTheme。示例：

@Preview(showBackground = true)
@Composable
fun SurfacePreview() {
    LearningComposeTheme {
        Surface(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight(),
            color = MaterialTheme.colorScheme.primary,
            contentColor = MaterialTheme.colorScheme.primary,
        ) {
            // 内容
        }
    }
}

2. 修正Theme的darkTheme参数逻辑 #

当前LearningComposeTheme的darkTheme默认值固定为false，如果需要跟随系统主题，应该使用isSystemInDarkTheme()：

fun LearningComposeTheme(
    darkTheme: Boolean = isSystemInDarkTheme(), // 修改为跟随系统
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colorScheme = colors,
        content = content
    )
}

如果需要在预览中强制指定主题，可以在预览函数里传参：

@Preview(showBackground = true, name = "Light Theme")
@Composable
fun SurfaceLightPreview() {
    LearningComposeTheme(darkTheme = false) {
        // 预览内容
    }
}

@Preview(showBackground = true, name = "Dark Theme")
@Composable
fun SurfaceDarkPreview() {
    LearningComposeTheme(darkTheme = true) {
        // 预览内容
    }
}

3. 检查颜色常量的定义 #

确保ColorPrimaryDark、ColorOnPrimary等颜色常量是正确的Compose Color类型，而不是直接引用XML资源（需要用colorResource()转换）。例如：

// 直接使用十六进制颜色值
private val ColorPrimaryDark = Color(0xFF1A237E)
// 或者从XML资源转换
private val ColorPrimaryDark = colorResource(R.color.colorPrimaryDark)

4. 清理IDE缓存并重启 #

有时候Android Studio的缓存会导致预览异常，执行以下步骤：

• 点击File -> Invalidate Caches...
• 选择Invalidate and Restart

内容的提问来源于stack exchange，提问作者Abbas