Let’s Make A Better “Light / Dark” Toggle

I’ve written before about light/dark toggles, but that was over two years ago, and as a mentor of mine told me 30 years ago:

If you’re not disgusted with your own code from even a few months ago, you’re in the wrong business.

This is because you learn better ways, learn from your mistakes, or just plain have the time to THINK.

What really prompted me to write this though is this article that popped up recommended to me here.

Adding Dark Mode in a very simple way with SVG morphing using anim.js

This is typical of most articles about it, and that’s not necessarily good. I mean it’s well written, he understands most of the concepts, he has a great and simple demo… But the approach and choice of tools is worse than my old one. No simple light/dark toggle should need a 14k JavaScripted SVG animation library!

What’s Wrong With His?

1. He had to write twice the JS needed to do the job, whilst being reliant on a 14k library he didn’t even need.
2. With that “twice the JS” they’re not even storing/tracking the state across page loads. I mean at least dump it into localStorage or a cookie!
3. Static scripting only concepts in the markup such as the excess DIV for nothing, SVG, etc.
4. Non focusable element used for the click trigger, telling keyboard navigation to go F*** itself.
5. Anim.js and SVG for such a simple state change is a waste of bandwidth, and processing time/overhead for something HTML and CSS don’t even need SVG or even images to accomplish anymore!
6. Style is being set from the JS when all that should be needed is a class swap on BODY.

All that said, his example is simpler than mine and that’s good. Why?

What’s Wrong With Mine!

1. The complex “sibling selector” approach makes the CSS harder to manage for what could simply be a class swap on BODY.