O Nitro UI registra automaticamente o composable useDark como um plugin do Vue, então nenhuma configuração adicional é necessária.
Você pode usar os componentes integrados ColorModeAvatar ou ColorModeImage para exibir imagens diferentes nos modos claro e escuro, e os componentes ColorModeButton, ColorModeSwitch ou ColorModeSelect para alternar entre os modos claro e escuro.
Você também pode usar o composable useColorMode para construir seu próprio componente personalizado:
<script setup lang="ts">
import { useColorMode } from '@vueuse/core'
const colorMode = useColorMode()
const isDark = computed({
get() {
return colorMode.value === 'dark'
},
set(_isDark: boolean) {
colorMode.preference = _isDark ? 'dark' : 'light'
}
})
</script>
<template>
<NButton
:icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
:color="color"
:variant="variant"
:aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
@click="isDark = !isDark"
/>
</template>
Você pode desabilitar esse plugin com a opção colorMode no seu vite.config.ts:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
colorMode: false
})
]
})