mirror of
https://github.com/SrIzan10/helium.git
synced 2026-06-06 00:56:58 +00:00
35 lines
1.2 KiB
Vue
35 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue'
|
|
import { Button } from '@/components/ui/button'
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
|
|
|
const colorMode = useColorMode()
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button size="icon" variant="outline">
|
|
<Icon icon="radix-icons:moon"
|
|
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
<Icon icon="radix-icons:sun"
|
|
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
<span class="sr-only">Toggle theme</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem @click="colorMode.preference = 'light'">
|
|
Light
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="colorMode.preference = 'dark'">
|
|
Dark
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="colorMode.preference = 'system'">
|
|
System
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</template>
|