How to Use Dark Mode In NuxtJS with Nuxtlabs UI

In this tutorial, I will show you how to use toggle dark and light mode in nuxt 3 Nuxtlabs UI. Before we begin, you need to install and configure Nuxtlabs UI in NuxtJS.

How to Install Nuxtlabs UI in Nuxt 3

You can easily build a color mode button by using the useColorMode composable from @nuxtjs/color-mode.

<script setup>
const colorMode = useColorMode()

const isDark = computed({
  get () {
    return colorMode.value === 'dark'
  set () {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'

      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
      @click="isDark = !isDark"

    <template #fallback>
      <div class="w-8 h-8" />
toggle dark and light mode in nuxt 3
toggle dark and light mode in nuxt 3
Javed sheikh

Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,

Share link