search

saurabhbakolia / SCROLLME--ECOMMERCE-WEBSITE

ScrollMe is an open-source eCommerce platform built with JavaScript, React, Styled Components, Node.js (Express), and MongoDB. It offers a modern shopping experience with a scalable backend, perfect for contributors or those learning modern web development.
https://www.scrollme.online/
MIT License
19 stars 65 forks source link

Feature : Dark and Light Mode #164

Open archanasingh11 opened 1 month ago

archanasingh11 commented 1 month ago

Title

Implement Dark and Light Mode Toggle for Enhanced User Experience

Description

The website currently lacks a dark and light mode toggle, which can enhance user accessibility and provide a more comfortable browsing experience in various lighting environments. This feature will allow users to switch between light and dark themes based on their preference or system settings, offering both aesthetic and practical benefits, such as reducing eye strain in low-light conditions.

Steps to Reproduce the Issue

  1. Action 1: Visit the website in its current state.
  2. Action 2: Notice that there is no option to toggle between dark and light modes.
  3. Action 3: Inspect the overall color scheme, which may not be ideal for users in different lighting environments (e.g., bright white theme in low light).

Expected Behavior

A toggle switch should be available to switch between dark and light modes, allowing users to easily change the theme. The application should remember the user's preference across sessions and adjust the theme dynamically without affecting usability or design consistency.

Actual Behavior

Currently, the website only supports a single theme (likely a light mode), and users cannot switch to a dark theme, which can cause discomfort in certain situations such as during nighttime browsing.

Additional Context

Implementing dark and light mode would align the website with modern UI/UX trends, offering greater flexibility to users. This feature would also make the website more accessible for users who prefer dark mode or who work in low-light environments. The toggle switch should ideally be placed in the website's header or settings section and should work seamlessly across all pages and components.

Please @saurabhbakolia assign me this issue with labels "GSSOC-Ext", "hacktoberfest-accepted" and "level3".

SatyamTiwari069 commented 1 month ago

Add labels and please assign me the task as for gssoc24 extd

AnshuWorld commented 1 month ago

Please assign me this task under gssoc24 extd