search

MicrosoftEdge / WebView2Feedback

Feedback and discussions about Microsoft Edge WebView2
https://aka.ms/webview2
423 stars 51 forks source link

[Feature]: Auto Dark Mode for Web Contents #4656

Open Shomnipotence opened 6 days ago

Shomnipotence commented 6 days ago

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 image image

image

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 commented 6 days ago

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

Shomnipotence commented 6 days ago

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

How can I enable it in WebView2？

jls28 commented 6 days ago

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 commented 6 days ago

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 commented 5 days ago

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 commented 5 days ago

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 commented 5 days ago

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

Shomnipotence commented 5 days ago

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