Jetpack Compose中M3与M2共存时主题颜色不生效如何解决

问题根因是Material 3的MaterialTheme不会自动将配置的colorScheme映射到Material 2组件依赖的colors属性，所有调用MaterialTheme.colors取色的M2依赖组件，拿到的都是M2默认配色，和你自定义的M3主题不匹配，才会出现深色背景叠加深色元素的异常。

直接在自定义主题中嵌套M2主题容器，手动完成M3配色到M2配色的映射即可，不需要修改第三方依赖的源码，修改后的完整实现如下：

import androidx.compose.material.MaterialTheme as M2MaterialTheme
import androidx.compose.material.darkColors as m2DarkColors
import androidx.compose.material.lightColors as m2LightColors
import androidx.compose.material3.MaterialTheme as M3MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import android.os.Build
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.ui.platform.LocalContext

// 原有M3深色配色定义
val DarkColorScheme = darkColorScheme(
    primary = Green,
    secondary = Blue,
    tertiary = Red,
    onSurface = Color.White,
    error = Red,
)
// 补充M3浅色配色定义，不需要浅色模式可忽略
val LightColorScheme = lightColorScheme(
    primary = Green,
    secondary = Blue,
    tertiary = Red,
    onSurface = Color.Black,
    error = Red,
)

// M3配色转M2配色的扩展方法，语义对齐官方映射规则
private fun ColorScheme.toM2Colors(isDark: Boolean) = if (isDark) {
    m2DarkColors(
        primary = primary,
        primaryVariant = primaryContainer,
        secondary = secondary,
        secondaryVariant = secondaryContainer,
        background = background,
        surface = surface,
        error = error,
        onPrimary = onPrimary,
        onSecondary = onSecondary,
        onBackground = onBackground,
        onSurface = onSurface,
        onError = onError
    )
} else {
    m2LightColors(
        primary = primary,
        primaryVariant = primaryContainer,
        secondary = secondary,
        secondaryVariant = secondaryContainer,
        background = background,
        surface = surface,
        error = error,
        onPrimary = onPrimary,
        onSecondary = onSecondary,
        onBackground = onBackground,
        onSurface = onSurface,
        onError = onError
    )
}

@Composable
fun StarDictTheme(
    darkTheme: Boolean = true,
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    // 确定最终生效的M3配色，保留原有的动态色逻辑
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }

    // 外层套M3主题，保证自有M3组件取色正常
    M3MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography
    ) {
        // 内层套M2主题，传入映射后的M2配色，保证M2依赖组件取色正常
        M2MaterialTheme(
            colors = colorScheme.toM2Colors(darkTheme),
            content = content
        )
    }
}

补充说明 #

• 上述颜色映射是官方推荐的M2/M3语义对应关系，如果部分M2依赖组件对特定颜色有要求，可以按需调整映射字段
• 主题嵌套顺序不能调换：M3主题在外、M2主题在内，才能同时满足两类组件的取色逻辑
• 如果不需要支持浅色模式、不需要动态取色，可以删掉对应分支逻辑，只保留深色配色的转换即可

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