Quick way to implement darkmode in Nuxt.js & Tailwindcss — Corona Virus Tracker
Tags: javascript, coronavirus, tailwindcss, vue
Published: 2020-04-18 14:13:16

---
title: Quick way to implement darkmode in Nuxt.js & Tailwindcss — Corona Virus Tracker
published: true
date: 2020-04-18 10:10:17 UTC
tags: javascript,coronavirus,tailwind-css,vuejs
canonical_url: https://medium.com/@fayazara/quick-way-to-implement-darkmode-in-nuxt-js-tailwindcss-corona-virus-tracker-712d004a0846
cover_image: https://cdn-images-1.medium.com/max/1013/1*9z3vKvVA9TCqv5ODedaARA.png
---

### 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](https://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](https://github.com/nuxt-community/color-mode-module) module and [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) plugin, which will gives us access to `dark:` selector. Here’s the [github repo](https://github.com/fayazara/nuxt-tailwind-darkmode) if you just want to check the code directly & you can see the live [demo](http://covid19-nuxtjs.surge.sh/) 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.

![](https://cdn-images-1.medium.com/max/612/1*geIiVIiwz7-r0Gby046zYQ.png)

2. 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.

3. We will need [nuxt-color-mode](https://github.com/nuxt-community/color-mode-module) module and [tailwindcss-dark-mode](https://github.com/ChanceArthur/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](https://www.covid19india.org/), 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](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.

![](https://cdn-images-1.medium.com/max/1024/1*tVJbQVZ3wzcfLkTt7X0kcw.png)<figcaption>Light Mode</figcaption>

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.

{% gist https://gist.github.com/fayazara/5d95dda869423bc5603539380cb8ad48.js %}

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.

![](https://cdn-images-1.medium.com/max/1024/1*hjC9ZKzPm_jGdVoqkIIITg.png)<figcaption>Code without dark selector</figcaption>

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

![](https://cdn-images-1.medium.com/max/1024/1*wXS5nj4v12Shkfs-c2I2Iw.png)<figcaption>Code with dark selector</figcaption>

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.

{%gist https://gist.github.com/fayazara/374605faf20df74000db150a4ff4d529 %}

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

![](https://cdn-images-1.medium.com/max/1024/1*-qJWkK4hocndYHdh11eF6w.png)<figcaption>Dark Mode</figcaption>

You can see a demo of the final website [here](http://covid19-nuxtjs.surge.sh/), you can find the source code [here](https://github.com/fayazara/nuxt-tailwind-darkmode), 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.