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.
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">
const colorMode = useColorMode()
const isDark = computed({
get() {
return colorMode.value === 'dark'
},
set(_isDark) {
colorMode.preference = _isDark ? 'dark' : 'light'
}
})
</script>
<template>
<ClientOnly v-if="!colorMode?.forced">
<UButton
:icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
color="neutral"
variant="ghost"
:aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
@click="isDark = !isDark"
/>
<template #fallback>
<div class="size-8" />
</template>
</ClientOnly>
</template>
Configuration
You can disable the @nuxtjs/color-mode module with the ui.colorMode option in your nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
colorMode: false
}
})