Toggle Button for Light/Dark added

[Prashant-2024]

Issue No. #54
Toggle Button added for Light and Dark mode of application.

[vercel]

@Prashant-2024 is attempting to deploy a commit to the Abhijeet's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Great job, @Prashant-2024! 🎉 Thank you for submitting your pull request. Your contribution is valuable and we appreciate your efforts to improve our project.

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

[abhijeetnishal]

Hey @Prashant-2024, there are couple of issue in this PR:

1. Component should be in TypeScript not JS and file should be in .tsx format for component.
2. In the current project, we already using "next-themes" so we can implement Light/dark mode feature directly using this.
3. The switch between light and dark mode is just button not a toggle one, use toggle button.
4. The toggle button is present in Navbar not in page so that users can switch in any component
5. The button should be visible, currently it's not visible size is small as it's not a toggle button.

Try to understand the project first before contributing so that you can easily understand.

[abhijeetnishal]

You can implement using next-themes like this:

"use client";
import { useTheme } from "next-themes";

export default function ThemeToggle() {
  const { systemTheme, theme, setTheme } = useTheme();
  const currentTheme = theme === "system" ? systemTheme : theme;

  const toggleTheme = () => {
    const newTheme = currentTheme === "dark" ? "light" : "dark";
    setTheme(newTheme);
  };

  return (
    <button
      onClick={toggleTheme}
      className="p-2 bg-gray-200 dark:bg-gray-800 rounded"
    >
      {theme === "light" ? "🌞" : "🌜"}
    </button>
  );
}

See this is easy to implement, that's why i am saying first understand the project.
Currently we can implement using this later it can be done using state management library.

[Prashant-2024]

I'm sorry for causing this inconvenience, I missed the part where I had to implement it with typescript, it's still new to me and am currently learning it.
I did understood the feature and that's why asked to assign it to me.
The delay was caused because I had exams in between.
I will the correct the implementation ASAP, and share it with you.

[abhijeetnishal]

No problem @Prashant-2024, open source and gssoc is for learning.

[abhijeetnishal]

Hey @Prashant-2024, are you done with the changes?

[Prashant-2024]

Yes, I am close to it.
I will share them by today evening.
I know i have taken long time and causing delay, for this changes. I am currently travelling and don't have access to laptop.
I will share them ASAP

[Prashant-2024]

Below are the changes:

Dark Mode:

Light Mode:

@abhijeetnishal Request to look into it and let me know

[abhijeetnishal]

Try to remove commented code

[Prashant-2024]

Removed

[abhijeetnishal]

I have approved this PR but i have added comments don't repeat this for other projects.