This is another super sweet, animated one https://dribbble.com/shots/4419357-Day-Night-Mode-Switcher but no public source

This one has fun animation too: http://paulfreeman.design/toggle/ Source https://github.com/pfreema1/day-night-toggle

This has to be my favorite though:

Live Demo https://learnreact.design/framer-ui-motion-toggle/ ❤ ❤ ❤ CodeSandboxhttps://codesandbox.io/embed/framer-ui-motion-toggle-3x99f

Image for post
Image for post
framer-motion animation for the win!

(I like it so much I just signed up for the author’s Framer Motion course!)

Image for post
Image for post
framer-motion night mode

(I like it so much I just signed up for the author’s Framer Motion course!)

^Also the version on codesandbox is draggable, but the draggable part doesn’t quite work right, while the other live demo is not draggable at all.

Also it turns out there is a use-dark-mode package that has hooks built-in. So that’s a win, because the day-night-toggle above and most everyone else’s examples except yours don’t use hooks.

Source: https://github.com/donavon/use-dark-mode

Code Sandbox Demo: https://codesandbox.io/s/usedarkmode-demo-om2s6

I did find one more code demo example using Hooks, and it is super clean:

https://smakosh.com/how-to-add-dark-mode-easily-with-a-custom-react-hook

And I’m not sure if I included it previously, but while react-switch is great, react-toggle is actually written using React Hooks for React v.16

https://github.com/gfazioli/react-toggle

https://www.npmjs.com/package/react-toggle

compare to react-switch, which has slicker functionality (drag-and-drop):

Image for post
Image for post
Image for post
Image for post

https://github.com/markusenglund/react-switch

https://www.npmjs.com/package/react-switch

Now my goal is to combine use-dark-mode & framer-ui-motion-toggle!

🤓 The physical therapist who writes JavaScript 💪 Web Developer 😎 Mentor 🧠 DPT 😄 SEO Expert 😁 React 😆 Jamstack 🗯️ Ask me anything 👉 DoctorDerek.com 👈

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store