gkhan205/react-multiple-theme

ReactJS project with Multiple themes with CSS Variables

Multiple Themes in ReactJS | CSS Variables

Welcome to the React Multiple Themes App project! This project demonstrates how to implement multiple themes in a React application using CSS variables and context API. The app allows users to switch between different themes, including light, dark, blue, red, orange, and purple.

Table of Contents

• Demo
• Step By Step Tutorial
• Features
• Installation
• Usage
• Technologies Used

Demo

Check out the live demo of the app here.

Tutorial

Click on Thumbnail to Watch on Youtube

Features

• Switch between multiple themes: Light, Dark, Blue, Red, Orange, Purple
• Dynamic theming using CSS variables
• User-friendly interface for theme selection
• Themed HTML elements including buttons, paragraphs, lists, and cards

Installation

To get a local copy up and running, follow these steps:

1. Clone the repository:

   git clone https://github.com/gkhan205/react-multiple-theme.git

2. Navigate to the project directory:

   cd react-multiple-themes

3. Install the dependencies:

   npm install

Usage

1. Start the development server:

   npm start

2. Open your browser and navigate to:

   http://localhost:3000
   

3. Use the theme buttons to switch between different themes and see the changes in real-time.

Technologies Used

• React
• CSS Variables
• Context API
• JavaScript
• HTML
• CSS

Project Structure

react-multiple-themes
├── index.html
├── src
│   ├── App.tsx
│   ├── ThemeContext.tsx
│   ├── themes.css
│   ├── index.css
│   ├── main.tsx
├── package.json
└── README.md