Theme Toggle Icon Does Not Switch Between Light and Dark Modes

[aryashantanu405]

Description

The current theme toggle button always displays a sun icon (feather-sun), even when the theme is set to dark mode. This results in inconsistent UX, as the icon does not reflect the active theme (i.e., it should show a moon icon in dark mode).

✅ Expected Behavior

The icon should dynamically reflect the current theme:
🌞 Sun icon when theme is light.
🌙 Moon icon when theme is dark.

🛠️ Suggested Solution

Include both sun and moon icons inside the button element.
Toggle their visibility via JavaScript based on data-theme.

[stris-coder]

hi i am a Gssoc contributor and i would like to work on this issue,
please assign this issue to me.

[Priyanka-28-BM]

@aryashantanu405 please assign me this issue

[Anu-code02]

Hi! I’m a GSSoC'25 contributor and I’d love to work on this issue.

I’ve understood the problem — the theme toggle icon is currently not switching between light and dark modes. Here's how I plan to fix it:

• Detect the current theme using classList on the body
• Dynamically change the icon (🌙 → ☀️ and vice versa) by updating the icon's CSS classes (fa-moon ↔ fa-sun)
• Make sure the toggle is smooth and visually correct with proper styling

Kindly assign this issue to me. I'd be happy to contribute!

If any improvements are needed after my PR, I’ll make them promptly.

Thank you!

[riyaisingh]

please assign this issue to me under gssoc'25

[Khushi-83]

Hello Shantanu,
Can you assign this task to me, I want to contribute over this

[rajanna-adhikary]

hi i am a Gssoc contributor and i would like to work on this issue,please assign this issue to me.