Use WhatsApp on PC? Enable the WhatsApp Web dark mode

Use WhatsApp on PC? Enable the WhatsApp Web dark mode

Since WhatsApp introduced the web version (more like, a companion) to its chat platform, it has been a necessity to our daily life. It’s make it so easy to use WhatsApp right from your PC/Laptop. People use it for traditional reasons, like chatting, viewing statuses, etc., but also for really clever reasons too, like sharing files between your PC/Laptop and your mobile, and so on. So, the bottom line is WhatsApp Web has become a necessity and if you are a fan of dark mode (like me), well now you can enable the WhatsApp Web dark mode with ease. Let me show you how.

Disclaimer

Before we begin, I just want to say that this is not a hacking tutorial by any means. We would only make a simple style related change. That is all I would provide in this guide. This would also include a few optional steps of installing a chrome extension and applying some custom JavaScript. These steps would no way interfere with how WhatsApp works, nor would it mess with any personal data. If you take any step, which is beyond the ones provided in this guide, then it’s completely your decision and responsibility.

Now that we have that settled, lets begin.

Enabling the dark mode

  1. Go to WhatsApp Web
  2. Right click on an empty space (outside the chat box) and choose “Inspect”/”Inspect Element” (or something similar, depending on the browser).
    You can also use the shortcut Ctrl+Shift+I
  3. In the Inspector window, change the class attribute of the body tag from web to web dark
Use WhatsApp on PC? Enable the WhatsApp Web dark mode

And that’s it. The dark mode should be enabled by now.

Now, if you think this process was a bit difficult, you can achieve this with just a single line of javascript. Here’s how:

  1. Open your browser console. Shortcut is F12
  2. Paste the following javascript code and press Enter
document.body.classList.add('dark');

That’s all.

The problem with this is that if you reload your page, the styling is gone. So you would need to re-apply the styling every time you visit WhatsApp Web. That’s not good at all.

Here’s what I did to ensure, that every time I visit WhatsApp Web, the javascript is applied automatically. This step is optional. You might not want to do this since this involves installing a chrome extension (since many people shy away from it). Anyways, if you still want to go ahead with this, then here’s how to do it:

  1. Install this entension. I am using this one for no specific reason, you can use anything similar, if you want or create your own (that would be crazy, but hey, life is crazy)
  2. Paste this javascript code, which would be applied every time you visit WhatsApp Web (The process is self explanatory).
document.body.classList.add('dark');

This is the same code we used earlier.

For Firefox, you can use a similar kind of extension (known as addons).

So that’s it (this is the third time I am saying this). We are all done.

Conclusion

It is pretty evident that WhatsApp Web already has all the styling available for the dark mode. So it is only a matter of time, for WhatsApp to provide a proper way of enabling it via settings. Until then, we can use this workaround.

Your thoughts