38 lines
No EOL
963 B
Vue
38 lines
No EOL
963 B
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { Moon, Sun } from 'lucide-vue-next'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
const isDark = ref(false)
|
|
|
|
const toggleTheme = () => {
|
|
isDark.value = !isDark.value
|
|
updateTheme()
|
|
}
|
|
|
|
const updateTheme = () => {
|
|
if (isDark.value) {
|
|
document.documentElement.classList.add('dark')
|
|
localStorage.setItem('theme', 'dark')
|
|
} else {
|
|
document.documentElement.classList.remove('dark')
|
|
localStorage.setItem('theme', 'light')
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
const savedTheme = localStorage.getItem('theme')
|
|
isDark.value =
|
|
savedTheme === 'dark' ||
|
|
(!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
|
updateTheme()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Button variant="ghost" size="icon" @click="toggleTheme">
|
|
<Sun v-if="isDark" class="h-5 w-5" />
|
|
<Moon v-else class="h-5 w-5" />
|
|
<span class="sr-only">Toggle theme</span>
|
|
</Button>
|
|
</template> |