Jetpack Compose非Scaffold组件默认背景色问题排查与修改

问题根源 #

Scaffold作为Material Design标准布局组件，内部会自动把MaterialTheme.colors.background设为自身背景色，所以能正常应用你自定义的主题颜色。而Box是基础布局组件，不会自动设置背景色，此时显示的是Android系统窗口的默认背景（浅色模式为白色、深色模式为系统默认深色），和你的Compose主题无关。

解决方法 #

给Box手动设置背景色，直接引用主题中的背景色即可：

Box(
    modifier = Modifier.fillMaxSize()
        .background(MaterialTheme.colors.background)
) {
    // 你的业务内容
}

额外检查点 #

1. 确保自定义的颜色色板中正确定义了background字段：

// 示例浅色色板
private val LightColorPallet = LightColors(
    background = Color(0xFFF0F0F0), // 自定义浅色背景
    // 其他颜色配置...
)

// 示例深色色板
private val DarkColorPallet = DarkColors(
    background = Color(0xFF1E1E1E), // 自定义深色背景
    // 其他颜色配置...
)

2. 确认colors(LocalColors.current)函数正确将自定义色板的background映射到MaterialTheme.colors.background：

fun colors(pallet: Colors) = MaterialTheme.colors.copy(
    background = pallet.background,
    // 其他颜色映射逻辑...
)

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