How to Enable Dark Mode With Tailwind CSS (and Pure CSS)

Add color scheme responsiveness to your web app

Photo by Glenn Carstens-Peters on Unsplash

Dark mode (aka a light-on-dark color scheme) has become very popular in the past few years. It’s arguably easier on the eyes and battery and it’s supported by all major operating systems for desktop and mobile devices.

In this article, I’ll show you how you can make your web application responsive to the color scheme chosen by the user with both pure CSS and Tailwind CSS.

If you’re not familiar with Tailwind CSS, I recommend checking out the website and the screencasts to learn more. Also, you can see it and play with it from your browser in this code sandbox.