This is a simple React application created using Vite that allows users to switch between light and dark themes. It provides a user interface with a theme switch button and a card component that demonstrates the theme switching functionality.
- Switch between light and dark themes.
- Minimalistic design for easy understanding.
- React: A JavaScript library for building user interfaces.
- Vite: A build tool for modern web development.
- Context API: Used for managing and providing theme-related data to components.
-
Make sure you have Node.js and npm (Node Package Manager) installed on your system.
-
Clone this repository:
git clone https://github.com/tejus05/Dark-Theme-Toggle/.git
-
Navigate to the project directory:
cd Dark-Theme-Toggle
-
Install the dependencies:
npm install
-
Start the development server:
npm run dev
This command will start the development server and open the application in your default web browser.
-
You can now use the theme switch button to toggle between light and dark themes.
- The theme state (light or dark) is managed using the
useState
hook in theApp
component. - The
ThemeProvider
component is used to provide the theme-related data to child components using the Context API. - The
ThemeBtn
component provides a button to switch between light and dark themes. - The
Card
component demonstrates the theme switching functionality by changing its appearance based on the selected theme.