ui/docs/content/1.getting-started/6.dark-mode.md

title, description

title	description
Dark mode

All the components are styled with dark mode in mind.

Thanks to Tailwind CSS dark mode class strategy and the @nuxtjs/color-mode module, you literally have nothing to do.

You can disable dark mode by setting the preference to light instead of system in your nuxt.config.ts.

export default defineNuxtConfig({
  colorMode: {
    preference: 'light'
  }
})

::callout{icon="i-heroicons-light-bulb"} If you're stuck in dark mode even after changing this setting, you might need to remove the nuxt-color-mode entry from your browser's local storage. ::

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

::component-example #default :color-mode-button

#code

<script setup lang="ts">
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>

::