Built-in Dark Mode for sites

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

Vlad I'm not sure exactly what you mean by "programmable button". Do you mean a bookmarklet, or a userscript that inserts a toggle button in the page?

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:

1. Can automatically detect (a) system dark mode settings and (b) if a website has a built-in dark mode.
2. Can override website built-in dark mode if detection is wrong.
3. Ability to turn on/off globally and for a specific website.
4. Ability to turn on/off via (1) Menu placement next to Reader Mode, (2) Keyboard shortcut similar to Reader Mode, (3) Gestures.

Optional Features:

1. Ability to customize Dark Mode via themes (e.g. Dark, Black, Gray, Sepia) or granular settings
2. Ability to "Disable until Tomorrow" for a specific website
3. Ability to set for "this website" vs. "this URL" i.e. for the domain name vs. the specific URL for even more customizability.

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

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

1. 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.
2. 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.

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.

Wouldn't the new page tweaks feature fulfill this request?

The only caveat is that it requires per-site configuration with no way to have it enabled by default. However, that is not entirely bad as there are some sites where I wouldn't want automatic dark mode in the first place. I consider the page tweaks implementation quite a good compromise and I'd suggest marking this as Next Release
@Vlad