Why doesn't the background of my application change according to the theme in jetpack compose?

Question

I have defined colors for dark theme and light theme in my application and when I import the emulator to light theme or dark theme, the color of the components changes according to the theme, for example, the texts become white in the dark theme, but the background does not change, for example, when I import a dark theme, the emulator background is black. I want it to happen, but it doesn't work, likewise, the light theme has the same problem. So the color of the background does not change according to the theme. what could be the problem?

hear is my code

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
                    )
                }
            }
        }
   }
}

Answer 1

same problem - defined background as a color and stayed white - the problem in my case was that, as stated in the comment, dynamicColor isn't supported under android 12 and my emulation device is Android 7 I believe so in Theme.kt > [Projectname]Theme > dynamicColor set Boolean to false, should work then

Answer 2

I think the problem seems to be in your Theme.kt file in the LightColors and DarkColors variables; you are not setting the background color correctly.

In LightColors, you have commented out the background color assignment:

//background = Color(0xFF000000),

This means that it will use the default color (white), regardless of the theme.

In DarkColors, you have set the background color to black, which explains why the emulator background becomes black in the dark theme.