如何在Material 3 Jetpack Compose中切换明暗模式下的状态栏颜色？

在Material3 Compose中，直接通过window.statusBarColor修改状态栏颜色会被主题的自动系统栏管理逻辑覆盖，正确的做法是使用官方提供的SystemUiController来控制状态栏样式：

解决步骤 #

1. 获取SystemUiController实例 #

在你的App主题可组合函数中，通过rememberSystemUiController()获取系统栏控制器实例。

2. 结合配色方案设置状态栏 #

根据当前的明暗配色方案，同步设置状态栏背景色及图标亮度，确保模式切换时样式自动更新：

修改后的Theme.kt核心代码示例：

import androidx.compose.material3.rememberSystemUiController
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalView
import androidx.compose.runtime.SideEffect

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme
    val systemUiController = rememberSystemUiController()
    val view = LocalView.current

    if (!view.isInEditMode) {
        SideEffect {
            // 设置状态栏背景色
            systemUiController.setStatusBarColor(
                color = colorScheme.primary,
                // 根据背景色亮度自动适配图标颜色，保证可读性
                darkIcons = !colorScheme.primary.isLight
            )
        }
    }

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

// 保留你的原有配色方案定义
private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80
)
private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40
)

关键说明 #

• SideEffect用于确保每次主题切换或配色方案变更时，系统栏的设置逻辑都会重新执行
• darkIcons参数控制状态栏图标的明暗，根据背景色的亮度自动适配，避免出现图标与背景对比度不足的问题
• 若需要实现透明状态栏等进阶效果，可搭配WindowCompat.setDecorFitsSystemWindows(window, false)，但需注意给布局添加合适的内边距适配系统栏高度

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