Kleurmodus
Nuxt UI kan worden geïntegreerd met VueUse om gemakkelijk te kunnen schakelen tussen lichte en donkere thema
Gebruik
Nuxt UI registreert automatisch de useDark die kan worden samengesteld als een Vue-plug-in, 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">
import { computed } from 'vue'
import { useColorMode } from '@vueuse/core'
const colorMode = useColorMode()
const isDark = computed({
get() {
return colorMode.value === 'dark'
},
set(_isDark: boolean) {
colorMode.value = _isDark ? 'dark' : 'light'
}
})
</script>
<template>
<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>
Configuration
Je kunt deze plugin uitschakelen met de colorMode optie in je vite.config.ts:
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
colorMode: false
})
]
})