Color Mode

Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.

Usage

Nuxt UI automatically registers the useDark composable as a Vue plugin, so there's no additional setup required.

Components

You can use the built-in ColorModeAvatar or ColorModeImage components to display different images for light and dark mode and the ColorModeButton, ColorModeSwitch or ColorModeSelect components to switch between light and dark modes.

You can also use the useColorMode composable to build your own custom component:

ColorModeButton.vue
<script setup lang="ts">
import { useColorMode } from '@vueuse/core'

const colorMode = useColorMode()

const isDark = computed({
  get() {
    return colorMode.value === 'dark'
  },
  set(_isDark: boolean) {
    colorMode.preference = _isDark ? 'dark' : 'light'
  }
})
</script>

<template>
  <UButton
    :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
    :color="color"
    :variant="variant"
    :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
    @click="isDark = !isDark"
  />
</template>

Configuration

You can disable this plugin with the colorMode option in your vite.config.ts:

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      colorMode: false
    })
  ]
})