Kleurmodus
Nuxt UI integreert met Nuxt Color Mode om gemakkelijk te schakelen tussen lichte en donkere thema
Gebruik
Nuxt UI registreert automatisch de @nuxtjs/color-mode module voor u, dus er is geen extra installatie vereist.
Componenten
U kunt de ingebouwde ColorModeAvatar of ColorModeImage componenten gebruiken om verschillende afbeeldingen weer te geven voor de lichte en donkere modus en de ColorModeButton, ColorModeSwitch of ColorModeSelect componenten om te schakelen tussen licht en donker geaardheden.
U kunt de useColorMode ook gebruiken om uw eigen aangepaste component te bouwen:
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
U kunt de @nuxtjs/color-mode module uitschakelen met de ui.colorMode optie in uw nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
colorMode: false
}
})