Jetpack Compose底部导航栏：背景、图标及文字颜色配置

你遇到的黑字紫底问题，大概率是以下两个原因导致：

1. Android 12+ 的动态颜色特性覆盖了默认配色方案，导致文字与背景对比度异常；
2. Text 组件的样式未继承 BottomNavigationItem 提供的状态化内容颜色。

以下是几种针对性的修复方案，均能适配明暗模式切换：

方案1：让文字继承父组件的状态化颜色 #

修改 BottomNavigationItem 中的 Text 组件，使其使用 BottomNavigationItem 自动提供的选中/未选中状态颜色：

label = { 
    Text(
        stringResource(screen.resourceId),
        style = MaterialTheme.typography.labelSmall,
        color = LocalContentColor.current // 关键：继承父组件的内容颜色
    )   
}

这样文字会自动根据选中状态切换颜色，且适配明暗模式下的对比度要求。

方案2：显式配置 BottomNavigationItem 颜色 #

通过 colors 参数完全自定义选中/未选中状态的文字、图标和背景色，使用 MaterialTheme.colorScheme 中的颜色确保明暗模式适配：

BottomNavigationItem(
    icon = { Icon(screen.icon, contentDescription = null) },
    label = { 
        Text(
            stringResource(screen.resourceId),
            style = MaterialTheme.typography.labelSmall
        )   
    },  
    selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true,
    onClick = { /* 原有导航逻辑 */ },
    // 显式配置颜色
    colors = BottomNavigationItemDefaults.colors(
        selectedContainerColor = MaterialTheme.colorScheme.primary,
        selectedTextColor = MaterialTheme.colorScheme.onPrimary, // 与primary背景高对比度
        selectedIconColor = MaterialTheme.colorScheme.onPrimary,
        unselectedTextColor = MaterialTheme.colorScheme.onSurfaceVariant,
        unselectedIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
        unselectedContainerColor = Color.Transparent
    )
)

方案3：禁用动态颜色（可选） #

如果是 Android 12+ 的动态颜色特性导致配色异常，可以在 MyAppTheme 中关闭该功能，使用 Color.kt 中定义的静态配色：

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = false, // 关闭动态颜色
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

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