Smooh Theme Toggle Effects In JavaScript & CSS3

Preview:

Description:

The Theme Toggle Effect creates a smooth transition effect when switching between themes on your webpage.

Powered by JavaScript startViewTransition() and CSS masks, it is ideal for websites that offer users a choice between different themes or color schemes.

How to use it:

1. Use the startViewTransition() method to initiate the transition.

if (!document.startViewTransition) switchTheme()
document.startViewTransition(switchTheme);

2. Use CSS animations to handle the visual effects. You can use either masks or clip-paths to create a smooth switch between themes. As the animation progresses, the mask or clip-path expands to reveal the new theme underneath.

::view-transition-new(root) {
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="white"/></svg>')
    center / 0 no-repeat;
  animation: scale 1s;
}
::view-transition-old(root),
.dark::view-transition-old(root) {
  animation: none;
  z-index: -1;
}
.dark::view-transition-new(root) {
  animation: scale 1s;
}
@keyframes scale {
  to {
    mask-size: 200vmax;
  }
}

::view-transition-group(root) {
  animation-duration: 0.7s;
  animation-timing-function: var(--expo-out);
}
      
::view-transition-new(root) {
  animation-name: reveal-light;
}
::view-transition-old(root),
.dark::view-transition-old(root) {
  animation: none;
  z-index: -1;
}
.dark::view-transition-new(root) {
  animation-name: reveal-dark;
}
@keyframes reveal-dark {
  from {
    clip-path: polygon(50% -71%, -50% 71%, -50% 71%, 50% -71%);
  }
  to {
    clip-path: polygon(50% -71%, -50% 71%, 50% 171%, 171% 50%);
  }
}
@keyframes reveal-light {
  from {
    clip-path: polygon(171% 50%, 50% 171%, 50% 171%, 171% 50%);
  }
  to {
    clip-path: polygon(171% 50%, 50% 171%, -50% 71%, 50% -71%);
  }
}