ContentDialog background does not follow UI theme settings

[zhuxb711]

Describe the bug
Although I have set "RequestedTheme = ElementTheme.Dark" to ContentDialog

But its background part is still white following the system theme

If TeachingTip pops up at this time, ContentDialog will become more white and difficult to recognize

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Set RequestedTheme = ElementTheme.Dark to ContentDialog
2. Set the Windows color to “Light”

Expected behavior

like this

Screenshots

Version Info

NuGet package version:

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
November 2019 Update (18363)	Yes
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Mobile
Xbox
Surface Hub
IoT

Additional context

[ranjeshj]

The ContentDialog's content are reparented into a popup, which is likely what is causing this. It is disconnected from the parent chain to get any property that is not explicitly routed to the popup content anymore.

[sigmarsson]

Thanks @ranjeshj .
I detect somthign similar here; by default having the dark theme, the opening content dialog remains light.

[MagicAndre1981]

The ContentDialog's content are reparented into a popup, which is likely what is causing this.

will this be ever fixed? I also see this when I use ACR User Dialogs to show progress dialog which is implemented as ContentDialog.

[sigmarsson]

Did you try settng explicit value?

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

[MagicAndre1981]

Did you try settng explicit value?

where should this be added? I use a nuget package in Xamarin.Forms app and the UWP app has the issue that the progress is white while the rest of the app is dark as I want it to have.

[sigmarsson]

can't you set it in xaml <ContentDialog ... /> as for a <Page /> ?

[MagicAndre1981]

can't you set it in xaml <ContentDialog ... /> as for a <Page /> ?

No, I don't use any XAML to call this lib:

var config = new ProgressDialogConfig
{
	MaskType = MaskType.Gradient,
	IsDeterministic = false,
	Title = "foo"
};

var pd = UserDialogs.Instance.Progress(config);

using (pd)
{
	ret = await barAsync();
	pd.Hide();
}

And this shows an endless progressdialog which is always white background no matter what RequestedTheme I set

[lyahdav]

Setting the background doesn't help as the all the controls inside the ContentDialog aren't updated with the proper theme colors. I'm looking into some other workarounds and will report back.

[lyahdav]

Found a workaround by setting the Popup.RequestedTheme on the Opened event:

                    dialog.Opened([=](auto const &...) {
                        if (auto popup = GetPopup()) {
                            popup.RequestedTheme(button.ActualTheme());
                        }
                        });

Here's the code in a sample project: https://github.com/lyahdav/CppWinRtUwpSandbox/blob/ContentDialogDarkBug/SharedContent/cppwinrt/MainPage.cpp#L100-L104

And if you want to run it yourself, here's the solution: https://github.com/lyahdav/CppWinRtUwpSandbox/blob/ContentDialogDarkBug/cppwinrt/Calendar.sln

[lyahdav]

In case anyone is curious, I verified this issue is not fixed in Windows 11:

[karthikraja-arumugam]

In my case above workaround works only the first time of content dialog opening, and while showing dialog on next time the content doesn't update with dark theme. Please fix this bug. Due to this we can't go with ContentDialog and need to write our own popup control.

[lyahdav]

@karthikraja-arumugam if the workaround only works the first time the content dialog opens, you can just recreate the ContentDialog each time it needs to be opened. For context, you can see that workaround in React Native Windows here after it creates a ContentDialog each time: https://github.com/microsoft/react-native-windows/blob/main/vnext%2FMicrosoft.ReactNative%2FModules%2FAlertModule.cpp#L40

[Jeyasri-Murugan]

@lyahdav - We have the base content dialog in that we have added the editor to open the other content dialog,

Due to this framework limitation with muti content dialog popup (#6473 we have intailized the content dialog in theme file to resolve the multi content dialog , we could not initialize every time, is there any other way to resolve?

[karthikraja-arumugam]

@lyahdav as @Jeyasri-Murugan mentioned we can't use popup or any other dialog within ContentDialog, that's why we need to reuse the same dialog instance.

[lyahdav]

@Jeyasri-Murugan I'm not really sure then. Perhaps using an event other than ContentDialog.Opened to add the workaround may help, e.g. Loaded event.

[jingkecn]

Any news on this issue, it's becoming annoying...

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[SnowyWreath]

Please do not close. Hire some help and fix these issues!

[jingkecn]

It seems that the WinUI team won't prioritize this issue since there's a workaround, even though the workaround is quite annoying.

Does it mean that we should carefully not integrate the WinUI2/3 library in our future projects without second thought? 😅

[paulovila]

Any progress on this?