Skip to main content

Posts

Showing posts with the label dark mode theme

The best way to create a dynamic dark mode in JS for your website

Dark Mode Dark Mode seems to be here to stay. Initially, manly used by developers in their code editors, but now it’s all over the place, from mobile, desktops, and now even the web. Supporting Dark Mode is more and more turning from a nice to have, to a must-have. Of course, depending on your niche, but if you are here, chances are, you want to implement Dark Mode on your site or for your clients. When it comes to dark mode for websites there are multiple approaches on the web. Using JS and CSS The first work is by the use of “dark” magic :p, joke aside, it’s very simple and elegant, and consists of really one line of CSS. html { } html[data-theme='dark'] { background: #000; filter: invert(1) hue-rotate(180deg) } What? You are probably wondering how that could work, and you may be right to be skeptical, but it does indeed. Let’s see it in action before we talk about why I don’t like this option so much: This is the html script <html> <body...