Easy CSS dark mode for monochromatic website.

Hello, lately due to my experiments i found cool way to create very simple and fast dark-mode for a website. It can took like just few lines of code to transform a website into dark-mode.

The one thing – to make it really simple your website needs to be monochromatic – for example black/white (or greyish) + one additional color.

You can of course expand this idea for more colorfull websites – but this will be much harder – cause you need to treat every color element seperately.

But lets go to the case. For example i got something like this:

This is one of my designs that i wanted to simply create dark mode from. I’ve done it on design in Photoshop but you can simply convert it also in CSS by adding just two layers (for example):

HTML Structure:
     <div class="dark-mode"></div>
     <div class="color-correction"></div>
     <!-- rest of the website -->

In above code i just created two <div>’s inside a body just above rest of the website and then you need to style them. Let’s firstly start styling first <div> to change website to a dark-mode. The style will look like this:

.dark-mode {     
     position:fixed; // adding fixed - so it'll work on entire website regardless scroll
     height:100%; // making div whole page size
     background-color:white; // this is important - cause this will convert colors to the dark-mode later
     mix-blend-mode: difference; // and this is where magic happens - cause it's turning all lighter colours into darker ones - pure black into pure black and light gray into dark grey
     pointer-events:none; // this is the last step - but also important cause we want our layer to ignore mouse clicks - so you can click layers below     z-index:10; // we want high z-index so it'll be show above all other layers - it can be as high as you can do.

And here you go – you already got dark-mode for the website switched on. But there is one problem – main color was also affected by the difference of .dark-mode. And here is what i’ve got:

As you can see – blue color was changed to red one. But don’t worry! correction is very simple – you just need to copy current (red color) add it to lower layer and apply different mix-blend-mode, so here you go with CSS code for .color-correction <div>:

.color-correction {    
     position:fixed; // also fixed - so it'll work on entire website regardless scroll
     height:100%; // making div whole page size
     background-color:#d95a20; // this is red color copied from example after adding .dark-mode layer      mix-blend-mode: hue; // and that does the trick - cause all hue is translated to red before dark-mode - that way dark-mode will switch it back to blue
     pointer-events:none; // same as above     
     z-index:9; // and this is important - so z-index should be at least one number below .dark-mode <div>

And this is exactly what final dark-mode looks like:

Pretty cool – with adding just two <divs> and a little bit of style huh?

As i mentioned below – you can do that with this simplicity only on website that got one color except black and white – otherwise you’ll need to make color-correction for every single color – so it will not work.

After that – you can use JavaScript just to create a button for switch and change the opacity of the divs – either in CSS with added class or straight in JavaScript – but i presonally prefer using it for classes manipulation and then work directly in CSS.

And that’s it – thanks and happy coding.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *