Dark/light mode in React and store preference in local storage

Recently I watched a youtube tutorial from Kevin Powell about how to set light/dark mode at the operating system level by using CSS. This tutorial made me wonder "How about toggling light/dark mode in React?"

When I have a question, I need to find the answer.

The required features

• For first-time visits to the site, use the system preference from the OS.
• User can toggle between light and dark mode.
• User preference -- store the theme as a user preference in localStorage.
• When the user visits the site at other times, get the user preference mode from local storage.

Techniques use in this project

• Using tailwind CSS and Reactjs for front-end
• no back-end (just a simple web)

The final result

Code on github --> https://github.com/WKasiban/light-dark-mode-form

Process

1. Install Tailwindcss with create react app

by following this instruction. --> https://tailwindcss.com/docs/guides/create-react-app

2. The file structure

I try to make all things as basic as possible. With 2 components, Navbar and Form are rendered in App.

3. the toggle switch

By using the checkbox as a toggle switch, we use dark mode as a starting mode preference. When the checkbox is checked, it means dark mode is on. and if the checkbox is unchecked, it means the dark mode is off and the light mode is on.
checked is true, then become dark mode.
checked is false (unchecked) then become the light mode.

4. first time visiting the site

Using prefers-color-scheme media query to detect the user’s system color scheme preferences.

And if the user's system color scheme preference is 'dark' mode, then our checkbox or toggle switch is checked (or the userPrefer is equal true).

And then using react setState(), switches between dark(checked or true) and light(unchecked or false) mode.

5. Storing the user preference mode in local storage

When the user toggles the switch, this setting will be kept in local storage on the user's computer.

To store data in the browser storage, we invoke the setItem() storage method.

Since we try to use everything as simple as possible. we use the value checked (true) or unchecked (false) as a value to store in local storage. And we use the useEffect react hook to perform site effects.

6. visiting the site at other times

When a user visits the site for the second time, the browser will check for local storage on an initial page load. The browser will load a user self-preference mode for this site, which might be different from the user's system color scheme.

Here, we use the getItem() storage method to retrieve data from the local storage. The JSON.parse() used in the code deserializes the returned JSON string from the storage.

Using the react hook useEffect() tells the React to check user-self preference mode in local storage after render.

Source code

Code on github : https://github.com/WKasiban/light-dark-mode-form

Reference

1. Adhuham. (2021). A Complete Guide to Dark Mode on the Web. css-tricks. https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
2. Ibadehin Mojeed. (2021). Using localStorage with React Hooks. Logrocket. https://blog.logrocket.com/using-localstorage-react-hooks/
3. Yash Ghodekar. (2020). Implementing Dark Mode in React. Dev.to. https://dev.to/horsemaker/implementing-dark-mode-in-react-17he