カラーモード
Nuxt UIはVueUseと統合され、明るいテーマと暗いテーマを簡単に切り替えられます。
使用法
Nuxt UIは自動的に useDark をVueプラグインとして登録しますので、追加のセットアップは必要ありません。
コンポーネント
組み込みの ColorModeAvatar または ColorModeImage )を使用して、ライトモードとダークモードで異なる画像を表示し、 ColorModeButton ColorModeSwitch または ColorModeコンポーネントを選択して、ライトモードとダークモードを切り替えます。
useColorMode を使って、独自のカスタムコンポーネントを構築することもできます。
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>
設定
vite.config.tsのcolorModeオプションでこのプラグインを無効にできます。
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
})
]
})