Vue Shadcn ThemeSwitcher

ThemeSwitcher.vue

<template>
<div class="flex items-center">
	<div class="">
		<Button variant="ghost" class="cursor-pointer" @click.stop="handle">
			<Icon icon="radix-icons:moon" class="hover:text-primary h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" v-show="mode == 'light'" @click="mode = 'dark'" />
			<Icon icon="radix-icons:sun"  class="hover:text-primary h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" v-show="mode == 'dark'" @click="mode = 'light'" />
		</Button>
	</div>
</div>
</template>

<script setup>
import { inject } from 'vue'
import { Icon } from '@iconify/vue'

const mode = inject('mode')

const handle = () => {
	if( mode.value == 'light' )
		return mode.value = 'dark'

	if( mode.value == 'dark' )
		return mode.value = 'light'
}

</script>