What's the best way to add smooth transition to theme change?
I want to add smooth transition when switching between dark and light theme, and I'm curious what would be the best way to add transition to elements that will change colors?
I guess adding transition on all elements (* selector) would maybe slow down website?
I was thinking of adding a separate class like
.theme-transition that will have only transition on color and background-color and then adding that class to elements that are "affected" by theme change.
Do you know any better, more efficient way?1 Reply
You could use
@property to make your color variables transitionable, but to be honest most users will set it to their preferred theme (or just leave it as is if you've used prefers-color-scheme) and never change it again, so the transition from one to the other isn't a huge concern.