Auto dark mode for all sites

[097115]

As discussed here, chromium has an automatic dark mode for any site, which can be turned on either by going to chrome://flags and enabling #enable-force-dark flag, or by the command line option --enable-features=WebContentsForceDark. In other words, if in chromium you enable this feature and visit, say, bbc.co.uk, which has no dark mode, it will still show the site with the dark theme (just in case, I did test this in chromium, and it works :)).

And @PalmerAL (thanks for all your work, btw!) has suggested that in Min, it can be set through adding either enableBlinkFeatures, or additionalArguments in https://github.com/minbrowser/min/blob/master/main/viewManager.js#L11. Which seems logical.

Now, I tried this:

--- a/main/viewManager.js
+++ b/main/viewManager.js
@@ -26,6 +26,7 @@ function getDefaultViewWebPreferences () {
       autoplayPolicy: (settings.get('enableAutoplay') ? 'no-user-gesture-required' : 'user-gesture-required'),
       // match Chrome's default for anti-fingerprinting purposes (Electron defaults to 0)
       minimumFontSize: 6,
+      additionalArguments: ['--enable-features=WebContentsForceDark'],
       javascript: !(settings.get('filtering')?.contentTypes?.includes('script'))
     }
   )

...or this (taking the possible feature names from RuntimeEnabledFeatures.json5 file):

--- a/main/viewManager.js
+++ b/main/viewManager.js
@@ -26,6 +26,7 @@ function getDefaultViewWebPreferences () {
       autoplayPolicy: (settings.get('enableAutoplay') ? 'no-user-gesture-required' : 'user-gesture-required'),
       // match Chrome's default for anti-fingerprinting purposes (Electron defaults to 0)
       minimumFontSize: 6,
+      enableBlinkFeatures: ['AutoDarkMode', 'WebAppDarkMode', 'WebContentsForceDark'],
       javascript: !(settings.get('filtering')?.contentTypes?.includes('script'))
     }
   )

...but as far as I can tell, nothing has changed (bbc.co.uk still shows up light, and though the automatic dark mode can be toggled in the Dev tools, it goes back to light as soon as the the Dev tools panel is closed).

So, what am I doing wrong? :) And is it really possible (sounds like a great feature honestly¹)? Would be grateful for any advise :)

Footnotes

1. Yes, there's a nice little userscript for Min that can force the dark mode for all sites but with userscripts there still always will be a latency before going dark that would make the site contents blink... ↩

[ahmeteid7]

that is the only feature that i wish min browser have it, i found the userscript of the darkreader extension and used it in min , it worked good, but it's not good like the flag of chrome

[PalmerAL]

I started looking a little bit at how this works in Chrome:

1. The feature is defined here (this is the --enable-features list: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/common/features.cc;l=1100-1102;bpv=0;bpt=1
2. Then this code checks for the flag and sets a related property on a preference object, kWebkitForceDarkModeEnabled: https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/prefs/prefs_tab_helper.cc;l=383-388;drc=d7d69375c25df2dc3980e6a4edc5d032ec940efc;bpv=0;bpt=1
3. Then this code looks for that property, and sets a flag on the webPreferences object: https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/chrome_content_browser_client.cc;l=4108-4109;drc=d7d69375c25df2dc3980e6a4edc5d032ec940efc;bpv=0;bpt=1

I'm speculating here, but I think the problem is that the code in 2) is in the /ui portion of Chromium, which generally isn't included in Electron, which breaks the chain of enabling the preference.

I believe the corresponding Electron code to 3) is ElectronBrowserClient::OverrideWebkitPrefs and this function: https://github.com/electron/electron/blob/42164d70813b32390426e372003f9f144a811593/shell/browser/web_contents_preferences.cc#L401 . That implies we would need to add a webPreference option to Electron for this: https://www.electronjs.org/docs/latest/api/structures/web-preferences.

---

However, since this feature is experimental in Chrome:

1. I'm not sure what Electron's position on adding experimental features as webPreferences is - I expect they won't want to
2. I don't know if we want to do that either - the risk would be that we add this option in Min, and then shortly afterwards Chrome decides to remove it and we have to as well

[097115]

@PalmerAL, thanks for the details, as always!

(Since there's no easy way to implement this -- and there are indeed those rightly noted "however" points -- please, feel free to close this issue if you think that would be for the best. Thanks again :)

[PalmerAL]

It seems like it's possible to reduce the latency a lot by putting the CSS inside the preload script (https://github.com/minbrowser/min/blob/master/js/preload/default.js):

electron.webFrame.insertCSS(`
html {
  background-color: #ddd;
  filter: hue-rotate(180deg) invert(100%) !important;
}
body {
  margin: 0;
  background-color: #ddd;
  /* twitter.com */
  min-height: 100vh;
}

iframe, img, video, canvas {
filter: hue-rotate(180deg) invert(100%) !important;
}`)

However, the reason for not including this as a default feature originally was that the results aren't always good (for example, on sites that already are dark-themed), more than the latency.

[ahmeteid7]

However, the reason for not including this as a default feature originally was that the results aren't always good (for example, on sites that already are dark-themed), more than the latency.

We can use it as toggle context-menu instead of auto dark mode to avoid the problem of the sites that are dark-themed.
does that script have problem with the pictures and videos, or it is ok?