AlertDialog is missing scrim

[sproctor]

The Box at https://github.com/JetBrains/androidx/blob/jb-main/compose/material/material/src/desktopMain/kotlin/androidx/compose/material/DesktopAlertDialog.desktop.kt#L221 should have a black background with 32% opacity, or a default with some option to specify in the theme or component.

[dima-avdeev-jb]

You can configure an Alert background with MaterialTheme, surface:

MaterialTheme(
    colors = MaterialTheme.colors.copy(surface = Color.Green)
) {
    AlertDialog(
        onDismissRequest = {},
        confirmButton = {},
        text = {
            Text("Alert")
        }
    )
}

Or directly with argument backgroundColor

AlertDialog(
    backgroundColor = ...
    ...
)

[sproctor]

I only opened this because it's the default on Android and it's a bit surprising to have a different behavior on desktop.

[dima-avdeev-jb]

@sproctor
You may try to use dark or light theme settings.

MaterialTheme(
    colors = darkColors()
) {
    AlertDialog(
    ...
    )
}   

MaterialTheme(
    colors = lightColors()
) {
    AlertDialog(
    ...
    )
}   

Or default MaterialTheme will use your system dark/light settings.

The result will be the same as surface color in Android.

[sproctor]

I think we're talking about different things. I think you're talking about the background of the dialog itself. I'm talking about the scrim behind the dialog. In this diagram: https://m3.material.io/components/dialogs/specs#67ce2705-d8c0-4ede-9f3e-06b636d6801d it's # 7. The scrim doesn't exist on desktop. I realize that this a link to a different version of material, but I had it handy, and regarding the scrim m2 and m3 seem identical.

[dima-avdeev-jb]

Thanks! I will try to fix it.

[kirill-grouchnikov]

Is there an expectation that showing a dialog on desktop casts a scrim over the rest of the app window?

[sproctor]

In general, I don't know. For a dialog following the material spec, yes.The m3 spec is very specific about this point: "Desktop dialogs are modal windows above a scrim". m2 doesn't specifically mention desktop: "To express that the rest of the app is inaccessible, and to focus attention on the dialog, surfaces behind the dialog are scrimmed. A scrim is a temporary treatment that can be applied to Material surfaces for the purpose of making content on the surface less prominent."

[dima-avdeev-jb]

@sproctor
Where do you get opacity value 32% ?

[sproctor]

I thought I'd seen it in the in the m3 docs, but I can't find it now, so maybe not. It's given as the value for the crane theme in m2: https://m2.material.io/components/dialogs#theming

And it's the value used in the design tokens in m3: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/tokens/ScrimTokens.kt

[okushnikov]

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