Implementing dark mode using Tailwind 3.0
Dark mode (or night mode) has been an inherently important feature that has been with all the latest operating systems. Windows comes with a dark mode, macOS as well and even most Linux distributions are offering it.
And with the rise of the dark mode increases the requests to implement one with your favorite websites as well. So, if you’re having a website, you might as well consider implementing a dark mode, aren’t you?
Well, if your website is built on top of Tailwind CSS and you’re planning to upgrade it to its latest version 3.0, it’s rather pretty easy to implement a dark mode for your website.
The dark: variant
Continuing its utility-based approach, the Tailwind v3 now comes with a new dark: variant (just like focus: and hover: variants) that lets you manage how certain parts of your website behave when the dark mode is applied.
There are two strategies using which you can implement dark mode using this variant.
- The
mediastrategy - The
darkstrategy
The media strategy
Under the hood, the dark: variant uses the prefers-color-scheme CSS media query feature to decide whether to apply dark mode or light mode.
Let’s say, for instance, we have the following markup with the Tailwind classes.
<div class="text-gray-900 bg-white shadow-xl">
<p class="px-6 pb-8 ml-4">
Light mode
</p>
</div>
Now, if you can notice, in this example, the <div> has white background through the bg-white class and the text color is the variant of gray through the text-gray-900.
So, if we want to make it compatible with the dark mode, we need to make the background darker and the text with a brighter color.
This can be done using the dark: variant like so.
<div class="text-gray-900 dark:text-gray-200 bg-white dark:bg-gray-900 shadow-xl">
<p class="ml-4">
Light/Dark mode
</p>
</div>
As you can tell, we have now a darker background color in form of the dark:bg-gray-900 class and a brighter text in form of dark:text-gray-200.
So, if you switch your operating system’s color scheme to dark mode, this particular portion of the website will behave accordingly.
And since this depends on the prefers-color-scheme CSS media query to determine the dark mode, this is called the media strategy.
The class strategy
Sometimes, you might want to give the user the ability to switch between dark/mode explicitly in form of a toggle.
In such cases, you should use the class strategy.
For this, first, you’ll need to add a new configuration to the tailwind.config.js called darkMode with value “class” like so.
module.exports = {
darkMode: 'class',
// ...
}
Once that is done, you’ll need to add the dark class to the parent up in the HTML tree in which you want the dark mode to be controlled. In most cases, this will be the body of the HTML.
So, the previous example can be rewritten like so.
<body class="dark">
<div class="text-gray-900 dark:text-gray-200 bg-white dark:bg-gray-900 shadow-xl">
<p class="ml-4">
Light/Dark mode
</p>
</div>
</body>
Now instead of dark:{class} classes being applied based on prefers-color-scheme, they will be applied whenever the dark class is present earlier in the HTML tree.
So, if you want to toggle the dark mode manually, all you need to do is to toggle the dark class of the body, let’s say, using JavaScript.
Something like so.
function toggleDarkMode() {
var element = document.getElementById("parent");
element.classList.toggle("dark");
}
Check it out in the action in the CodePen below.
See the Pen Untitled by Amit Merchant (@amit_merchant) on CodePen.
In Closing
As you can tell, implementing a dark mode with Tailwind v3 is pretty easy but do keep in mind that you’ll need to craft each component of your website for dark mode as per your liking. It’s you who is in total control of choosing the colors of your website’s dark mode.
Watch in the video format.
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
