Skip to content

Latest commit

 

History

History
169 lines (113 loc) · 3.43 KB

README.md

File metadata and controls

169 lines (113 loc) · 3.43 KB

React Theme Toggle App 🌗

A beginner-friendly Dark & Light Mode Toggle App built with React Context API and Tailwind CSS to demonstrate how global state can be managed in React without props drilling.

This project shows how to implement theme switching in a real-world React application using Context API and Tailwind’s dark mode utilities.

By building this project, you will understand how modern React apps handle global state and UI themes.

🔗 Live Demo

Live Project: https://react-theme-toggle-three.vercel.app/

✨ Features

  • Dark Mode / Light Mode toggle
  • Global theme management using Context API
  • No props drilling
  • Responsive UI with Tailwind CSS
  • Simple and clean component structure
  • Beginner-friendly project

🧠 Concepts Covered

This project helps you understand important React concepts used in real-world apps.

React Concepts

  • React component structure
  • useState hook
  • useContext hook
  • Context API
  • Global state management
  • Avoiding props drilling
  • Component reusability

Tailwind CSS Concepts

  • Tailwind utility classes
  • Dark mode styling
  • Layout with Flexbox
  • Spacing and typography utilities
  • Responsive design basics

🌗 How Theme Toggle Works

This project uses React Context API to store the current theme (light or dark) globally.

Steps involved:

  1. Create a ThemeContext
  2. Wrap the application with ThemeContext Provider
  3. Store the theme using useState
  4. Access theme in components using useContext
  5. Toggle the theme using a button
  6. Apply Tailwind's dark mode classes

This approach avoids passing props through multiple components.

🛠️ Tech Stack

  • React JS
  • Context API
  • Tailwind CSS
  • JavaScript (ES6+)

📁 Project Structure

src/
│── components/
│     ├── Navbar.jsx
│     └── Home.jsx
│
│── context/
│     └── ThemeContext.js
│
│── App.jsx
│── main.jsx
│── index.css

🚀 Getting Started

1️⃣ Clone the repository

git clone https://github.com/jdcodebase/react-theme-toggle

2️⃣ Install dependencies

npm install

3️⃣ Start the development server

npm run dev

📺 Related Video

Watch the full tutorial on YouTube:

Build Dark Mode Toggle App using React Context API & Tailwind CSS

In this video you will learn:

  • What is Context API
  • How to create a Provider
  • How to share global state
  • How to implement Dark Mode in Tailwind
  • How theme toggling works in real projects

🚀 My Playlists

📌 Complete Web Development Playlist https://www.youtube.com/playlist?list=PLKIziyQytJbvEtBirMvnUmwyoT1gDuW6t

📌 DSA Playlist (Data Structures & Algorithms) https://www.youtube.com/playlist?list=PLKIziyQytJbu-Dn1IPDY-aQA21G1n4wJe

📚 Part of Web Development Series

This project is part of the Web Development Series by JDCodebase, where we learn:

  • HTML
  • CSS
  • JavaScript
  • React
  • Tailwind CSS
  • MERN Stack

All explained step-by-step for beginners.

🙌 Support

If you found this project helpful:

  • ⭐ Star the repository
  • 📺 Subscribe on YouTube
  • 🔁 Share with others

Happy Coding 🚀 JDCodebase