leiyun
/
pc_nuxt


			
				
					
						
						
							
							<template>
  <ClientOnly>
    <button
      type="button"
      class="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--c-eef7ff)] text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-e0f0ff)]"
      :aria-label="isDark ? '切换到亮色模式' : '切换到暗色模式'"
      :aria-pressed="isDark"
      :title="isDark ? '亮色模式' : '暗色模式'"
      @click="toggle"
    >
      <UIcon :name="isDark ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-4.5" />
    </button>

    <!-- SSR / 水合前占位，避免图标闪烁 -->
    <template #fallback>
      <span class="h-9 w-9 rounded-full bg-[var(--c-eef7ff)]" />
    </template>
  </ClientOnly>
</template>

<script setup>
/**
 * 亮色 / 暗色切换。
 * 状态由 @nuxtjs/color-mode 维护（<html class="dark"> + cookie 持久化），
 * 具体配色取值见 assets/css/theme.css 里的 CSS 变量。
 */
const colorMode = useColorMode()

const isDark = computed(() => colorMode.value === 'dark')

function toggle() {
  colorMode.preference = isDark.value ? 'light' : 'dark'
}
</script>