Switch Between Light and Dark

# Introduction In this project, you will learn how to create a React application that allows users to switch between light and dark mode. The project will demonstrate the usage of the React Context API and the `useContext` hook to manage the global theme state. ## 👀 Preview ![project preview](https://file.labex.io/namespace/718bace8-27a3-4200-a588-dde4041ceeb9/react/project-switch-between-light-and-dark/lab-switch-between-light-and-dark/assets/challenge-switch-between-light-and-dark-1-2.gif) ## 🎯 Tasks In this project, you will learn: - How to create a `ThemeContext` using React's Context API - How to use the `ThemeContext` in the `App` component to change the overall app style based on the theme - How to use the `ThemeContext` in the `Card` component to change the card styles based on the theme - How to wrap the `App` component with the `ThemeProvider` to make the theme context available throughout the application ## 🏆 Achievements After completing this project, you will be able to: - Understand how to use the React Context API to manage global state - Apply the `useContext` hook to access the context values - Implement different styles based on the current theme - Toggle the theme and update the global state

|60 : 00

Click the virtual machine below to start practicing