Color de moda
La interfaz de usuario de Nuxt se integra con el modo de color de Nuxt para permitir cambiar fácilmente entre temas claros y oscuros.
@@pH002@@Uso de la información
Nuxt UI registra automáticamente el módulo @nuxtjs/color-mode por ti, por lo que no se requiere configuración adicional.
@008@Componentes
Puede utilizar los componentes integrados ColorModeAvatar o ColorModeImage para mostrar diferentes imágenes para el modo claro y oscuro y el ColorModeButton, Componentes ColorModeSwitch o ColorModeSelect para cambiar entre los modos claro y oscuro.
También puede utilizar el useColorMode composable para construir su propio componente personalizado:
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>
@@pH063@@Configuración
Puede desactivar el módulo @nuxtjs/color-mode con la opción ui.colorMode en su nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
colorMode: false
}
})