Improved Theme Toggle Button Functionality

[pujaak]

Description:

This pull request addresses the issue with the theme toggle button on the website. The previous behavior involved a dropdown that required an additional action to change the theme. I have improved the functionality so that the toggle button directly switches between light and dark themes without the need for a dropdown.

Fixes #34

Changes Made:

1. Replaced the dropdown with a direct theme change upon toggle button click.
2. Ensured the light theme toggle button displays a visible icon (sun) even when not hovered over.

Screenshots

Testing Done:

1. Tested theme toggle functionality in both light and dark modes.
2. Ensured the toggle button now directly changes themes without dropdown.
3. Verified the visibility of the icon in both themes.

[vercel]

@pujaak is attempting to deploy a commit to the Yash Kumar Saini's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Welcome, new contributor!

   Please make sure you've read our [Contributing Guide](README.md) and we look forward to reviewing your Pull request shortly ✨

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
leetcode-journal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 8, 2025 6:12pm

[yashksaini-coder]

@pujaak Thank you for your contributions

[pujaak]

@yashksaini-coder Hey, I think I need to make more changes to the code I have submitted, as I can see that both the moon and sun icons appear and overlap with each other when the website is visited for the first time or refreshed.
I am thinking of adding a check to ensure the components render only after the theme is loaded.

[yashksaini-coder]

@yashksaini-coder Hey, I think I need to make more changes to the code I have submitted, as I can see that both the moon and sun icons appear and overlap with each other when the website is visited for the first time or refreshed. I am thinking of adding a check to ensure the components render only after the theme is loaded.

Okay Im raising another issue for that @pujaak

[pujaak]

@yashksaini-coder I have added the check, so the icons do not overlap at the start, though they appear after the theme is rendered, I guess one or half second later.