Built-in Dark Mode for sites
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)
- Edited
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.
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
The Dark Reader extension on MacOS and especially iOS/iPadOS is regularly buggy and one of the most cited reasons for people not using Orion. Dark mode extensions also require a lot of permissions and so are a potentially privacy / security vulnerability.
Please consider adding a native feature that can force dark mode on every website with keyboard shortcuts / an easy way to toggle on and off in both MacOS and iOS. The Noir app has one of the cleanest UIs and in my opinion works better than Dark Reader and could serve as a template.
Basic Requirements:
- Can automatically detect (a) system dark mode settings and (b) if a website has a built-in dark mode.
- Can override website built-in dark mode if detection is wrong.
- Ability to turn on/off globally and for a specific website.
- Ability to turn on/off via (1) Menu placement next to Reader Mode, (2) Keyboard shortcut similar to Reader Mode, (3) Gestures.
Optional Features:
- Ability to customize Dark Mode via themes (e.g. Dark, Black, Gray, Sepia) or granular settings
- Ability to "Disable until Tomorrow" for a specific website
- Ability to set for "this website" vs. "this URL" i.e. for the domain name vs. the specific URL for even more customizability.
- Edited
@Vlad FWIW this is especially valuable for iOS / iPadOS where the Dark Reader extension remains really buggy and where keyboard shortcuts to toggle on and off continue not to work. Also, the programmable button workaround doesn’t apply to iOS / iPad OS.
Relatedly, being able to toggle dark mode on/off with a gesture would be a meaningful improvement even over Safari with Noir / Dark Reader.
The lack of robust dark mode support across platforms remains my single biggest obstacle to going all-in on Orion over alternatives such as Safari.
CrunchyFritos As far as I know Noir/Dark reader inject about 4MB of javascript to every page. We do not want to do that. This is not an easy problem to solve. We have our own dark mode script that we are still waiting confrmation if it is sufficiently good. it is only 500 bytes long.
https://orionfeedback.org/d/2084-built-in-dark-mode-for-sites/41
- Edited
Vlad is there a way to test this in iOS / iPad? Dark Reader is particularly buggy on those platforms.
Nevermind, figured it out. Seems to work pretty well so far, but it currently only triggers if I go to Settings->Bookmarks->Favorites->Dark Mode Bookmarklet which is really tedious for testing. I tried triggering the bookmarklet from Favorites on the Start Page or using an invocation, but neither methods work. Is that worth submitting as a feature request? Currently it's very tedious to keep testing out this script on iOS / iPad OS but I'd like to help move this along as best I can.
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 has been working so far. One annoying thing is the top and bottom “bars” of the browser don’t match the background:
CrunchyFritos Well mostly we need feedback whether our dark mode script works and then we cna implement it natively. Considering is is only 500 bytes I would be surprised if it worked as well.
CrunchyFritos please can you guide me on how to "install" this bookmarklet for dark mode in ios?