Compose Multiplatform中如何实现深色/浅色主题预览并显示对应背景

我之前在Compose Multiplatform里也踩过一模一样的坑！@PreviewLightDark确实能生成深浅色两个预览，但默认不带背景；加上@Preview(showBackground = true)又会多出来一个重复的浅色预览，属实有点烦人。不过有两个靠谱的办法能解决，让你同时看到带对应主题背景的深浅色预览：

方法一：手动指定深浅色预览（推荐） #

直接放弃@PreviewLightDark，改用两个单独的@Preview注解，分别配置浅色/深色模式，同时开启showBackground = true。这样能精准控制每个预览的行为，还能给预览起个清晰的名字，方便区分：

import android.content.res.Configuration // 注意导入这个包
// ... 其他导入保持不变

@Composable
@Preview(
    name = "Light Mode",
    showBackground = true,
    uiMode = Configuration.UI_MODE_NIGHT_NO
)
@Preview(
    name = "Dark Mode",
    showBackground = true,
    uiMode = Configuration.UI_MODE_NIGHT_YES
)
private fun LoginContentPreview() {
    AppTheme {
        LoginContent(
            isLoading = false,
            onLoginWithGoogleClick = {}
        )
    }
}

这样就能生成两个独立的预览：一个是带背景的浅色主题，一个是带背景的深色主题，完全符合你的需求。原理就是uiMode参数直接指定预览的夜间模式状态，配合showBackground = true让系统自动加载对应主题的背景色。

方法二：给预览手动添加主题背景 #

如果你还是想保留@PreviewLightDark的写法，可以在预览函数里给根组件包一层带主题背景的容器，比如用Box：

@Composable
@PreviewLightDark
private fun LoginContentPreview() {
    AppTheme {
        Box(
            modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)
        ) {
            LoginContent(
                isLoading = false,
                onLoginWithGoogleClick = {}
            )
        }
    }
}

这里我们利用MaterialTheme.colorScheme.background来获取当前主题（浅色/深色）对应的背景色，然后通过Box铺满整个预览区域。这样@PreviewLightDark生成的两个预览，都会自动带上对应主题的背景色，不需要额外配置。

为什么原来的写法不行？ #

@PreviewLightDark本质上是Compose Multiplatform提供的语法糖，帮你自动生成两个分别对应UI_MODE_NIGHT_NO和UI_MODE_NIGHT_YES的预览，但它默认没有开启showBackground。当你额外加一个@Preview(showBackground = true)时，相当于又多生成了一个默认浅色模式的预览，所以就会出现三个预览的情况。

以上两种方法亲测在Compose Multiplatform 1.8.2上有效，你可以根据自己的习惯选一个用～

内容来源于stack exchange