[Feature]: Auto Dark Mode for Web Contents

[Shomnipotence]

Describe the feature/enhancement you need

Automatically render all web contents using a dark theme

In the Android, this function has been integrated into the Android Webview https://stackoverflow.com/questions/62548348/how-to-force-dark-web-pages-in-android-webview

The following shows the approximate effect of smart forced dark mode in Edge and Chrome browsers

The scenario/use case where you would use this feature

We often need to introduce dark mode web pages in the dark mode interface to achieve a consistent appearance. If the web page colors can be automatically inverted, it will greatly reduce the development cost of the web page - otherwise we will have to prepare two sets of color schemes for the web page.

Now, these operations sometimes rely on browser plug-ins, but if only individual web pages need to be accessed, introducing plug-ins for them is too bloated.

Edge includes this feature, namely Auto Dark Mode for Web Contents

How important is this request to you?

Critical. My app's basic functions wouldn't work without it.

Suggested implementation

Enable this API in Webview

What does your app do? Is there a pending deadline for this request?

No response

[jls28]

You can activate the experimental dark mode(s) available here : edge://flags/#enable-force-dark

[Shomnipotence]

You can activate the experimental dark mode(s) available here : edge://flags/#enable-force-dark

How can I enable it in WebView2？

[jls28]

Goto the address : edge://flags/#enable-force-dark and (at section "Auto Dark Mode for Web Contents") choose one of dark-mode availables in place of "Default". You need to restart your app to apply. It apply globally to all web pages visited. (this work also with msEdge).

[victorhuangwq]

You should also be able to set browser flags programmatically through https://learn.microsoft.com/en-us/microsoft-edge/webview2/concepts/webview-features-flags?tabs=winrtcsharp#setting-browser-flags-programmatically-through-code

[Shomnipotence]

Goto the address : edge://flags/#enable-force-dark and (at section "Auto Dark Mode for Web Contents") choose one of dark-mode availables in place of "Default". You need to restart your app to apply. It apply globally to all web pages visited. (this work also with msEdge).

My feedback is about WebView2, not Edge

[Shomnipotence]

You should also be able to set browser flags programmatically through https://learn.microsoft.com/en-us/microsoft-edge/webview2/concepts/webview-features-flags?tabs=winrtcsharp#setting-browser-flags-programmatically-through-code

Auto Dark Mode for Web content is not in the flag support list described at https://learn.microsoft.com/en-us/microsoft-edge/webview2/concepts/webview-features-flags?tabs=winrtcsharp#setting-browser-flags-programmatically-through-code

[Danielx64]

Doesn't it relies on webpage having proper support being made to enable dark themes?

[Shomnipotence]

Doesn't it relies on webpage having proper support being made to enable dark themes?

No, this is a fallback for web pages that don't support dark mode. That's why it used to be called forced dark mode.

In theory, it follows this order Forced dark/light mode If the website developer provides a dark mode, it will automatically switch between dark and light colors instead of using code-based forced inversion of colors

[ArtemAvramenko]

Enabling Auto Dark Mode works through AdditionalBrowserArguments:

new CoreWebView2EnvironmentOptions()
{
    AdditionalBrowserArguments = "--enable-features=WebContentsForceDark",
};