For this weeks practice you will Create a simple theme switcher where dark/light mode are managed using React's useContext.

Once forked and cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.

The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.

npm i && code . && npm run dev

1. Theme Management with useContext

   • The useContext hook in React allows you to access values from a context without prop-drilling. For this exercise, you're using it to manage a simple theme switcher (light/dark mode).
   • Define a context using createContext(). Remember to export both the context and a custom hook (e.g., useTheme) to make it easier to access the theme in your components. Follow the naming conventions when you create folders and files. Have a look at the boilerplate if you need guidance.

2. Integrating Components

   • In your main App.jsx, import the theme toggler.
   • Ensure that the ThemeProvider wraps your entire application so that the theme context is accessible everywhere.

3. Testing

   • Before pushing to GitHub, test your application and make sure it toggles the theme. Ensure everything works seamlessly.

4. Committing and Pushing

   • Use git add . to stage your changes, followed by git commit -m "Your commit message here" to commit them.
   • Push your changes to the GitHub repository using git push origin main.