Farbige Mode
Nuxt UI integriert sich in den Nuxt Color Mode, um einen einfachen Wechsel zwischen hellen und dunklen Themen zu ermöglichen.
@@ph002@@Nutzung
Nuxt UI registriert automatisch das @nuxtjs/color-mode Modul für Sie, 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 zum Umschalten zwischen Hell-und Dunkelmodus.
Sie können auch das useColorMode composable verwenden, um Ihre eigene benutzerdefinierte Komponente zu erstellen:
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>
Konfiguration
Sie können das @nuxtjs/color-mode-Modul mit der Option ui.colorMode in Ihrem nuxt.config.ts deaktivieren:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
colorMode: false
}
})