Skip to content

Mood-Light: Now customize your screen according to your mood and need! This React app lets you easily change the screen color to match your mood.

License

Notifications You must be signed in to change notification settings

mrsahiljaiswal/mood-light

Repository files navigation

Mood-Light

Live Demo

mood-light Preview

Mood-Light is a React application that allows you to customize your screen's color based on your mood or needs. Whether you're looking to enhance your workspace, relax, or simply add some personalization, Mood-Light gives you full control. This project is my first React app, hosted on Netlify, and built using modern web development tools.

🚀 Features

  • Interactive Color Customization: Adjust the screen color to any shade you want.
  • Real-Time Updates: Instantly see changes as you select new colors.
  • Responsive and User-Friendly Design: Works smoothly across different screen sizes and devices.

🛠️ Tech Stack

  • React: For building the user interface and components.
  • Vite: For fast development and optimized production builds.
  • HTML5 & CSS3: For the structure and styling of the application.
  • JavaScript: Core functionality to enable interactive color changes.

🎯 Use Cases

  • Set the Mood: Change the screen color to fit your current vibe or mood.
  • Productivity: Adjust the screen color to one that enhances focus and reduces eye strain.
  • Personalization: Make your screen unique by selecting your favorite colors.

📦 Installation

To run the project locally, follow these steps:

  1. Clone the repository:
    git clone https://github.com/mrsahiljaiswal/mood-light.git
  2. Navigate to the project directory:
    cd mood-light
  3. Install the dependencies:
    npm install
  4. Start the development server using Vite:
    npm run dev
    The app should now be running on http://localhost:3000.

🌐 Live Demo

You can access the live version of the app at mood-light.netlify.app.

📄 Usage

  1. Open the app in your browser via the live link.
  2. Choose your desired color from the color picker.
  3. Watch as the screen color updates in real time to match your selection.

🤝 Contributing

Contributions are always welcome! If you'd like to suggest improvements or report issues, feel free to open a pull request or submit an issue in the repository.

Mood-Light: Now customize your screen according to your mood and need!


About

Mood-Light: Now customize your screen according to your mood and need! This React app lets you easily change the screen color to match your mood.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published