切换至浅色主题时文本颜色未变化的技术求助

切换到浅色主题时，文本颜色未发生改变，但分割线及其他元素颜色能正常切换。尝试用remember { mutableStateOf(Color) }设置文本颜色、移除调色板中的白色值均无效，文本组件未感知主题变更。

相关截图 #

• 浅色主题效果
• 深色主题效果
• 代码截图

相关代码 #

Theme.kt #

private val DarkColorPalette = darkColors(
primary = Purple500,
//    primaryVariant = Purple700,
//    secondary = Sky,
//    secondaryVariant = Sky,
    background = Black,
//    surface = Black,
//    error = Black,
    onPrimary = White2,
//    onSecondary = Black,
    onBackground = White2,
//    onSurface = Black,
//    onError = Black
)
private val LightColorPalette = lightColors(
    primary = Purple500,
//    primaryVariant = Purple700,
//    secondary = Sky,
//    secondaryVariant = Sky,
    background = White2,
//    surface = Black,
//    error = Black,
    onPrimary = Black,
//    onSecondary = Black,
    onBackground = Black,
//    onSurface = Black,
//    onError = Black
)

val redLightPalette = LightColorPalette.copy(
    primary = Red,
    onPrimary = White,
)
val redDarkPalette = DarkColorPalette.copy(
    primary = Red,
    onPrimary = White,
)

val orangeLightPalette = LightColorPalette.copy(
    primary = Orange,
    onPrimary = White,
)
val orangeDarkPalette = DarkColorPalette.copy(
    primary = Orange,
    onPrimary = White,
)

val yellowLightPalette = LightColorPalette.copy(
    primary = Yellow,
    onPrimary = Black,
)
val yellowDarkPalette = DarkColorPalette.copy(
    primary = Yellow,
    onPrimary = Black,
)

val greenLightPalette = LightColorPalette.copy(
    primary = Green,
    onPrimary = White,
)
val greenDarkPalette = DarkColorPalette.copy(
    primary = Green,
    onPrimary = White,
)

val skyLightPalette = LightColorPalette.copy(
    primary = Sky,
    onPrimary = White,
)
val skyDarkPalette = DarkColorPalette.copy(
    primary = Sky,
    onPrimary = White,
)

@Composable
fun LifeControllerTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    primary: Color = Purple700,
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        when(primary) {
            Purple500 -> DarkColorPalette
            Red -> redDarkPalette
            Orange -> orangeDarkPalette
            Yellow -> yellowDarkPalette
            Green -> greenDarkPalette
            Sky -> skyDarkPalette
            else -> DarkColorPalette
        }

    } else {
        when(primary){
            Purple500 -> LightColorPalette
            Red -> redLightPalette
            Orange -> orangeLightPalette
            Yellow -> yellowLightPalette
            Green -> greenLightPalette
            Sky -> skyLightPalette
            else -> LightColorPalette
        }
    }

    MaterialTheme(
        colors = colors,
        typography = typography,
        shapes = Shapes,
        content = content
    )
}

Type.kt #

val typography = Typography(
        h1 = TextStyle(
//            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Normal,
            fontSize = 22.sp
        ),
        h2 = TextStyle(
//            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Italic,
            fontSize = 22.sp
        ),
        h3 = TextStyle(
//            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Normal,
            fontSize = 20.sp
        ),
        h4 = TextStyle(
//            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Italic,
            fontSize = 20.sp
        ),
        h5 = TextStyle(
//            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Normal,
            fontSize = 18.sp
        ),
        h6 = TextStyle(
//            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Italic,
            fontSize = 18.sp
        ),
        body1 = TextStyle(
//            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Normal,
            fontSize = 16.sp
        ),
        body2 = TextStyle(
//            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Normal,
            fontStyle = FontStyle.Italic,
            fontSize = 14.sp
        ),
    )

问题根源在Type.kt中：所有文本样式的color属性都被注释，导致文本使用默认颜色，未与主题的onBackground绑定。

修复步骤：

1. 取消Type.kt中所有TextStyle里color = MaterialTheme.colors.onBackground的注释，让文本颜色跟随主题的onBackground值变化：

val typography = Typography(
        h1 = TextStyle(
            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Normal,
            fontSize = 22.sp
        ),
        h2 = TextStyle(
            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Italic,
            fontSize = 22.sp
        ),
        h3 = TextStyle(
            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Normal,
            fontSize = 20.sp
        ),
        h4 = TextStyle(
            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Italic,
            fontSize = 20.sp
        ),
        h5 = TextStyle(
            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Normal,
            fontSize = 18.sp
        ),
        h6 = TextStyle(
            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Italic,
            fontSize = 18.sp
        ),
        body1 = TextStyle(
            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Normal,
            fontSize = 16.sp
        ),
        body2 = TextStyle(
            color = MaterialTheme.colors.onBackground,
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Normal,
            fontStyle = FontStyle.Italic,
            fontSize = 14.sp
        ),
    )

2. 确保文本组件正确应用主题样式，示例：

Text(
    text = "示例文本",
    style = MaterialTheme.typography.body1
)

主题切换时，文本颜色会自动跟随MaterialTheme.colors.onBackground的值变化，浅色主题用黑色、深色主题用白色，解决颜色不切换问题。

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