Jetpack Compose应用主题背景不随系统主题切换问题排查

问题描述 #

我在应用中定义了深色主题和浅色主题的颜色，切换模拟器的浅色/深色主题时，组件颜色能正常跟随变化（比如深色主题中文本变白），但背景颜色不会改变。切换到深色主题时，期望模拟器背景变成黑色，但没生效；浅色主题也有同样问题。背景颜色无法随主题切换，可能是什么原因？

相关代码 #

Color.kt #

val md_theme_light_primary = Color(0XFFF3F3F3)
val md_theme_light_primary_variant = Color(0xFF3FC6E3)
val md_theme_light_onPrimaryContainer = Color(0xFF1D192B)


val md_theme_dark_primary = Color(0XFF383A40)
val md_theme_dark_primary_variant = Color(0xFFFFFFFF)
val md_theme_dark_onPrimaryContainer = Color(0xFFFFFFFF)
val md_theme_dark_onSurface = Color(0xFFFFFFFF)

Theme.kt #

private val DarkColors = darkColors(
    background = Color(0xFF000000),
    surface = Color(0xFF1A1818),
    primary = md_theme_dark_primary,
    primaryVariant = md_theme_dark_primary_variant,
    onPrimary = md_theme_dark_onPrimaryContainer,
    secondary = md_theme_dark_primary,
    onSecondary = md_theme_dark_onPrimaryContainer,
    secondaryVariant = md_theme_dark_primary_variant,
    onSurface = md_theme_dark_onSurface,
)

private val LightColors = lightColors(
    //background = Color(0xFF000000),
    surface = Color(0xFFFFFFFF),
    primary = md_theme_light_primary,
    primaryVariant = md_theme_light_primary_variant,
    onPrimary = md_theme_light_onPrimaryContainer,
    secondary = md_theme_light_primary,
    onSecondary = md_theme_light_onPrimaryContainer,
    secondaryVariant = md_theme_light_primary_variant,
)

@Composable
fun GermanDictionaryTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {

    MaterialTheme(
        colors = if (darkTheme) DarkColors else LightColors,
        typography = MontSerratTypography,
        content = content
    )
}

Type.kt #

private val MontSerrat = FontFamily(
    Font(R.font.montserrat_regular, FontWeight.W400),
    Font(R.font.montserrat_medium, FontWeight.W500),
    Font(R.font.montserrat_bold, FontWeight.W600)
)

val MontSerratTypography = androidx.compose.material.Typography(

    h1 = TextStyle(
        fontFamily = MontSerrat,
        fontWeight = FontWeight.W500,
        fontSize = 30.sp,
    ),
    h2 = TextStyle(
        fontFamily = MontSerrat,
        fontWeight = FontWeight.W500,
        fontSize = 24.sp,
    ),
    h3 = TextStyle(
        fontFamily = MontSerrat,
        fontWeight = FontWeight.W500,
        fontSize = 20.sp,
    ),
    h4 = TextStyle(
        fontFamily = MontSerrat,
        fontWeight = FontWeight.W400,
        fontSize = 18.sp,
    ),
    h5 = TextStyle(
        fontFamily = MontSerrat,
        fontWeight = FontWeight.W600,
        fontSize = 16.sp,
    ),
    h6 = TextStyle(
        fontFamily = MontSerrat,
        fontWeight = FontWeight.W400,
        fontSize = 14.sp,
    ),
    subtitle1 = TextStyle(
        fontFamily = MontSerrat,
        fontWeight = FontWeight.W600,
        fontSize = 22.sp,
    ),
    subtitle2 = TextStyle(
        fontFamily = MontSerrat,
        fontWeight = FontWeight.W400,
        fontSize = 16.sp,
    ),
    body1 = TextStyle(
        fontFamily = MontSerrat,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    ),
    body2 = TextStyle(
        fontFamily = MontSerrat,
        fontSize = 14.sp
    ),
    button = TextStyle(
        fontFamily = MontSerrat,
        fontWeight = FontWeight.W600,
        fontSize = 16.sp,
    ),
    caption = TextStyle(
        fontFamily = MontSerrat,
        fontWeight = FontWeight.Normal,
        fontSize = 12.sp
    ),
    overline = TextStyle(
        fontFamily = MontSerrat,
        fontWeight = FontWeight.W400,
        fontSize = 12.sp
    )
)

MainActivity.kt #

@AndroidEntryPoint
class MainActivity: ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            GermanDictionaryTheme{
                Surface(modifier = Modifier.fillMaxSize()) {
                    Navigation()
                }
            }
        }
    }
}

MainScreen.kt #

@Composable
fun MainScreen(
    navController: NavController,
    state: MainScreenState,
) {


   Scaffold(
        backgroundColor = Color.Transparent,
        topBar = {
            ScreenTopBar(title = "Kategorien", imgId = null){}
        },
        bottomBar = {
            BottomNavigationBar(
                items = BottomNavItem.values().toList(),
                navController = navController,
                onItemClick = {
                    navController.navigate(it.route)
                }
            )
        }
    ){
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            LazyColumn(
                modifier = Modifier
                    .padding(8.dp)
                    .fillMaxSize()
            ) {
                items(state.gridList.size) { index ->
                    GridItem(
                        wordItem = state.gridList[index].title,
                        navController
                    )
                }
            }
        }
   }
}

问题原因及修复方案 #

1. 浅色主题未配置background颜色 #

你的LightColors中background属性被注释掉了，导致浅色主题下没有指定自定义背景色，组件会使用Material主题的默认背景值，无法跟随主题切换。
修复方式：取消注释并设置正确的浅色背景色：

private val LightColors = lightColors(
    background = Color(0xFFFFFFFF), // 设置浅色背景为白色
    surface = Color(0xFFFFFFFF),
    // 其余颜色配置保持不变
)

2. Scaffold硬编码了透明背景 #

MainScreen中的Scaffold显式设置了backgroundColor = Color.Transparent，这会覆盖主题中的background颜色配置，导致背景无法跟随主题变化。
修复方式：移除该硬编码配置，让Scaffold默认使用主题的background颜色：

Scaffold(
    // 移除 backgroundColor = Color.Transparent
    topBar = { ... },
    bottomBar = { ... }
){
    // 内容区域
}

3. 可选：确保Surface使用主题背景色 #

如果希望MainActivity中的Surface作为页面的底层背景，可以显式指定它使用主题的background颜色，避免继承默认的surface颜色：

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colors.background
) {
    Navigation()
}

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