feature: add light mode toggle and global theme support

[aadya284]

Description

Description

This PR introduces a Light Mode toggle functionality to the application.

A theme toggle button (Sun/Moon icon) has been added to the navbar, allowing users to switch between Dark Mode (default) and Light Mode. The selected theme is persisted using local storage and applied globally via a theme context and class-based styling.

The implementation ensures:

• Smooth transition between themes
• Persistent theme selection across refresh
• Minimal modification to existing components
• No disruption to current Dark Mode design

Fixes #[ISSUENO]

---

Dependencies

No additional external dependencies were added.

The implementation uses:

• Existing React Context (themeContext)
• Tailwind class-based theming (dark class)
• Global SCSS adjustments

---

Future Improvements

• Improve visual refinement of light mode surfaces (cards, shadows, borders).
• Introduce semantic color tokens for better theme scalability.
• Add system preference detection (prefers-color-scheme).
• Add animation enhancements for smoother theme transitions.
• Add unit tests for theme persistence behavior.

---

Mentions

@maintainers
(Replace with actual maintainer usernames if required)

---

Screenshots of relevant screens

Dark Mode (Default)

Add screenshot here

Light Mode

Add screenshot here

---

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the Coding Guidelines
• My changes in code generate no new warnings
• My changes are not breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues
  Give a summary of the change that you have made

Fixes #[ISSUENO]

Dependencies

Mention any dependencies/packages used

Future Improvements

Mention any improvements to be done in future related to any file/feature

Mentions

Mention and tag the people

Screenshots of relevant screens

Add screenshots of relevant screens

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the Coding Guidelines
• My changes in code generate no new warnings
• My changes are not breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

Note:

The only remaining visual inconsistency is the logo in Light Mode.
Since the current logo asset is a JPG with a dark background, it does not adapt well to the light theme.

If a light-mode compatible logo (transparent PNG/SVG or alternate variant) is provided, I would be happy to open a separate PR to improve this further.

[rishima17]

@aadya284 please raise pr against develop branch instead of main.

[aadya284]

@rishima17 Thank you for pointing that out. I’ve updated the PR to target the develop branch.

[aadya284]

@SyedFahad7 @rishima17 kindly review my pr and merge it