Color Mode
Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.
Usage
Nuxt UI automatically registers the @nuxtjs/color-mode module for you, so there's no additional setup required. You can simply use the useColorMode composable to switch between light and dark modes:
ColorModeButton.vue
<script setup>
const colorMode = useColorMode()
const isDark = computed({
get() {
return colorMode.value === 'dark'
},
set() {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
})
</script>
<template>
<ClientOnly v-if="!colorMode?.forced">
<UButton
:icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
color="neutral"
variant="ghost"
@click="isDark = !isDark"
/>
<template #fallback>
<div class="size-8" />
</template>
</ClientOnly>
</template>
You can disable the @nuxtjs/color-mode module with the ui.colorMode option in your nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
ui: {
colorMode: false
}
})