45 lines
1.2 KiB
Vue
45 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue'
|
|
|
|
const colorMode = useColorMode()
|
|
|
|
const modes = ['light', 'dark', 'system'] as const
|
|
type Mode = typeof modes[number]
|
|
|
|
const iconMap: Record<Mode, string> = {
|
|
light: 'mdi:weather-sunny',
|
|
dark: 'mdi:weather-night',
|
|
system: 'mdi:monitor',
|
|
}
|
|
|
|
const labelMap: Record<Mode, string> = {
|
|
light: '浅色模式',
|
|
dark: '深色模式',
|
|
system: '跟随系统',
|
|
}
|
|
|
|
const currentMode = computed(() => colorMode.preference as Mode)
|
|
const currentIcon = computed(() => iconMap[currentMode.value] || iconMap.system)
|
|
const currentLabel = computed(() => labelMap[currentMode.value] || labelMap.system)
|
|
|
|
function cycle() {
|
|
const idx = modes.indexOf(currentMode.value)
|
|
colorMode.preference = modes[(idx + 1) % modes.length]
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
@click="cycle"
|
|
class="inline-flex items-center justify-center rounded-md w-8 h-8 transition-colors"
|
|
style="color: var(--color-text-secondary)"
|
|
:class="[
|
|
'hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text)]',
|
|
]"
|
|
:aria-label="currentLabel"
|
|
:title="currentLabel"
|
|
>
|
|
<Icon :icon="currentIcon" class="w-5 h-5" />
|
|
</button>
|
|
</template>
|