artsite/app/components/ThemeSwitcher.vue

<script setup lang="ts">
const { t } = useI18n()
const colorMode = useColorMode()
const nextTheme = computed(() => (colorMode.value === 'dark' ? 'light' : 'dark'))

function switchTheme() {
  colorMode.preference = nextTheme.value
}

function startViewTransition(event: MouseEvent | { clientX: number, clientY: number }) {
  if (!document.startViewTransition) {
    switchTheme()
    return
  }

  const x = event.clientX
  const y = event.clientY
  const endRadius = Math.hypot(
    Math.max(x, window.innerWidth - x),
    Math.max(y, window.innerHeight - y),
  )

  const transition = document.startViewTransition(async () => {
    switchTheme()
    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: colorMode.value === 'dark'
          ? [...clipPath].reverse()
          : clipPath,
      },
      {
        duration: 500,
        easing: 'ease-out',
        pseudoElement: colorMode.value === 'dark'
          ? '::view-transition-old(root)'
          : '::view-transition-new(root)',
      },
    )
  })
}

defineShortcuts({
  t: () => startViewTransition({ clientX: window.innerWidth, clientY: 0 }),
})
</script>

<template>
  <UTooltip
    :kbds="['T']"
    :text="t('theme')"
    class="cursor-pointer"
    :delay-duration="4"
  >
    <UButton
      :icon="nextTheme === 'dark' ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
      color="neutral"
      aria-label="switch theme"
      size="sm"
      variant="ghost"
      @click="startViewTransition"
    />
  </UTooltip>
</template>

<i18n lang="json">
{
  "en": {
    "theme": "switch theme"
  },
  "fr": {
    "theme": "changer de thème"
  },
  "es": {
    "theme": "cambiar tema"
  },
}
</i18n>