How we can achieve Theming WebView2 content in Visual Studio 2022 WPF application?

Question

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.

Answer

Hi,@Ajay Gera. Welcome to Microsoft Q&A.

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 = $@"

        

        

            

        

        

            WebView2 Theme Example

            

        

        ";

 

        // Loading HTML content into WebView2

        WebView2.NavigateToString(htmlContent);

    }

 

    private string ToCssColor(Color color)

    {

        return $"#{color.R:X2}{color.G:X2}{color.B:X2}";

    }

}

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.

Share via

How we can achieve Theming WebView2 content in Visual Studio 2022 WPF application?

1 answer

Your answer