Quick way to implement darkmode in Nuxt.js & Tailwindcss — Corona Virus Tracker

Quick way to add darkmode in Nuxt.js & Tailwindcss project— Corona Virus Tracker

Darkmode is trending and being implemented almost everywhere on web and apps these days, so I thought of implementing it on one of my side projects tvflix.co v2 which is being built with tailwind & nuxt. Dark mode is a good experience for users who visit your webpages & a lot of users asked for & was a little difficult to build earlier, we wil make it in a easy and modular way.

Today we’ll make a small webpage and implement dark mode with the awesome Tailwindcss & Nuxtjs. I will explain a little about them. You can skip this part if you already are aware of them.

TLDR

We will use nuxt-color-mode module and tailwindcss-dark-mode plugin, which will gives us access to dark: selector. Here’s the github repo if you just want to check the code directly & you can see the live demo here.

What’s tailwindcss?

The documentation says:

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

What it means is, tailwindcss will not provide you classes for opinionated frontend sections like cards, accordions, navbars etc, instead you them by yourself, and tailwind will provide classes at a granular level, making you code modular and you have more control over the frame and the end ui.

What’s Nuxt.js?

Nuxt is a framework for Vue.js which will handle a lot of practical use cases like routing, nested routing, prerendering, SSR out of the box, with vue would have to manually setup all these individually and have end up with a lot of boilerplate code.

1.Create a nuxt project by running npx create-nuxt-app darkmode in your terminal, make sure you select the Tailwind CSS UI framework from the options when prompted,which will save a lot of time, unless you want to add tailwindcss module seperately. I also selected axios to make a api call.

1. Let it finish initializing the project, once done open the project in vscode or whatever editor you prefer. Quick tip don’t close the terminal just type code darkmode/ this will open the project in vscode.

2. We will need nuxt-color-mode module and tailwindcss-dark-mode plugin to make it work, let’s install them by running command npm i tailwindcss-dark-mode @nuxtjs/color-mode --save-dev

Let’s make a small webpage which tracks Covid 19 Cases in India. I will be making use of api from Covid19India, a community driven Corona virus tracker which has crowdsourced data, kudos to the team and the people helping. Here is the api endpoint https://api.covid19india.org/data.json.

Since I will be explaning only how to implement dark mode, I will skip explaining how I made the actual page, you can find the code for the project at the end of the article.

This is my page in Light mode.

Light Mode

Now setup the plugins we had installed earlier. You need to add the color-mode nuxt module in your nuxt.config.js inside the buildModules object.

{
  buildModules: [
    '@nuxtjs/color-mode'
  ]
}

Now open your tailwind.config.js file and add the below configuration.

Great, we have setup dark mode configuration on the site.

A brief idea on how the plugin works is, we have access to a special selector called dark: which we can add to our html elements like below

To give a better idea, this below example is using the default tailwind classes.

Code without dark selector

If we want the dark selector added to it, we do it this way.

Code with dark selector

Similarly you will also have access to dark-hover dark-focus dark-active and some other selectors too.

Let’s add the dark mode toggle button to our website. The nuxt color-mode module gives us access to $colorMode helper function globally in our project, we can set its preference value either dark or light $colorMode.preference = 'dark' (or anything if we want, say a sepia mode). I have written a small toggle method to switch between light and dark modes for the site.

A small note, before making a production build. Nuxt also includes purgeCSS when we installed the TailwindCSS framework, which auto removes unused css, since we are adding dark selector classes manually, we need to whitelist them in our nuxt config like below

purgeCSS: {    
  whitelist: ['dark-mode'],  
}

Here is how the site looks in dark mode

Dark Mode

You can see a demo of the final website here, you can find the source code here, just clone it and do a npm install and start the project with npm run dev.

This way of adding dark mode to tailwindcss is not just restricted to Nuxt, you can add it to almost any framework like React, jQuery or vanilla js, all you have to do is add adark-mode class to the html tag, the tailwind plugin will take care of the rest.