A global Dark Mode for your browser

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:

A Global Dark Mode User Style

A Global Dark Mode User Style (optimzed for Google Chrome)