---
title: 'Dark mode'
description: ''
---

All the components are styled with dark mode in mind.

Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/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`.

```ts [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
```vue
<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>
```
::