https://github.com/gkhan205/react-multiple-theme
ReactJS project with Multiple themes with CSS Variables
https://github.com/gkhan205/react-multiple-theme
css-theme css-variables reactjs reactjs-project themes vite-react
Last synced: 6 months ago
JSON representation
ReactJS project with Multiple themes with CSS Variables
- Host: GitHub
- URL: https://github.com/gkhan205/react-multiple-theme
- Owner: gkhan205
- Created: 2024-08-08T04:37:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-08T05:04:36.000Z (over 1 year ago)
- Last Synced: 2025-02-06T10:32:21.395Z (12 months ago)
- Topics: css-theme, css-variables, reactjs, reactjs-project, themes, vite-react
- Language: TypeScript
- Homepage: https://gkhan205.github.io/react-multiple-theme/
- Size: 88.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](#demo)
- [Step By Step Tutorial](#tutorial)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Technologies Used](#technologies-used)
## Demo
Check out the live demo of the app [here](https://gkhan205.github.io/react-multiple-theme/).
## Tutorial
[Click on Thumbnail to Watch on Youtube](https://youtu.be/ggdtgrzMK8A)
[
](https://youtu.be/ggdtgrzMK8A)
## 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:**
```bash
git clone https://github.com/gkhan205/react-multiple-theme.git
```
2. **Navigate to the project directory:**
```bash
cd react-multiple-themes
```
3. **Install the dependencies:**
```bash
npm install
```
## Usage
1. **Start the development server:**
```bash
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
```