Animated Theme Toggler
A theme toggle button that transitions between light and dark modes with a fluid, circular reveal animation using the View Transitions API.
Installation
npx raya-ui@latest add animated-theme-togglerFile Structure
your-project
components
ui
animated-theme-toggler
AnimatedThemeToggler.vue
API Reference
Props
themestring"dark"The current active theme mode of the application.
durationnumber400The duration of the circular clip-path reveal animation in milliseconds.
Emits
update:modelValuebooleanFired when the user interacts with the toggle. Emits true if switching to dark mode.
Click to transition the app theme
Settings
400ms
source-code.vue
<script setup lang="ts">
import { AnimatedThemeToggler } from '@/components/ui/animated-theme-toggler'
import { useColorMode } from '#imports'
const colorMode = useColorMode()
const toggleDark = (isDark: boolean) => {
colorMode.value = isDark ? 'dark' : 'light'
}
</script>
<template>
<AnimatedThemeToggler
:theme="colorMode.value"
@update:modelValue="toggleDark"
/>
</template>