Farbige Mode
Nuxt UI integriert sich mit VueUse, um ein einfaches Umschalten zwischen hellen und dunklen Themen zu ermöglichen.
@@ph002@@Nutzung
Nuxt UI registriert automatisch das useDark composable als Vue-Plugin, so dass keine zusätzliche Einrichtung erforderlich ist.
Komponenten
Sie können die integrierte ColorModeAvatar oder ColorModeImage Komponenten verwenden, um verschiedene Bilder für den hellen und dunklen Modus anzuzeigen, und die ColorModeButton,ColorModeSwitch oder ColorModeSelect Komponenten, um zwischen hellen und dunklen Modi zu wechseln.
Sie können auch das useColorMode composable verwenden, um Ihre eigene benutzerdefinierte Komponente zu erstellen:
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>
@@ph059@Konfiguration
Sie können dieses Plugin mit der Option colorMode in Ihrem vite.config.ts deaktivieren:
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
})
]
})