Add cool effect when trnsitionning from light to dark mode using css and view transitions
[!NOTE]
This assumes you've already have your dark light mode setup with some sort of function to update your theme
- Add the css
/* Angled */
[data-style='angled']::view-transition-old(root) {
animation: none;
z-index: -1;
}
[data-style='angled']::view-transition-new(root) {
animation: unclip 1s;
clip-path: polygon(-100vmax 100%, 100% 100%, 100% -100vmax);
}
@keyframes unclip {
0% {
clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
}
}
- ensure
data-style="angled"attribute is set on the root element in SPA react we use a useEffect hook
useEffect(() => {
// set the data-style attribute
document.documentElement.dataset.style = "angled";
}, []);
in SSR it can be set directly in the html tag
- wrap your theme change function in a
documnet.startViewTransitionto start the view transition
function transitionColors() {
if (typeof window !== "undefined") {
document.startViewTransition(() => {
const newTheme = theme === "light" ? "dark" : "light";
document.documentElement.dataset.theme = newTheme;
updateTheme(newTheme);
});
}
}
more transition styles can be added by including the corresponding css file and adding the correct data-style attribute
<select
className="select select-bordered select-sm max-w-xs"
onChange={(e) =>
(document.documentElement.dataset.style = e.target.value)
}
>
<option value="default">Default</option>
<option value="vertical">Vertical</option>
<option value="wipe">Wipe</option>
<option value="angled">Angled</option>
<option value="flip">Flip</option>
<option value="slides">Slides</option>
</select>
If you like this type of css tricks consider following jhey
Top comments (0)