색상 모드(Color Mode)
Nuxt UI는 Nuxt Color Mode와 통합되어 밝은 테마와 어두운 테마 간을 쉽게 전환할 수 있습니다.
사용법
Nuxt UI는 자동으로 @nuxtjs/color-mode모듈을 등록하므로 추가 설정이 필요하지 않습니다.
구성 요소
내장형 ColorModeAvatar또는 ColorModeImage 구성 요소를 사용하여 밝은 모드와 어두운 모드에 대해 다른 이미지를 표시할 수 있습니다.) 구성 요소를 사용하여 ]( ColorModeImage](]() @ Color 구성 요소를 사용하여 밝은 모드와 어두운 모드에 대해 다른 이미지를 표시할 수 있습니다.ColorModeSwitch 또는 ColorModeSelect 구성 요소를 사용하여 조명 모드와 어두운 모드 간에 전환합니다.
또한 useColorModecomposable을 사용하여 사용자 정의 구성 요소를 만들 수 있습니다.
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>
구성
nuxt.config.ts의 ui.colorMode 옵션으로 @nuxtjs/color-mode 모듈을 비활성화할 수 있습니다.
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
colorMode: false
}
})