No official dark mode for WhatsApp Web ? Here is how you can still get it #PaintItBlack
WhatsApp has started rolling out dark mode updates to it’s beta users on both Android and iOS users, but what about WhatsAppWeb ? Although it won’t help save you battery, it might look good to some users.So let’s see how we can paint your Whatsapp Black-
So how can we get dark mode on WhatsApp Web unless WhatsApp launches it officially?
We can’t.But if you are using Google Chrome, there are extensions which help you apply custom styling rules or CSS to websites. CSS or Cascading Style Sheets are parts of website that define how each element on the website looks. So if you have Chrome , you can download any such extension and use a custom css to get dark mode on WhatsApp.
The Steps-
The Chrome Extension:
I used User CSS for this. Go and download this extension and proceed further.
The Dark-Mode CSS:
The job here is simple- Find elements you want to pick and change their properties.We pick elements using the class name or id and change their properties , namely background to define the background color of the element, color to define the text color,and some other tags like width, height, opacity, etc. all of which are self - explanatory.
I don’t work with css much, so not too good, but here is my version of the code which you can use:
/* Top Pink color *//* Couldn't find a good color.Feel free to change*/._1ccjW._39ZZK.app-wrapper-web:after{background:#6b1b42;}
.cGLoy>*{background:black;}
/* Scrollbar */
::-webkit-scrollbar-thumb {
background: #06D755;
}
::-webkit-scrollbar-thumb:hover {
background: #f90095;
}
::-webkit-scrollbar {
width: 25px;
}
/* Corrections */
._26JG5._3EgZq._10L7G{padding-left:0px;}
._3xdMj > *{margin-left:-3%;}
.wjdTm:after{
background:whte;
color:pink;
content:’ #Black Whatsapp Web by Cha0s’;
}
/* Searchbar Sticky bottom */
#side .ZP8RM{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
/* Main */
._2hHc6 > *,._1ovWX,._2WP9Q,._3Q3ui > span,._1ays2,._3H4MS,._3u328,._6xQdq,._19RFN_F7Vk,._1pYs5,._0LqQ,._19RFN._F7Vk,._1qWhd,._3u328.copyable-text.selectable-text,.lz4Mo{color:white;}
._2hHc6 > *,._3H4MS,._3u328,._6xQdq,._19RFN_F7Vk,._1pYs5,._2LSbZ._2j5ir.ujWpH,._3he1q{font-weight: bold;}
._3u328.copyable-text.selectable-text{color:black;}
/* experimental*/
._1zGQT._2ugFP>span>._2Nkc4._15CAo,._1zGQT._2ugFP.tail>span>._2Nkc4._15CAo,._1zGQT._2ugFP>span>._3EQsG._15CAo{background:None;}
._3VIru>span>svg>path,._1zGQT._2ugFP>span>._2Nkc4._15CAo>div>span>svg>path,._1zGQT._2ugFP.tail>span>._2Nkc4._15CAo>div>span>svg>path,._1zGQT._2ugFP>span>._3EQsG._15CAo>div>span>svg>path{fill:white;}
._1ays2,._3-kxx,._1_vLz{background:#0e0e0e;}
._2HHbr,._3fnHB{color:white;}
._3LVMN{background:#171717;opacity:0.99}
.-N6Gq{background:black;color:white;}
._2hHc6 > *,._1ovWX,._2WP9Q,._3Q3ui > span, ._3fs0K > * ,._2LSbZ._2j5ir._1ur1f,._39ZZK,._2avTY > * ,._1WMT2._1lakC,._1c8mz > * ,.sbcXq,._3vpWv,._3vpWv,._2kYeZ,._3fs0K,._2LSbZ._2j5ir.ujWpH,._2LSbZ._2j5ir._2ZVEo,._3_Si,._3EN0l,._2UaNq._2nQ7u,._1H6CJ._1rqO1,._3_-Si,._26JG5.pgYve,._2k1Z5,._27Ie2,._26Nvu._2BqsJ,._1WMT2,._27U_m,.Y1iVg,._1GdY6,#side ._3Jvyf,#main ._3fs0K,._2i7Ej._14Mgc.copyable-area,.rK2ei,._3HCkv,._1KDYa._14Mgc.copyable-area .kiodY,._1H6CJ._1rqO1 > *,._1KDYa._14Mgc.copyable-area > div > .ZP8RM{background-color:#000000;}
._1HjMu{background:rgb(54, 47, 47);opacity:0.9;}
._3vpWv:hover:hover{background:black;opacity:0.8;transition:opacity 1s;}
._1lpto,.ZP8RM > span,.app-wrapper-web{background:white;}
._1zGQT._2ugFP.tail > .tail-container,._2-Q3h,.HGVhc,._1tyVr,._2UaNq._3fAgu{display:None;}
._27Ie2:hover{background:red;transition:background 1s;opacity:0.8}
._2kYeZ > ._3lq69 > ._3j8Pd > div > span > svg > path,._1ZMSM > span > svg > path,._3j8Pd > div > span > svg > path,.hjJpn > span > svg > path,._2DP8_ > button > span > svg > path,._2wn58 > span > svg > path,._2kj3R > span > svg > path,._0LqQ > span > svg >path,._30prC >span >svg >path,._27Kg1 > span > svg > path{fill:white;opacity:1}
._39ZZK,#startup,._30sf0>._1c8mz>._1ebw2>.OWYLS,._30sf0>._1c8mz>._1ebw2,.ZnBGP ._2UaNq._3UYKy,.A6bRq,.ZnBGP ._2UaNq._3UYKy:hover,.A6bRq:hover,#main ._2aUit{background:black;}
All you need to do is open install the extension > go to WhatsappWeb > Click on the User CSS icon near the search bar, you’ll see a tray slide in > Paste the CSS code that you just copied. And Done.
Tried to cover maximum stuff in the css, feel free to change it and tell if you find a better color scheme / unchanged elements.
