search

abhijeetnishal / URLShortener

URL Shortener Deployed Link 👇🏻
https://urlsrtner.vercel.app
MIT License
37 stars 58 forks source link

[BUG] Issue with Theme Toggle on initial load #132

Closed AMS003010 closed 5 months ago

AMS003010 commented 5 months ago

Describe the bug When a person visits the website for the first time, its in dark mode but the toggle is set to light.

To Reproduce Steps to reproduce the behavior:

  1. Go to ShortURL
  2. Make sure that the local storage is cleared
  3. Reload
  4. Notice that the toggle is in light even though it is in dark mode

Expected behavior When the website is loaded, the initial theme is dark and the the Theme Toggle should also show dark

Screenshots When the website is initially visited for the first time a user 👇 image

It should look like this 👇 image

Desktop (please complete the following information):

Additional context This problem can be solved by the setting the theme state to dark as the component mounts. Please do assign me this issue under GSSOC'24

github-actions[bot] commented 5 months ago

Congratulations, @AMS003010! 🎉 Thank you for creating your issue. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work!

We will promptly review your changes and offer feedback. Keep up the excellent work! Kindly remember to check our contributing guidelines

abhijeetnishal commented 5 months ago

Hey @AMS003010, how do you planning to solve this bug. Could you explain your approach?

AMS003010 commented 5 months ago

The Theme Toggle feature is working properly, the only issue is the initial value of the Theme state not being set to dark when the component loads (since dark is the default theme). I propose to set the initial value of Theme to dark using a useEffect hook as the component loads.

abhijeetnishal commented 5 months ago

Yes, correct. Don't set the theme to dark make the theme as system one and according to that set the toggle. The reason is I am not trying to use useEffect because it will make component client Instead of server.

Srikar04 commented 5 months ago

Hi @abhijeetnishal can you assign this issue to me too I am experienced in working with this tech stack and my approach is somewhat similar to above discussed

abhijeetnishal commented 5 months ago

Hey @Srikar04, this issue is already assigned to @AMS003010. This is small issue doesn't require 2 contributers. Contribute to other issues good luck

AMS003010 commented 5 months ago

@abhijeetnishal I have made the PR with the required changes, please do review it.

abhijeetnishal commented 5 months ago

Closing this issue as completed.