DEV Community

Discussion on: Dark mode toggle animation using CSS !

violet profile image

A more efficient way to get the body is to use document.body instead of document.querySelector("body"). Same thing applies to classes. It's faster for the browser to fetch classes with document.getElementsByClassName('container')[0] instead of using document.querySelector(".container").

To make the js use less code I would add the animation css to the body.dark .sun-logo and body.dark .moon-logo instead of toggling the classes on each button.

murtuzaalisurti profile image
murtuza Author

I intentionally did the toggling because I wanted to create separate classes because of the transform property. The transform property is explicitly stated for the initial position.