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 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 for the inverted colors, a hue change of 180 degrees is applied. For images, the original appearance is preserved, to keep prevent a “negative” impression. Additionally, some contrast and de-saturation are applied, because I found that otherwise, most websites have a very harsh appearance in this kind of dark mode.
How it works: a Userstyle with Stylus
Stylus (or a similar project called Stylish) is a browser extension, available for Chrome, Firefox, and Opera browsers. Since it uses only CSS (via so-called userstyles), there is no need to use JavaScript. Thus, extensions like Greasemonkey or Tampermonkey are not needed, eliminating the potential security implications. In this example, I just create a new userstyle for all content.
Since Chrome and Firefox handle things slightly differently, I wrote two styles, for each Browser. This is the Userstyle for Chrome:
/* ==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). To be used with the Stylus browser extension.
@author marcel@qrys.ch
@license GNU-V3.0
==/UserStyle== */
/* 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);
}
/*--------------------------------------------------------------------------
* Images should be displayed as normal, thus invert them back
*--------------------------------------------------------------------------*/
video,
img {
/*inverts again, causing normal display (with hue also back to original)*/
filter: hue-rotate(180deg);
mix-blend-mode: difference;
}
/*--------------------------------------------------------------------------
* Tweaks for some well-known (at least to me) sites
*--------------------------------------------------------------------------*/
/*@document domain("srf.ch")*/
/* For their video player */
.letterbox-web,
.subdivisions__list/*convert the images in the peek display back*/
{
/*inverts again, causing normal display (with hue also back to original)*/
filter: hue-rotate(180deg);
mix-blend-mode: difference;
}
Installation
If you have already installed Stylus, just click the following links to my GitHub repository to have it installed: