Color de moda
La interfaz de usuario de Nuxt se integra con VueUse para permitir un cambio fácil entre temas claros y oscuros.
@@pH002@@Uso de la aplicación
La interfaz de usuario de Nuxt registra automáticamente el useDark componible como un complemento de Vue, por lo que no se requiere configuración adicional.
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">
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>
Configuración
Puedes desactivar este plugin con la opción colorMode en tu 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
})
]
})