Setted the background color for DropdownMenu, but the corner color is white

[GaoXing0608]

[akurasov]

Could you share the reproducer code, please?

[GaoXing0608]

Could you share the reproducer code, please?

The debug code as the follows.

@Composable @Preview fun App() { var text by remember { mutableStateOf("Hello, World!") } var dropdownExpanded by remember { mutableStateOf(false) }

DesktopMaterialTheme{

    Box(
        modifier = Modifier.fillMaxSize()
            .background(Color(43, 43, 43))
    ) {
        Box{
            Button(onClick = {
                text = "Hello, Desktop!"
                dropdownExpanded = true
            }) {
                Text(text)
            }

            DropdownMenu(
                expanded = dropdownExpanded,
                onDismissRequest = {
                    dropdownExpanded = false
                },
                modifier = Modifier.background(Color(44, 44, 44))
            ) {
                DropdownMenuItem(
                    onClick = {
                        dropdownExpanded = false
                    }
                ) {
                    Text(
                        text = "Dropdown Item",
                        color = Color.White
                    )
                }
            }
        }
    }
}

}

[akurasov]

I think it is a material shade effect. It will be more visible if you use 192-192-192 color. And if you use 0-0-0 it will disappear at all.

[Tylll3Hka]

It was not possible to remove the white lines on the corners

[malliaridis]

@Tylll3Hka I looked into this issue and found out that it is a theme related problem. To be precise you are having white background because it is a light theme-related "effect" (actually a surface color) that applies on a dark component (dark because it is styled as such). When switching to dark theme or overriding the surface color of the theme you can fix this.

I recommend you to make use of the theme's dark and light theme feature and don't manually set the background colors for such modals (would also reduce unnecessary customizations). For customizing the theme you can look up instructions online, one of them is the Android Developer page.

For a quick and dirty fix that allows you to customize the theme locally at the place of definition you can wrap your DropdownMenu with a custom theme:

// Either use darkColorScheme() (M3) or lightColorScheme(surface = Color(44, 44, 44))
// or for Material 2 darkColors() / lightColors(surface = Color(44, 44, 44))
MaterialTheme(colorScheme = darkColorScheme()) {
  DropdownMenu(
    expanded = dropdownExpanded,
    onDismissRequest = { dropdownExpanded = false },
    modifier = Modifier.background(Color(44, 44, 44))
    ) {
      DropdownMenuItem(
      onClick = { dropdownExpanded = false },
      text = {
        Text(
          text = "Dropdown Item",
          color = Color.White // <- Text color on dark theme is automatically white and therefore this is not necessary
        )
      },
    )
  }
}

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.