search

devjainofficial / Weather-app

A simple and user-friendly weather application which lets the users know the temperature of any location across the globe and also various parameters. This application has been built using HTML, CSS, JavaScript and weather API.
https://globalweatherappdev.vercel.app/
MIT License
7 stars 21 forks source link

Feature: Dark Mode Toggle Enabled #38

Closed abhijeetsharnagat closed 9 months ago

abhijeetsharnagat commented 9 months ago

Pull Request Description

Overview

This pull request addresses the issue #21 Add Dark Mode to implement a toggle between dark and light mode in the project.

Changes Made

  1. Added Dark Mode Styles:

    • Created a new section in the CSS file specifically for dark mode.
    • Updated background and text colors for dark mode using CSS variables.
    • Added styles for other elements to improve visibility in dark mode.

  2. Toggling with JavaScript:

    • Implemented JavaScript code to toggle the dark-mode class on the body.
    • Added an event listener to the dark mode switch for user interaction.
    • Checked the initial state of the dark mode switch based on user preference or local storage.

  3. Applied Dark Mode Styles to Existing Elements:

    • Updated existing CSS styles to utilize the CSS variables for colors and other properties.
    • Ensured consistent use of CSS variables throughout the stylesheet.

  4. Updated Dark Mode Switch Label:

    • Added a label for the dark mode switch to display the current mode.
    • Dynamically changed the mode label in response to user interaction.

Testing Done

Screenshots

Dark mode -

darkmode

Light mode -

ligh mode

Checklist

Closing Note

This pull request aims to enhance the user experience by providing the option to switch between dark and light modes seamlessly. Please review the changes and provide feedback.

vercel[bot] commented 9 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
weather-app ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 29, 2023 9:48am
devjainofficial commented 9 months ago

@abhijeetsharnagat You've done great work. Thank you for your contribution