feat: Add Dark Mode Support for Enhanced Accessibility and UI

[anushkagupta200615-jpg]

Related Issue

Closes #ISSUE_NUMBER

Summary

Brief explanation of the contribution.

Changes Made

• Bullet list of implemented changes.
• ...

Testing

Explain how the changes were tested.

Screenshots

Add screenshots if UI changes exist.

Checklist

• Code follows project style
• Tested locally
• No unrelated changes included
• Documentation updated (if applicable)

Description

This PR resolves #1183 by implementing a fully functional dark mode toggle for the StudyPlan web application, improving accessibility and reducing eye strain during late-night study sessions.

Resolves: #1183

Changes Made

• Header Toggle: Added a quick-access dark mode toggle button (fa-moon/fa-sun) to the main navigation header.
• State Synchronization: Linked the new header toggle with the existing Settings modal toggle so that both stay synchronized and reflect the current theme state.
• CSS Architecture: Refactored index.css to trigger dark mode using the [data-theme="dark"] attribute on the :root element, allowing explicit user override while preserving the automatic fallback to @media (prefers-color-scheme: dark).
• Persistence: Configured the application to save the user's theme preference in localStorage so the UI remembers their choice across sessions and page reloads.

Testing

• Verified that clicking the header toggle smoothly switches the interface between light and dark themes.
• Verified that the header toggle icon correctly alternates between a sun and a moon.
• Verified that the toggle state persists after a page reload.