[Windows] Fix WebView Does Not Inherit App Theme #35037
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| namespace Maui.Controls.Sample.Issues; | ||
|
|
||
| [Issue(IssueTracker.Github, 34823, "WebView on Windows Does Not Inherit App Theme", PlatformAffected.UWP)] | ||
| public class Issue34823 : NavigationPage | ||
| { | ||
| public Issue34823() : base(new Issue34823MainPage()) | ||
| { | ||
| } | ||
|
|
||
| class Issue34823MainPage : ContentPage | ||
| { | ||
| public Issue34823MainPage() | ||
| { | ||
| BindingContext = this; | ||
| Title = "WebView Test"; | ||
|
|
||
| var webButton = new Button | ||
| { | ||
| Text = "Switch to web page", | ||
| AutomationId = "WebButton", | ||
| HorizontalOptions = LayoutOptions.Center, | ||
| Margin = new Thickness(10) | ||
| }; | ||
| webButton.Clicked += OnWebClicked; | ||
|
|
||
| var themeButton = new Button | ||
| { | ||
| Text = "Toggle Theme", | ||
| AutomationId = "ThemeButton", | ||
| HorizontalOptions = LayoutOptions.Center | ||
| }; | ||
| themeButton.Clicked += OnThemeButtonClicked; | ||
|
|
||
| Content = new ScrollView | ||
| { | ||
| Content = new VerticalStackLayout | ||
| { | ||
| Padding = 30, | ||
| Spacing = 25, | ||
| Children = | ||
| { | ||
| webButton, | ||
| new HorizontalStackLayout | ||
| { | ||
| HorizontalOptions = LayoutOptions.Center, | ||
| Children = | ||
| { | ||
| themeButton | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| void OnThemeButtonClicked(object sender, EventArgs e) | ||
| { | ||
| Application.Current!.UserAppTheme = Dark ? AppTheme.Light : AppTheme.Dark; | ||
| } | ||
|
|
||
| async void OnWebClicked(object sender, EventArgs e) | ||
| { | ||
| var webView = new WebView(); | ||
|
|
||
| var helpPage = new ContentPage | ||
| { | ||
| Title = "Web Page", | ||
| Content = new Grid | ||
| { | ||
| Children = | ||
| { | ||
| webView | ||
| } | ||
| } | ||
| }; | ||
| helpPage.SetAppThemeColor(BackgroundColorProperty, Colors.White, Colors.Black); | ||
|
|
||
| helpPage.NavigatedTo += async (_, __) => | ||
| { | ||
| webView.Source = new HtmlWebViewSource | ||
|
Collaborator
There was a problem hiding this comment. Setting |
||
| { | ||
| Html = """ | ||
| <html> | ||
| <head> | ||
| <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> | ||
| <title>Preparing Help</title> | ||
| <style> | ||
| @media (prefers-color-scheme: dark) { | ||
| html, body { | ||
| color: white; | ||
| background-color: black; | ||
| } | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: light) { | ||
| html, body { | ||
| color: black; | ||
| background-color: white; | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <center><h1>Text on a web page</h1></center> | ||
| </body> | ||
| </html> | ||
| """ | ||
| }; | ||
| }; | ||
|
Comment on lines
+78
to
+109
There was a problem hiding this comment. WebView content is assigned via the NavigatedTo event handler, which introduces timing variability (and the handler is marked async but doesn't await). Consider setting webView.Source before PushAsync (or using a non-async handler) to reduce race/flakiness and remove the unnecessary async event subscription. |
||
|
|
||
| await Navigation.PushAsync(helpPage); | ||
| } | ||
|
|
||
| public bool Dark | ||
| { | ||
| set | ||
| { | ||
| if (value != Dark) | ||
| { | ||
| Application.Current!.UserAppTheme = value ? AppTheme.Dark : AppTheme.Light; | ||
| } | ||
| } | ||
| get => | ||
| Application.Current?.UserAppTheme == AppTheme.Dark || | ||
| Application.Current?.RequestedTheme == AppTheme.Dark; | ||
| } | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,37 @@ | ||||||||
| #if TEST_FAILS_ON_ANDROID // This test fails on Android because of user app theme is not responsive in Hostapp. | ||||||||
| using NUnit.Framework; | ||||||||
| using UITest.Appium; | ||||||||
| using UITest.Core; | ||||||||
|
|
||||||||
| namespace Microsoft.Maui.TestCases.Tests.Issues; | ||||||||
|
|
||||||||
| public class Issue34823 : _IssuesUITest | ||||||||
| { | ||||||||
| public Issue34823(TestDevice device) : base(device) | ||||||||
| { | ||||||||
| } | ||||||||
|
|
||||||||
| protected override bool ResetAfterEachTest => true; | ||||||||
|
|
||||||||
| public override string Issue => "WebView on Windows Does Not Inherit App Theme"; | ||||||||
|
|
||||||||
| [Test] | ||||||||
| [Category(UITestCategories.WebView)] | ||||||||
| public void WebViewWithLightTheme() | ||||||||
| { | ||||||||
| App.WaitForElement("WebButton"); | ||||||||
| App.Tap("WebButton"); | ||||||||
| VerifyScreenshot(); | ||||||||
| } | ||||||||
|
Collaborator
There was a problem hiding this comment.
|
||||||||
|
|
||||||||
| [Test] | ||||||||
| [Category(UITestCategories.WebView)] | ||||||||
| public void WebViewWithDarkTheme() | ||||||||
| { | ||||||||
| App.WaitForElement("WebButton"); | ||||||||
|
There was a problem hiding this comment. The test taps "ThemeButton" without first waiting for it to exist. For UI test stability, add a WaitForElement("ThemeButton") before tapping it (especially on slower devices/CI).
Suggested change
|
||||||||
| App.Tap("ThemeButton"); | ||||||||
| App.Tap("WebButton"); | ||||||||
|
Collaborator
There was a problem hiding this comment. Same issue as |
||||||||
| VerifyScreenshot(); | ||||||||
| } | ||||||||
| } | ||||||||
| #endif | ||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indentation uses spaces here while surrounding lines use tabs.