Couleur Mode
Nuxt UI s
@@ph002@@utilisation
L'interface utilisateur Nuxt enregistre automatiquement le useDark composable en tant que plugin Vue, aucune configuration supplémentaire n'est donc requise.
Composants
Vous pouvez utiliser les composants intégrés ColorModeAvatar ou ColorModeImage pour afficher différentes images pour les modes clair et sombre et le @@@@ColorModeButton](/docs/components/color-mode-button), Composants ColorModeSwitch ou ColorModeSelect pour basculer entre les modes clair et sombre.
Vous pouvez également utiliser le useColorMode composable pour construire votre propre composant personnalisé:
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
Vous pouvez désactiver ce plugin avec l'option colorMode dans votre 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
})
]
})