[Feature] Fix Inconsistent Dark/Light Theme Across the Site

[syed-imadulla]

Summary

Some pages and components use light mode while others are dark, resulting in a mixed and inconsistent user interface. Examples:

• The homepage header/footer appears light.
• The “About” section is in dark mode.
• Features cards and other areas switch between modes unexpectedly.

Motivation

• A mismatched theme creates visual disruption and reduces usability.
• Students expect a unified interface—either fully light or fully dark.
• Especially for accessibility, inconsistent contrast or styling can cause issues.

Possible Solution

• Introduce a global theme toggle (dark ↔ light) managed via JavaScript and CSS custom properties.
• Wrap all page containers in a root-level CSS variable context (e.g., data-theme="dark" or "light").
• Audit each section (header, main, footer, feature cards, branch selector, etc.) to ensure unified styling.
• Clean up inline styles and apply consistent color variables across components.

Additional Context

Here are screenshots highlighting mixed theme zones:

• Light header + dark body
• Dark hero section + light features cards
• Mixed-mode sections without a consistent toggle

A consistent UI will give NotesVault a polished, professional appearance and improve readability.

[syed-imadulla]

check this issue and assign it to me pls

[Harsh-26626]

@syed-imadulla Don't work on other pages, someone else is assigned to each page. You may work on the about page and make it light mode only for now. Dark mode will be implemented after the website is polished enough in light mode.

Share the design you have in mind for about page (see #485 )

[syed-imadulla]

Okk I'll only work on about page light theme

[syed-imadulla]

Pls Assign it for me

[github-actions]

👋 Thanks for opening this issue! We'll look into it as soon as possible, estimated time for response is 18–24 hrs.
If your issue goes stale beyond this timeframe, kindly contact mentors or PAs via our Discord server.

⏱️ Issue response & contact

• In the meantime, provide screenshots, videos, or other context to speed review and assignment.
• If relevant, please mention whether this issue is raised under GGSoC or OSCI when you create the issue.
• If you have questions, comment below or ping any mentor on discord.

---

📝 Guidelines for Raising Issues

To ensure quality moving forward:

For UI/UX contributions

• You must include a design (Figma link, image, or wireframe) when raising an issue (if applicable).
• Issues without visual references will not be accepted.
• If the change is a modification, share screenshots of the area you want to change.

For Backend contributions

• You must share a brief execution plan what you intend to build, how it works, and why it's needed.
• Vague issues will be closed without review.

---

📝 Guidelines for Opening Pull Requests

• Your PRs should target the master branch.
• No one is allowed to push directly to main.
• All PRs which do not mention an issue will be closed without review.
• Do NOT raise a PR unless the issue is assigned to you.

---

✅ Quick checklist (please attach before requesting assignment)

• Design link or screenshot (for UI/UX)
• Execution plan (for backend)
• Mention if this is under GGSoC / OSCI
• Any related issue/PR numbers referenced

---

Happy contributing 🚀