The other day, I wondered how to enable dark mode on any of those bright shiny websites. Before long, I found darkmode-js and the underlying mix-blend-mode: difference
from a post by Wei Gao. Here’s how to use it as a Userscript with Tampermonkey and as a Userstyle with Stylus. See also my earlier post The web, with (your) Style about the two tools.
The idea
It’s simple, yet clever: The HTML page itself is used as a white backdrop, and all content on it gets rendered in “inverse” colors. As compensation to the inverted colors, a hue change of 180 degrees is applied. For images, the original appearance is preserved, to keep prevent a a “negative” impression. Additionally some contrast and de-saturation is applied, because I found that otherwise most websites have a very harsh appearance in this kind of dark mode.
As user script with Tampermonkey
You just need to create a new user script, using darkmode.js. Basically, it only requires the darkmode.js script from the jsdelivr CDN, and just loads it into every webpage:
// ==UserScript== // @name Global Darkmode Widget // @namespace darkmode-js // @version 0.2 // @description Shows the Darkmode Widget all over the place // @author marcel@qrys.ch // @include * // @grant none // @require https://cdn.jsdelivr.net/npm/darkmode-js@1.5.6/lib/darkmode-js.min.js // @updateURL https://github.com/suterma/globaldarkmode/raw/master/Global-Darkmode-Widget.user.js // @downloadURL https://github.com/suterma/globaldarkmode/raw/master/Global-Darkmode-Widget.user.js // @supportURL https://github.com/suterma/globaldarkmode/issues // ==/UserScript== (function() { 'use strict'; new Darkmode().showWidget(); })();
Alternatively, you can get the Global Dark Mode UserScript directly from my GitHub repo.
As a user style with Stylus
As simple, but without the need for loading external JavaScript, Just create a new User Style for all content.
/* ==UserStyle== @name Global Dark Mode @namespace github.com/suterma/globaldarkmode @homepageURL https://github.com/suterma/globaldarkmode @version 1.0.7 @updateURL https://github.com/suterma/globaldarkmode/raw/master/global-dark-mode.chrome.user.css @description A global dark mode, with a soft touch, to be easy on the eyes. (Uses specific structure for Google Chrome) @author marcel@qrys.ch @license GNU-V3.0 ==/UserStyle== */ /* Style in the mozilla format, usable with e.g. the stylus browser extension*/ /*//TODO experimental*/ /* Hint: This specific style is crafted for Google Chrome, as it handles some things different than other browsers */ /*-------------------------------------------------------------------------- * A global black background to replace the typical white canvas of webpages. * Chrome: Use the difference mode right here, to avoid using it on the body *--------------------------------------------------------------------------*/ html { background: black; mix-blend-mode: difference; } /*-------------------------------------------------------------------------- * Defines the whithe body to render the difference onto. * Can not hold the mix-blend-mode property together with the background color. *--------------------------------------------------------------------------*/ body { background: white; filter: hue-rotate(180deg) contrast(0.7) saturate(0.8); }
If you have already installed Stylus, just click the following links to my GitHub repository to have it installed: