5min – Enabling Dark Theme for WhatsApp Web

Posted on by alvonsius

The Dark Theme for WhatsApp Web will be released soon … that’s the news I heard since some times ago. And yet it hasn’t released yet until today. But some internet sources mentioned if you play with the CSS you can enable the dark theme by adding a class “dark” into the <body>

So why don’t I create a chrome extensions script to automagically add a new class when the page is loaded? Yes, there alreasy a bunch of tools and extensions out there related to this, but do-it-yourself thing is kind of cool for me, since I haven’t touch an editor since a looooong time ago haha ..

Actually this is pretty simple script, just two files with several lines of code

manifest.json

{
    "name"      : "Dark Mode for Whatssap Ala Ala",
    "version"   : "1.0",
    "description" : "Simple Dark Mode for Whatssap",
    "manifest_version" : 2,
    "content_scripts" : [
        {
            "matches" : ["https://web.whatsapp.com//*"],
            "js" : ["go-dark.js"]
        }
    ]
}

go-dark.js

var body = document.body;
body.classList.add("dark");

How to add to Chrome

(disclaimer : this is only my hobby, I will not maintain the extensions and use at your own risk)

  1. If you are someone who thinks coding is not from your world, just download the file here
  2. Extract the file, anywhere you want
  3. Open Chrome and go to Settings
  4. Select Extensions
  5. Enable the Developer Mode
  6. Select Load Unpacked and select the folder where you extract the downloaded file
  7. Make sure it’s enabled
  8. Refresh your WhatsApp web

Enjoy the Dark Theme!!

Leave a comment