Most of the developers like dark mode. But creating a dark mode for a site is ... hard. But wait! I have a solution for you. This is only less than 20 lines of CSS! so let's begin.
Show me a preview first.
Okay if you don't believe it, check this codepen I made just for you.
Nice isn't it? So let's get started.
The trick!
We first make an :after
pseudo-element of the Html
element like this. And of course, we add it only for the dark mode.
html.dark:after { content: ""; /** won't create element if we don't use this **/ }
Now we make the element be the same height and width as the screen.
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
Now here's the best part.
background: white;
mix-blend-mode: difference;
And we're done!
Uh. Oh wait I forgot, we must add a background to the body to work.
html.dark {
background: white;
}
You can change the body background darkness easily by changing the colors o light values.
#e4e4e4 -> Somewhat dark but easy to your eyes
And finally, add this so your images don't get wasted!
html.dark iframe,
html.dark img,
html.dark svg,
html.dark embed {
mix-blend-mode: difference;
}
And that's all for the post now. Here's the full code.
html.dark:after {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: white;
mix-blend-mode: difference;
content: "";
pointer-events: none;
}
html.dark iframe,
html.dark img,
html.dark svg,
html.dark embed {
mix-blend-mode: difference;
}
html.dark {
background: white;
}