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: