How to get ripple effect on theme change?

[1Luc1]

Hi,

I was wondering how the team did the ripple effect on changing the theme within the docs?

cheers,
Luc

[kingyue737]

Via View Transition API

Here is an example:

<script setup lang="ts">
import { useToggle, useDark } from '@vueuse/core'
const theme = useTheme()
const isDark = useDark({
  onChanged(dark: boolean) {
    theme.global.name.value = dark ? 'dark' : 'light'
  },
})

const isAppearanceTransition =
  document.startViewTransition &&
  !window.matchMedia('(prefers-reduced-motion: reduce)').matches

const toggleDark = useToggle<true, false | null>(isDark)
function transitDark(event?: MouseEvent) {
  if (!isAppearanceTransition || !event) {
    toggleDark()
    return
  }
  const x = event.clientX
  const y = event.clientY
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  )
  // @ts-expect-error: Transition API
  const transition = document.startViewTransition(async () => {
    toggleDark()
    await nextTick()
  })
  transition.ready.then(() => {
    const clipPath = [
      `circle(0px at ${x}px ${y}px)`,
      `circle(${endRadius}px at ${x}px ${y}px)`,
    ]
    document.documentElement.animate(
      {
        clipPath: isDark.value ? [...clipPath].reverse() : clipPath,
      },
      {
        duration: 400,
        easing: 'ease-in',
        pseudoElement: isDark.value
          ? '::view-transition-old(root)'
          : '::view-transition-new(root)',
      },
    )
  })
}
</script>

<template>
      <v-switch
        :model-value="isDark"
        inset
        false-icon="mdi-white-balance-sunny"
        true-icon="mdi-weather-night"
        @click="transitDark"
      />
</template>

<style>
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 2147483646;
}
.dark::view-transition-old(root) {
  z-index: 2147483646;
}
.dark::view-transition-new(root) {
  z-index: 1;
}
</style>

[1Luc1]

Thanks for your reply. Does this work for multiple themes like within the docs?

[kingyue737]

This is an example of toggling between 'light' and 'dark' (while dark to light is a reverse ripple). It is a little more complicated than the vuetify official site which only has forward ripples. You can modify and simplify it to support more themes.

[1Luc1]

Thanks for your info. I'll see, if i can get it running with multiple themes. I'll mark your reply as answer.