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
17 stars 59 forks source link

dark light mode toggle #210

Open sv410 opened 3 days ago

sv410 commented 3 days ago

light night

github-actions[bot] commented 3 days ago

đź‘‹ Thank you @sv410 for raising an issue! We appreciate your effort in helping us improve. Our team will review it shortly. Stay tuned!

thakuratul2 commented 3 days ago

@sv410 give me the proper way how you implement this

sv410 commented 2 days ago

@thakuratul2 A Dark and Light Mode Toggle allows users to switch between two visual themes: a dark theme (usually with darker backgrounds and lighter text) and a light theme (with lighter backgrounds and darker text). The toggle is typically a button or switch on the user interface that, when clicked, changes the overall style of the webpage to match the selected theme. How to Implement It:

  1. HTML Structure: You'll add a simple button or switch in the HTML that users can interact with to toggle between modes.
  2. CSS for Themes: Two sets of CSS styles are created—one for light mode (the default) and one for dark mode. The light mode typically uses lighter background colors and darker text colors, while dark mode inverts these colors.
  3. JavaScript for Toggling: JavaScript handles the functionality of switching between light and dark modes. When the button is clicked, the JavaScript toggles a class on the body element (e.g., dark-mode). This class will activate the dark mode styles. JavaScript can also store the user’s preference in localStorage, so their selected theme persists across page reloads or sessions.
  4. User Experience: Many websites offer this feature to improve readability in different lighting environments, reduce eye strain, and match the system theme preference.
saurabhbakolia commented 2 days ago

2. one for light mode (the default) an

I think you can work on it, but make sure to maintain the code styling, because you have to make changes in so many files. Also, we are using redux tookit, for state management, you can use that one as-well if you want.

And one more thing, can you share the colour combinations that you are going to add for dark mode? It will be helpful if you can make a change in the home pagefirst with your choice of colour combination, and if that fits then we are good to go.

Kaif9999 commented 4 hours ago

hey i would like to work on this issue i have previously added features like dark mode toggler so i can do it now also assign me this under gssoc-ext hacktoberfest level1