Use View Transitions API for theme toggle animation

If you haven’t heard about the View Transitions API, it’s a new API that provides a mechanism for easily creating animated transitions between different website views. There are a few articles on the web about it already, here are some:

• MDN Web Docs · View Transitions API
• Chrome for Developers · Smooth transitions with the View Transition API
• Astro Docs · View Transition

Since Safari will soon join the Chromium browser family to support the View Transitions API in version 18, so let’s use its magic with the theme transition animation.

This animation takes inspiration from @hooray’s snippets with some minor tweaks to avoid comflicting with Astro’s View Transitions feature. You can find my implementation at ThemeToggle.vue, with some additional CSS rules as shown below:

.theme-transition::view-transition-old(root),
.theme-transition::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
.theme-transition::view-transition-old(root) {
  z-index: 1;
}
.theme-transition::view-transition-new(root) {
  z-index: 9999;
}
.theme-transition.dark::view-transition-old(root) {
  z-index: 9999;
}
.theme-transition.dark::view-transition-new(root) {
  z-index: 1;
}

Feel free reach out if you have any suggestions. But now it’s your turn to have fun with it!