zs3.me

How to Force Any Web Page to be Dark Mode using Javascript
Revision 6
© 2019-2022 by Zack Smith. All rights reserved.

Why implement dark mode in Javascript?

  1. Some browsers do not yet support proper dark mode correctly (e.g. Firefox 76 on Debian Linux).
  2. Millions of websites do not yet implement dark mode correctly or at all.
  3. While there are plugins for dark mode, plugins should be avoided as they are another means by which your computer can be hacked.

How dark mode is supposed to be implemented

The now-standard way to implement dark mode is in the CSS files by providing two @media directives.

For this to work two things must happen:

  1. Websites have to provide @media obviously;
  2. Your browser must support @media when provided.

It looks like this:

 :root { color-scheme: dark light; }
 @media (prefers-color-scheme: light) {
  body {background-color: #f0f0f0; color:#000000; }
 }
 @media (prefers-color-scheme: dark) {
  body {background-color: #000000; color:yellow; }
 }

When dark mode is implemented this way it works seamlessly even on some older browsers.

How to implement a forced dark mode using Javascript

Here is a workaround that I have developed in Javascript to impose dark mode on any web page.

This code could be used by websites to implement dark mode using a button, however I use it as a bookmark as detailed in the next section.

I use a simple strategy:

  1. Find all the tags of each concievable type.
  2. One by one, set their background to black and foreground to amber.
  3. Apply special rules for special tags e.g. web links are green.

 var body=document.getElementsByTagName("BODY")[0];
 var html=document.getElementsByTagName("HTML")[0];
 html.style.backgroundColor="#303000";
 body.style.backgroundColor="black";
 body.style.color="#f0e000";
 var tags=["FOOTER","HEADER","MAIN","SECTION",
  "NAV","FORM",
  "FONT","EM","B","I","U",
  "INPUT","P","BUTTON","OL","UL","A","DIV",
  "TD","TH","SPAN","LI",
  "H1","H2","H3","H4","H5","H6",
  "DD","DT",
  "INCLUDE-FRAGMENT","ARTICLE"
 ];
 for(let tag of tags){
  for(let item of document.getElementsByTagName(tag)){
   item.style.backgroundColor="black";
   item.style.color="#ffe000";
  }
 }
 for(let tag of["CODE","PRE"]){
  for(let item of document.getElementsByTagName(tag)){
   item.style.backgroundColor="black";
   item.style.color="green";
  }
 }
 for(let tag of document.getElementsByTagName("INPUT")){
  tag.style.border="solid 1px #bbb";
 }
 var videos=document.getElementsByTagName("VIDEO");
 for(let video of videos){
  video.style.backgroundColor="black";
 }
 for(let tag of document.getElementsByTagName("TH")){
  tag.style.borderBottom="solid 1px yellow";
 }
 for(let tag of document.getElementsByTagName("A")){
  tag.style.color="cyan";
 }

How to use this as a bookmark

On a daily basis you will encounter websites that

  1. Have not implemented dark mode in the correct way using CSS @media;
  2. Have not implemented dark mode using a user preference like Youtube does;
  3. And nevertheless they use bright, white backgrounds that are blinding.

In such a scenario, which is all too common, it behooves you for the sake of your eyes to force dark mode upon such web pages yourself.

That is why I originally wrote the above Javascript. I merely click on a bookmark in my bookmark toolbar in Firefox, which changes the colors en masse of the current web page.

And not only that, it imposes a dark mode that I find pleasing, unlike some of the dark modes that websites have implemented.

Here's that URL, which you can add to your bookmarks toolbar:

CLICK ME

Is this a complete solution?

No, not yet. There remain some problems:

  1. Some rare websites try to be too clever and have DIV tags with clear backgrounds which overlap other text; setting them to black causes text to become obscured.
  2. Some websites use image backgrounds that are blank solid white i.e. not something meaningful like a photo, and such deleterious image backgrounds can't be overridden without potentially harming meaningful image backgrounds.
  3. Many images like graphs have solid white background that remain glaring and hard to look at.

Nevertheless I find this technique works for most websites that I go to.

Is there another solution?

Websites that afflict users with a wall of white background are a problem because LCD monitors are generating light and a white background is just too much light and this causes eye strain.

There is a solution to eye strain however in the form of e-Ink monitors, which can operate as a reflective surface rather than be backlighted or sidelighted.

But e-Ink monitors are very expensive, they have slow response times, and they suffer from ghosting.

1857942284