Built-in Dark Mode for sites
Is there some update?
MarcoProvinzano Please provide a solution and we will implement it
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.
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
AyaanAhmed25 Find us a lightweight wqy to do it
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.
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.