35 lines
999 B
Vue
35 lines
999 B
Vue
<script setup>
|
|
import { Sun, Moon } from 'lucide-vue-next'
|
|
|
|
const colorMode = useColorMode()
|
|
</script>
|
|
|
|
<template>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="ghost">
|
|
<Sun
|
|
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
|
|
/>
|
|
<Moon
|
|
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
|
|
/>
|
|
<span class="sr-only">Toggle theme</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="end"
|
|
class="min-w-min"
|
|
>
|
|
<DropdownMenuItem @click="colorMode.preference = 'light'">
|
|
Light
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="colorMode.preference = 'dark'">
|
|
Dark
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="colorMode.preference = 'system'">
|
|
System
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</template>
|