Jetpack Compose中TopAppBar的titleContentColor始终继承主题主色问题

尝试修改Jetpack Compose中TopAppBar的titleContentColor为主题的onPrimaryContainer色值，甚至直接设置自定义颜色（如Color.White），都无法生效，标题始终沿用主题的primary主色。

相关代码 #

主题代码 #

@Composable
fun ExampleTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = false,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColors
        else -> LightColors
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

无效的TopAppBar代码 #

ExampleTheme {
    Surface(modifier = Modifier.fillMaxSize()) {
        Scaffold(topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.onPrimaryContainer
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        }) { innerPadding ->
            ScrollContent(innerPadding)
        }
    }
}

自定义颜色测试代码（同样无效） #

ExampleTheme {
    Surface(modifier = Modifier.fillMaxSize()) {
        Scaffold(topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = Color.White
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        }) { innerPadding ->
            ScrollContent(innerPadding)
        }
    }
}

你在TopAppBar的title参数中手动实现了Text组件，但该Text默认使用MaterialTheme.typography中定义的文本样式颜色（通常是colorScheme.onSurface），完全忽略了TopAppBarDefaults.topAppBarColors()中设置的titleContentColor。

titleContentColor的作用是给TopAppBar内部默认的标题文本提供颜色，但当你自定义title的Composable时，需要手动复用这个颜色值。

有三种可行的修复方式：

方式一：复用TopAppBar设置的标题颜色 #

先定义好TopAppBar的颜色配置，再在Text中直接引用该配置的titleContentColor：

ExampleTheme {
    Surface(modifier = Modifier.fillMaxSize()) {
        Scaffold(topBar = {
            val topAppBarColors = TopAppBarDefaults.topAppBarColors(
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                titleContentColor = MaterialTheme.colorScheme.onPrimaryContainer
            )
            TopAppBar(
                colors = topAppBarColors,
                title = {
                    Text(
                        text = "Small Top App Bar",
                        color = topAppBarColors.titleContentColor(enabled = true).value
                    )
                }
            )
        }) { innerPadding ->
            ScrollContent(innerPadding)
        }
    }
}

方式二：通过titleTextStyle指定颜色 #

在TopAppBar的titleTextStyle中直接设置颜色，让内部Text自动继承：

ExampleTheme {
    Surface(modifier = Modifier.fillMaxSize()) {
        Scaffold(topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer
                ),
                titleTextStyle = MaterialTheme.typography.titleLarge.copy(
                    color = MaterialTheme.colorScheme.onPrimaryContainer
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        }) { innerPadding ->
            ScrollContent(innerPadding)
        }
    }
}

方式三：使用LocalContentColor继承颜色 #

利用Compose的LocalContentColor自动获取TopAppBar提供的内容颜色：

ExampleTheme {
    Surface(modifier = Modifier.fillMaxSize()) {
        Scaffold(topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.onPrimaryContainer
                ),
                title = {
                    Text(
                        text = "Small Top App Bar",
                        color = LocalContentColor.current
                    )
                }
            )
        }) { innerPadding ->
            ScrollContent(innerPadding)
        }
    }
}

• 确保使用的Compose Material库为最新稳定版，旧版本可能存在titleContentColor不生效的Bug。
• 检查自定义Typography中的文本样式是否硬编码了颜色，这会覆盖外部设置的颜色值。

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