React Dark Mode App

Table of Contents

  1. Overview
  2. Screenshots
  3. Features
  4. How to Use
  5. Project Structure
  6. Technologies Used
  7. Contributions
  8. License

Overview

The React Dark Mode App is a simple web application built with Vite, React, Tailwind CSS, and Context API. The app includes a dark mode functionality allowing users to switch between light and dark themes seamlessly.

Screenshots

Light mode:

Dark mode:

Features

  • Dark Mode Toggle: Allows users to switch between light and dark themes.

  • Context API: Utilizes Context API for managing the dark mode state.

How to Use

  1. Clone the repository to your local machine.

    git clone https://github.com/utkarshgupta04092003/darkmode.git
    
  2. Navigate to the project directory.

    cd darkmode
    
  3. Install dependencies.

    npm install
    
  4. Start the development server.

    npm run dev
    
  5. Open your browser and visit http://localhost:5173 to explore the React Dark Mode App.

Project Structure

  • src/components/ToggleButton.jsx: Component for the dark mode toggle button.

  • src/components/Home.jsx: Component for the home page content having two card.

  • src/context/ThemeContext.js: Context API for managing dark mode state.

  • src/App.js: Main application component defining routes.

Technologies Used

  • Vite
  • React
  • Tailwind CSS
  • Context API

Contributions

Contributions are welcome! If you find any issues or have suggestions for improvement, please open an issue or create a pull request.

License

This project is licensed under the MIT License, allowing you to use and modify the code for personal and commercial purposes.

Top categories

tailwind logo

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.
Loading Svelte Themes