DEV Community

Cover image for How to Use Dark Mode In NuxtJS with Nuxtlabs UI
saim
saim

Posted on β€’ Originally published at webvees.com

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'
  }
})
</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>
Enter fullscreen mode Exit fullscreen mode

toggle dark and light mode in nuxt 3
toggle dark and light mode in nuxt 3

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay