Displaying webpage in dark mode

[ajtruckle]

I notice in Microsoft Edge it has a toggle to attempt to display the loaded page in dark mode.

I appreciate that nothing can be better than a dedicated dark colour scheme using CSS, but is it possible to toggle this same setting for a page using WebView2?

[sivMSFT]

Hi @ajtruckle,

Just to clarify, are you looking for a feature that includes a toggle button for wv2 users to switch between Light and Dark Mode? Also, are you inquiring whether this feature is currently live?

Thank you!

[ajtruckle]

Hi @sivMSFT

1. I refer to this toggle. I understand it renders page in dark mode?

2. Yes, is this option available?

[sivMSFT]

Hi @ajtruckle, you can use the CoreWebView2Profile.PreferredColorScheme property to set the dark mode. This property allows you to choose between dark mode, light mode, or the OS default, and it should apply to all the WebView2 owned UI.

You can also enable Auto Dark Mode through AdditionalBrowserArguments:
new CoreWebView2EnvironmentOptions() { AdditionalBrowserArguments = "--enable-features=WebContentsForceDark" };

[ajtruckle]

@sivMSFT
Thanks, the first suggestion was useful because now my browser control reflects my application theme setting. Thank you. 🙏

But, as for the other aspect of this, it looks like I need to use media queries. For example:

/* Dark mode for screens only */
@media screen and (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

I have tested in Edge so assume that WebView2 will also work.