How to Use Dark Mode In NuxtJS with Nuxtlabs UI

#nuxt #vue #tailwindcss #webdev

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'
  }
})
</script>

<template>
  <ClientOnly>
    <UButton
      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
      color="gray"
      variant="ghost"
      aria-label="Theme"
      @click="isDark = !isDark"
    />

    <template #fallback>
      <div class="w-8 h-8" />
    </template>
  </ClientOnly>
</template>