mustafa854/theme-switcher

A small Theme Switcher component made from react Context API and Tailwind CSS

Theme Switcher using React

This project is a simple theme switcher React app that allows users to toggle between light and dark themes. It employs React Context API for managing theme states and utilizes Tailwind CSS for styling.

Table of Contents

1. About
2. Features
3. Project Structure
4. Demo Images
5. Installation
6. Usage
7. Technologies Used

About

This repository contains a React-based theme switcher app built to showcase the usage of React Context API for managing themes. The app includes components such as ThemeBtn for toggling themes and an App component that manages the theme mode using Context API.

Features

• Toggle between light and dark themes
• ThemeBtn component for switching themes
• Context API usage for managing theme states

Project Structure

The project directory structure is organized as follows:

themeSwitcher/
├── src/
│   ├── components/
│   │   ├── ThemeBtn.jsx
│   │   ├── Card.jsx
│   ├── contexts/
│   │   ├── theme.js
│   ├── App.jsx
│   ├── main.jsx
│   ├── index.css
├── package.json
├── package-lock.json
└── README.md

Demo Images

Installation

1. Clone the repository:

   git clone https://github.com/mustafa854/react-currency-converter.git
   cd simpleCurrencyConverter

2. Install dependencies:

   npm install

Usage

1. Start the development server:

   npm start

2. Open your browser and go to http://localhost:3000 to view the application.

3. Installation

4. Clone the repository:

   git clone https://github.com/mustafa854/theme-switcher.git
   cd simpleCurrencyConverter

5. Install dependencies:

   npm install

Usage

1. Start the development server:

   npm start

2. Open your browser and go to http://localhost:3000 to view the application.

3. Enter the amount, select the currencies, and click 'Convert' to see the converted amount.

Technologies Used

• React
• Axios
• Tailwind CSS

Technologies Used

• React
• Tailwind CSS