how update WebView2 control in C# WPF application as per Color Theme selected in visual studio 2022 like Light, Dark etc

Ajay Gera 20

how update WebView2 control in C# WPF application as per Color Theme selected in visual studio 2022.

Color theme can be changed in visual studio 2022 from Tools -> Options -> Color Theme:

3 answers

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more
Bruce (SqlWork.com) 64,486 Reputation points

2024-08-19T21:15:20.1966667+00:00

the visual studio color theme is only for visual studio's controls, not the controls in the application project. if you want your application to support color themes, then you add code to support themes. if you want trigger off the windows theme see:

https://learn.microsoft.com/en-us/answers/questions/715081/how-to-detect-windows-dark-mode
Please sign in to rate this answer.
Ajay Gera 20 Reputation points

2024-09-11T18:35:25.2633333+00:00

setting PreferredColorScheme does not do anything

webView.CoreWebView2.Profile.PreferredColorScheme = Microsoft.Web.WebView2.Core.CoreWebView2PreferredColorScheme.Dark;
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
Hongrui Yu-MSFT 1,605 Reputation points Microsoft Vendor

2024-08-20T07:13:54.8866667+00:00
Hi,@Ajay Gera. Welcome to Microsoft Q&A.

If you want to apply the theme color of Visual Studio to WebView2, the process can be broken down into the following two steps:

1.Get the theme color of Visual Studio

You can refer to the following document to get the theme color of Visual Studio.

intellisense - How to get current used color theme of Visual Studio - Stack Overflow

2.In the listening event in step 1, you get the theme color of Visual Studio. You could set the theme of WebView2 in the listening event through conditional judgment.

You could set the theme color in WebView2 through CoreWebView2Profile.PreferredColorScheme

Reference example

<wv2:WebView2 Name="webView" Source="https://www.microsoft.com"/>

webView.CoreWebView2.Profile.PreferredColorScheme = Microsoft.Web.WebView2.Core.CoreWebView2PreferredColorScheme.Dark;

Related Documents:

CoreWebView2Profile.PreferredColorScheme Property (Microsoft.Web.WebView2.Core) | Microsoft Learn

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Hongrui Yu-MSFT 1,605 Reputation points Microsoft Vendor

2024-08-22T07:28:02.0366667+00:00

Hi,@Ajay Gera.

Is there any update to the question? Did my answer solve your problem? If so, you could accept it as the answer. It's helpful for community members with related questions.

Ajay Gera 20 Reputation points

2024-09-11T18:36:27.72+00:00

PreferredColorScheme does not change the color of the webview2 content

Ajay Gera 20 Reputation points

2024-09-11T18:37:23.82+00:00

I have worked on vscode code extension and I have used webviews to display contents or various controls like combo box , button , textbox etc.

Webviews can access VS Code Theme colors using CSS variables. These variable names are prefixed with vscode like --vscode-editor-foreground, --vscode-button-foreground, --vscode-button-background.

We can use these variables in CSS and achieve change of color of controls inside webview whenever there is change of Color Theme in vscode.

So, I am looking for similar variables in WebView2 whose values changes based upon change of Color Theme in Visual Studio 2022 (like Blue, Blue (Extra Contrast) , Dark, Light)?

If there are no variables for webview2 then how we can achieve Theming content in Webview2?

I have seen one class EnvironmentColors in Microsoft.VisualStudio.PlatformUI namespace in Microsoft.VisualStudio.shell.15.0 dll.

This class defines lots of variables for colors, but I am not sure if this can be used because there is no documentation which states which variable to be used for which control e.g. which variable I should use for the background color for button, text box, combo box control, which variable to use for text color , when control gets selected, hover and so on.

Ajay Gera 20 Reputation points

2024-09-11T18:38:21.3333333+00:00

I have worked on vscode code extension and I have used webviews to display contents or various controls like combo box , button , textbox etc.

Webviews can access VS Code Theme colors using CSS variables. These variable names are prefixed with vscode like --vscode-editor-foreground, --vscode-button-foreground, --vscode-button-background.

We can use these variables in CSS and achieve change of color of controls inside webview whenever there is change of Color Theme in vscode.

So, I am looking for similar variables in WebView2 whose values changes based upon change of Color Theme in Visual Studio 2022 (like Blue, Blue (Extra Contrast) , Dark, Light).

If there are no variables for webview2 then how we can achieve Theming content in Webview2?

I have seen one class EnvironmentColors in Microsoft.VisualStudio.PlatformUI namespace in Microsoft.VisualStudio.shell.15.0 dll.

This class defines lots of variables for colors, but I am not sure if this can be used because there is no documentation which states which variable to be used for which control e.g. which variable I should use for the background color for button, text box, combo box control, which variable to use for text color , when control gets selected, hover and so on.

Hongrui Yu-MSFT 1,605 Reputation points Microsoft Vendor

2024-09-12T08:58:56.2066667+00:00

Hi,@Ajay Gera.

WebView2 is equivalent to a built-in browser in WPF. It accesses other websites through URL. It is highly unlikely that you could change the theme of other websites through local programs. To access local websites through URL and change the theme of local websites, you could refer to the following design scheme.

public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); InitializeWebView(); } private async void InitializeWebView() { // Initialize the WebView2 control await WebView2.EnsureCoreWebView2Async(); // Assuming the theme color obtained from Visual Studio is gray, set the color of the corresponding control under this theme. var buttonBackground = Color.FromRgb(128, 128, 128); var buttonForeground = Color.FromRgb(255,255,255); // Create HTML and CSS and dynamically apply theme colors string htmlContent = $@" <html> <head> <style> body {{ background-color: {ToCssColor(buttonBackground)}; color: {ToCssColor(buttonForeground)}; }} button {{ background-color: {ToCssColor(buttonBackground)}; color: {ToCssColor(buttonForeground)}; }} </style> </head> <body> <h1>WebView2 Theme Example</h1> <button>Button</button> </body> </html>"; // Loading HTML content into WebView2 WebView2.NavigateToString(htmlContent); } private string ToCssColor(Color color) { return $"#{color.R:X2}{color.G:X2}{color.B:X2}"; } }

Ajay Gera 20 Reputation points

2024-09-12T11:51:47.5433333+00:00

Hi,

Thanks for the reply but the question is how do I know what color to set for different control for different themes?

e.g. What should be background color for button , button border , text , button selection and same issue for combo box and other controls ?

Hongrui Yu-MSFT 1,605 Reputation points Microsoft Vendor

2024-09-13T06:53:22.2366667+00:00

Hi,@Ajay Gera.

Through the above solution, WebView2 will load its own web page. At this time, the background color of the web page buttons, button borders, etc. needs to be set according to your own preferences. At present, you could set the theme of your own web page by imitating the settings of Visual Studio.

Ajay Gera 20 Reputation points

2024-09-13T07:15:19.12+00:00

Hi,

Thanks for response.

Can you please elaborate more what do you mean by "imitating the settings of Visual Studio"?

Hongrui Yu-MSFT 1,605 Reputation points Microsoft Vendor

2024-09-16T05:54:58.0866667+00:00

Hi,@Ajay Gera. First, with Document, you could listen to whether the theme has changed and how to get the current Visual Studio theme.

You could switch different themes in WebView2 by using the following code.(Note: The following method could only change the theme of the local web page)

Project Structure

MainWindow.xaml

<Window xmlns:vm="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf" … > <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="13*" /> </Grid.RowDefinitions> <Button Content="Change Theme" Click="Button_Click" HorizontalAlignment="Right"></Button> <vm:WebView2 Grid.Row="1" x:Name="MyWebView" Source="https://www.microsoft.com"></vm:WebView2> </Grid> </Window>

MainWindow.xaml.cs

public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); InitializeWebView(); } private async void InitializeWebView() { MyWebView.NavigationCompleted += WebView_NavigationCompleted; MyWebView.Source = new Uri("The address of MainPage.html"); } private void WebView_NavigationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2NavigationCompletedEventArgs e) { ChangeTheme("Dark"); } bool theme = false; private void Button_Click(object sender, RoutedEventArgs e) { if(theme) { ChangeTheme("Dark"); theme = false; } else { ChangeTheme("Light"); theme = true; } } // Load different css files to change different themes of the web page private void ChangeTheme(string Theme) { string css = string.Empty; if (Theme == "Dark") { css = System.IO.File.ReadAllText("Dark.css address"); } else if (Theme == "Light") { css = System.IO.File.ReadAllText("Light.css address"); } string script = $"var style = document.createElement('style'); style.innerHTML = `{css}`; document.head.appendChild(style);"; MyWebView.ExecuteScriptAsync(script); } }

Refer to the theme of Visual Studio to write CSS to provide themes for your own web pages.

In Visual Studio, you could install Visual Studio Color Theme Designer 2022 through Extensions->Manage Extensions... Then you could create a VSTheme Project. Open Custom Theme.vstheme and select Dark under Select a base theme under Quick start.You could now view how the style of this theme is designed. In addition, you could open Custom Theme.vstheme through a file editor, which will make it easier to design your css for different themes.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

how update WebView2 control in C# WPF application as per Color Theme selected in visual studio 2022 like Light, Dark etc

3 answers

Your answer