🌗 React Theme Toggler

A simple and clean React application that allows users to switch between Light Mode and Dark Mode using a toggle button.
This project is built as part of Basic React learning.

🚀 Project Objective

• Learn how React state (useState) works
• Understand conditional rendering
• Apply dynamic CSS classes
• Build a full-screen, centered and attractive UI

🛠️ Technologies Used

• React JS
• Vite
• JavaScript (ES6)
• CSS (Flexbox & transitions)

⚙️ How the App Works

1. The current theme (light or dark) is stored in React state.
2. When the user clicks the toggle button, the theme state updates.
3. Based on the theme value:
   • Background and text colors change
   • Button text and icon change
4. CSS classes are applied dynamically to create smooth transitions.

📘 What I Have Learned

• How to use useState to manage UI state in React
• How state change triggers re-rendering
• How to use conditional rendering in JSX
• How to apply dynamic CSS classes based on state
• How to build a full-screen centered layout using Flexbox
• How to structure and document a React project professionally

🧠 Core Concepts Used

1. useState

Used to store and update the current theme value.

2. Conditional Rendering

Different button text and icons are rendered based on the theme.

{theme === "light" ? "🌙 Dark Mode" : "☀️ Light Mode"}