Via icon indicating copy to clipboard operation
Via copied to clipboard

Force Dark Mode feature in Android 5.0 to 9.0 using WebView for web apps without breaking web page or some bugs

Open sam-gq opened this issue 2 years ago • 3 comments

Hello boys, uhhm.. I would like to file an issue regarding the Via Browser's Force Night Mode and Dark Theme Web API for all sites that I don't understand about. It's my first time to discuss about, after I realize using Via Browser so long. Ok? Let's go.

Before we get started:

  • I have upgraded the Via Browser with version 4.3.7 (20220331), so you may notice something new issue in this version I made.
  • I have read about README of the repo.
  • I have provided the debug information with 3 devices below with latest Chrome version possible.

Describe an issue: When I turn on Night Mode with Force dark operation for web pages and visit https://mangadex.org/, it shows that something not looking good and weird thing that I can't explain it.

Here are the few screenshots there. Screenshot_20220407_073139 Screenshot_20220407_073112 Phone: vivo vivo 1820(1820) App Version: 4.3.7(20220331) Snapshot Time: 2022-04-07 07:35:49 CPU ABI: arm64-v8a Screen: 1436x720 Android Version: 8.1.0 API27 Language: en-US WebView Impl: com.android.chrome WebView Version: 100.0.4896.79(489607923)

While on my device, here is the same thing: Screenshot_20220407-073229 Screenshot_20220407-073219 Phone: Cherry_Mobile Omega X(Omega_X) App Version: 4.3.7(20220331) Snapshot Time: 2022-04-07 07:37:37 CPU ABI: arm64-v8a Screen: 1382x720 Android Version: 9 API28 Language: en-US WebView Impl: com.android.chrome WebView Version: 100.0.4896.79(489607923)

It seems that Via Browser does not use Dark Theme API feature as I expected. But I tested it should work on some browser, such as WebView Shell [1.0].apk with Force Dark Mode for all sites using Web API.

And I don't think for older Chrome WebVew introduce the Force Dark available. Or maybe when I try on latest Chrome WebView seems fine and should work natively with other apps like Via.

Expected Behaviour: I expected that Via Browser should work Force Dark Theme as the Web API on some bit older Android versions. But I was surprised that on my Android 10 with Dark theme with Force Night mode ON for https://mangadex.org/, it renders perfectly fine without issues.

Here is the screenshots below: Screenshot_20220407-073305 Screenshot_20220407-073316 Phone: Alldocube iPlay_20(iPlay_20) App Version: 4.3.7(20220331) Snapshot Time: 2022-04-07 07:38:49 CPU ABI: arm64-v8a Screen: 1892x1200 Android Version: 10 API29 Language: en-US WebView Impl: com.google.android.webview WebView Version: 100.0.4896.79(489607933)

So I think, the Via Browser for Android 5.0 or 6.0 to 9 do not use Dark Theme (Web API) for all sites, while Android 10+ works fine with the API. On the Android 10+ it will show the toast message that the Via Browser follow the system theme if system dark theme is enabled. Screenshot_20220407-073401~01

Thoughts and ideas: Any thoughts and ideas how can you apply the Dark theme using Web API for all sites support it or from Chrome's (WebView) Native Dark theme for older Android version. Let me know about it and I'll check it out for about a weeks because of my studies. And Have a great day, specially for @tuyafeng who made the most lightweight browser. Take care!

sam-gq avatar Apr 07 '22 01:04 sam-gq

@samqplays Thanks for your feedback. Let me tell you something about the force dark feature. When the feature is enabled, it has some differences in different android versions. In android 10 and above, it will use the forceDark feature of webview, which means the webview has force dark enabled. But when you're using a device below android 10, Via injects the dark mode stylesheet into the web page to archive the forced dark feature. This is all because the forced dark feature of webview was introduced after android 10+.

tuyafeng avatar Apr 07 '22 03:04 tuyafeng

Alrigh thank you for your reply @tuyafeng, I understand how force dark feature works on different android versions, so I can manually enable dark theme only on the website if they can.

And I hope that Dark theme for webview will natively support in Via for device with Android 5.0 to 9 based on WebView just did in Android 10+. As an alternative, they can choose whether in WebViews Dark theme or the Via's Dark theme.

Well then, I'll close the issue for now, and Have a great day.

sam-gq avatar Apr 07 '22 11:04 sam-gq

Mr @tuyafeng, I have some questions regarding Dark Mode in WebView, so I reopen this issue. It is possible to use FORCE_DARK_ON or FORCE_DARK_OFF on all web content not only in Android 10, but also on older Android 5.0 to 9 that requires WebView version 76 or above.

I have tested with my Android 9.0 with lalest WebView 101.0.4951.61 Phone: Cherry_Mobile Omega X(Omega_X) Package: mark.via.gp App Version: 4.3.8(20220514) Snapshot Time: 2022-05-16 19:51:12 CPU ABI: arm64-v8a Screen: 1382x720 Android Version: 9 API28 Language: en-US WebView Impl: com.android.chrome WebView Version: 101.0.4951.61(495106123)

Here is the comparison between Via and WebView Browser Tester: SCR_2022_05_16_19_40_59 *Via Browser on Android 9 with Force Dark does not use FORCE_DARK_ON with some bugs.

SCR_2022_05_16_19_37_01 *WebView Browser Tester on Android 9 with Force Dark On selected, uses FORCE_DARK_ON with no bugs. So it can be overriten even I'm not in Android 10 or above.

WebView Browser Tester can be downloaded here

This feature even on Android 5.0 to 9 can be force darken using FORCE_DARK_ON or FORCE_DARK_OFF that only works on WebView version 76 or above to be installed on device (or consider upgrade WebView/Chrome to latest version to work FORCE_DARK_ON properly).

What do you think? Is there any way to do that? Please let me know, I was exited to have FORCE_DARK_ON on my Android 9 without bugs. So I can browse any web using Dark Mode without breaking any web pages.

sam-gq avatar May 16 '22 12:05 sam-gq