Add light and dark mode toggle

[mohsenkhosroanjam]

Description:
As a user, I would be happy if I could change the website's theme from dark to light and vice versa.

Actual result:
There is no toggle to switch between dark and light modes.

Expected result:
If the user is in light mode and clicks the dark mode button, the theme should be switched to dark mode.
If the user is in dark mode and clicks the light mode button, the theme should be switched to light mode.

Steps to reproduce:
1- Go to https://codecandy.suraniharsh.codes/

Screenshot:

[namravamja]

Hello, I'd like to work on this branch if no one can

[suraniharsh]

Hi @mohsenkhosroanjam ,

Thank you for raising this issue! I completely agree that adding a theme toggle would significantly enhance the user experience by providing more personalization options. Here's the detailed plan for implementing this feature:

"Toggle Between Light and Dark Mode: A Theme Switcher's Delight"

Description:
Our website currently has a fixed theme, which limits user personalization. Let’s make the user experience more engaging by adding a toggle for light and dark modes. This feature will allow users to switch between themes effortlessly, enhancing usability and accessibility.

Expected Outcome:

• Add a theme toggle button that allows users to switch between light and dark modes.
• Ensure the theme preference is saved (e.g., using local storage) so the user’s choice persists across sessions.
• Smoothly integrate the toggle functionality without affecting the existing UI or performance.

Tasks:

1. Analyze the current theme setup and identify integration points for the theme toggle.
2. Add a toggle button to the user interface for light/dark mode switching.
3. Implement functionality to:
   • Dynamically change the website theme when the button is clicked.
   • Store the user’s preference (e.g., in local storage or cookies).
4. Ensure the toggle works seamlessly across all pages.
5. Test the functionality across devices and browsers to ensure consistency.
6. Create a separate branch for this feature and submit a pull request upon completion.
   • Branch Name:
     • feature/theme-toggle
7. Address any feedback provided by code reviewers.

Screenshot of the Issue:
[Attach a screenshot of the current theme and a mockup of the toggle button in action.]

Deployed Link:
[Provide the live link to the website where the feature will be implemented.]

[suraniharsh]

@Namra-21
Hi! Sure, you can work on this branch. I've created a new branch named feature/theme-toggle for this task. Please proceed with your implementation and let us know if you need any assistance. Thanks for taking this up!

[mohsenkhosroanjam]

Hi @suraniharsh, thanks for your great explanation.