Built-in Dark Mode for sites

Vlad

danielCook Can you let us know where we can find their approach?

MarcoProvinzano

Can you add a native dark mode in browser? It is the only feature that it is missing in this fantastic browser.
I use IOS version

MarcoProvinzano

MarcoProvinzano I also use Alook Browser on IOS and it has a fantastic black mode inside

Vlad

MarcoProvinzano Orion already has native dark mode. Can you clarify with some screenshots?

MarcoProvinzano

Vlad I said dark mode on website (Facebook, Instagram…etc)

MarcoProvinzano

MarcoProvinzano such ad Safari with Noir extension.
I’d like to have a native solution on this fantastic browser

MarcoProvinzano

Is there some update?

Vlad

MarcoProvinzano Please provide a solution and we will implement it

chirag

Many website support dark mode but we need extra extension for those which dosen't support. If we have in built dark mode which take care of performance as well as beautiful dark UI then it will help many of us who really like dark UI on every websie.

AyaanAhmed25

i was just about to post about this! Yea, currently im using the extension dark reader because even with orion preferences set to dark mode, not all websites get dark mode, thats why i got the extension, however the extension is not exactly light weight and having it built in would have been more convenient

Vlad

AyaanAhmed25 Find us a lightweight wqy to do it 🙂

BingLee

Vlad DarkReader publishes an NPM package comprising some version of the core logic, available as a UMD or ES module. The latter weighs 330KB (110KB minified). In both Firefox and Orion I've configured a userscript to inject the script at "document-start". It works well enough for me (there is no non-dark FOUC). Firefox DevTools seems to indicate the performance impacts are modest (~40ms on my 11th Gen laptop), though I don't know exactly what the target is here (certainly the script is not 500 bytes). The code is MIT-licensed. Perhaps this module could be the basis of a sufficiently performant dark mode function?

In lieu of that, if anyone what like to implement something similar, see these userscripts for reference:
https://greasyfork.org/scripts/466058-dark-reader
https://github.com/darkreader/darkreader/issues/926#issuecomment-575893299

Xyth

The dark mode script that's available via the Programmable button seems to work well enough and is very fast. Maybe that could be added to Website Settings? Seems to me that all the necessary functionality exists in Orion, just needs to be combined.

Vlad

Xyth It is fast and small but not comprehensive. This is why we open sourced it and made avaialble through Programmable buttons but I do not think we would advertise this as a Orion-level standard of quality to be included in the default menu.

EarthyAlien

Vlad This makes sense, but this workaround has a couple issues that maybe the team could try to resolve as a temporary fix?

The Programmable button doesn't trigger automatically, so relying on using the Programmable button workaround still subjects users to bright flashes of light every time the reload or go to a new web page.
As of now, the Programmable button workaround is not available on iOS / iPad OS. Is there another way to make this easily triggerable for iOS users? Perhaps by making bookmarklets triggerable through gestures, Favorites, invocation, etc.

Vlad

Can someone check using this as a bookmarklet https://github.com/OrionBrowser/DarkMode and report if it works as expected? This would be super lightweight to do dark mode (compared to dark reader which inserts 4MB+ javascript into every page you visit)

httpjames

Vlad It kind of works? Not really as well as Dark Reader, and since it relies on injecting inline styles, it won't work on sites with strict CSPs, like addy.io.

On Hetzner, it makes some elements actually brighter:

I believe Dark Reader prevents this by checking the actual rendered hues and adjusting accordingly. Noir for Safari darkens images instead of inverting their colours, which I think is the best approach.

kecinzer

Vlad This works perfectly fine for me. It's possible to implement it as Darkmode switch for websites?

EarthyAlien

Vlad has been working so far. One annoying thing is the top and bottom “bars” of the browser don’t match the background:

Vlad

httpjames Yes and this is why dark reader has to inject 4MB of js into every page you visit. Our code is 500 bytes. I was hoping it will be good enough as we do not want to bloat the browser to do this.

Vlad

kecinzer You can already add it as a programmable button in Orion

« Previous Page Next Page »