A Step-by-Step Guide to Implement Dark Mode and Light Mode on Your Nuxt.js 3

About Nuxt.js and It’s color mode library

Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.

The core functionality of Nuxt is its “built-in” module system. Nuxt’s modules make it easier for developers to extend the functionality of the framework and integrate external libraries into their projects. With its variety of modules, Nuxt helps to simplify the process of creating great experiences for website visitors. One of the modules that can help with creating great experiences regarding color theme is @nuxtjs/colormode. The module makes it easy to implement dark and light modes on your website.

Let’s get started

To install the @nuxtjs/colormode module, you first need to install the Nuxt framework. You can install Nuxt by running the following command in your terminal:

npx nuxi init nuxt3-colormode

Once you have installed Nuxt 3, navigate into your project and open it with VSCode(or use your preferred editor):

cd nuxt3-colormode && code .

Tailwind Css Installation

To install Tailwind Css in our project, we are going to install the @nuxtjs/tailwindcss module. Run the following command in your terminal to install TailwindCss:

yarn add @nuxtjs/tailwindcss

After installing the Tailwind Css module, head over to nuxt.config.ts file and register the module as shown below:

After registering the Tailwind Css module, open your terminal and run the following command to generate the tailwind.config.js file:

npx tailwindcss init -p

Tailwind Css Configuration

Create an assets folder at the root of your project and then navigate into your assets folder and create a css folder and inside it create a main.css file. In your tailwind.css file add the following Tailwind Css directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

This is what your project structure should look like:

Head over to your tailwind.config.js file, and add the darkMode class as shown below:

Adding Icon (optional)

We are going to use the nuxt-icon module to be able to display the sun(light mode) and moon(dark mode) icons. To install the nuxt-icon module, run the following command in your terminal:

https://nuxt.com/modules/icon

yarn add --dev nuxt-icon

After installing the module, go to nuxt.config.ts file and register the module as shown below:

Installing the @nuxtjs/colormode module

Finally, we are going to install the @nuxtjs/colormode by running the following command in the terminal:

yarn add --dev @nuxtjs/color-mode

After installing the module, head over to nuxt.config.ts and register the @nuxtjs/colormode module and add classSuffix to empty string in colorMode object, as shown below:

Setting up dark and light themes

In your app.vue file, paste the following code:

<script setup lang="ts">
const colorMode = useColorMode();
const changeColor = () => (colorMode.preference = (colorMode.value === 'light' ? 'dark' : 'light'))

</script>

<template>
    <div class="dark:bg-black bg-white min-h-screen flex-wrap">
        <nav class="flex items-center justify-between flex-wrap p-6">
            <div class="flex items-center flex-shrink-0 text-black dark:text-white mr-6">
                <span class="font-semibold text-xl tracking-tight">Nuxt ColorMode</span>
            </div>
            <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
                <div class="text-sm lg:flex-grow">
                    <nuxt-link to="/" class="block mt-4 lg:inline-block lg:mt-0 dark:text-teal-200 text-gray-500 dark:hover:text-white mr-4">
                        Home
                    </nuxt-link>
                    <nuxt-link to="/" class="block mt-4 lg:inline-block lg:mt-0 dark:text-teal-200 text-gray-500 dark:hover:text-white mr-4">
                        About
                    </nuxt-link>
                    <nuxt-link to="/" class="block mt-4 lg:inline-block lg:mt-0 dark:text-teal-200 text-gray-500 dark:hover:text-white">
                        Contact
                    </nuxt-link>
                </div>
                <div>
                    <button aria-label="Color Mode" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent bg-teal-800 dark:bg-white mt-4 lg:mt-0"
                            @click="changeColor">
                        <ColorScheme placeholder="...">
                            <Icon v-if="colorMode.value === 'dark'" name="heroicons-outline:moon" class="text-xl text-black" />
                            <Icon v-else name="heroicons-outline:sun" class="text-xl" />
                        </ColorScheme>
                    </button>
                </div>
            </div>
        </nav>
    </div>
</template>

In the code above, we are using the useColorMode() composable to make a reactive color mode (dark / light ) with auto data persistence. We can pass useColorMode() to colorMode and then we can create an changeColor method that will trigger to dark or light mode when the user clicks on it.

In our template, we have a button tag that has an changeColor event that contains two icons that interchange depending on the color mode state that the user has selected.

Here is a link to the GitHub repository that contains all the code:
if you find it useful give it a

https://github.com/tesfamariam1/nuxt3-colormode

Thank you, Enjoy coding!