Learning to toggle Dark Mode through React Hooks

I recently revisited a project of mine and found a feature that I think I can recreate with the use of React Hooks.

So for starters..

The app that I mentioned is called SplashGlam. It is powered by ReactJS and hosted through Heroku. Feel free to toggle the day and night mode using the button on the top navigator to see what are we working with.

On Day/Bright mode..

On Night/Dark mode..

I also have discussed how I built the toggling feature using LocalStorage on my other blog.(What is LocalStorage?) This time around, I wanted to try Hooks to recreate at least the toggling part.

I created a repo to test things out and feel free to check it out if you wanted to test it out on your own. Github repo

Small breakdown of my code:

First

Second

Third

CSS! Now that we have our functions and elements all set. Remember our function has a line of code where we change/replace the className of the body from dayMode to nightMode?

Here's my corresponding CSS to see DOM change!

Results!

And that is pretty much it! I hope anyone that needs an example in using hooks to toggle day/night mode find this helpful!

Let me know if I missed anything in the comments please! Until the next!