Improve Dark/Light Mode Styling and Theme Consistency

[Niyati-Dinesh]

Overview

The current dark mode toggle only partially changes styles (mainly text), while backgrounds and UI elements remain unchanged. This creates inconsistency and makes the "dark mode" feel incomplete. Additionally, there is an overuse of green with little visual hierarchy, making the interface harder to scan. Improving theme variables and styling will create a polished, professional, and accessible experience.

---

🔹 Issues Identified

1. Dark Mode Inconsistency

   • Backgrounds remain white/green even in dark mode.
   • Footer and hero sections don’t adapt properly.
   • No proper contrast for text in dark mode.

2. Color Overload

   • Excessive use of green across nav, buttons, and footer.
   • Call-to-action buttons do not stand out.

3. Footer Styling

   • Links blend into the background.
   • No separation between sections, readability issues.

4. Buttons and Navigation

   • Login/Register buttons look the same as nav links.
   • CTA ("Get Started Today") doesn’t visually pop.

---

🔹 Suggested Improvements

1. Theme Variables

   • Introduce CSS variables for both light and dark themes.

   • Example:

     :root {
       --bg: #ffffff;
       --bg-secondary: #f5f5f5;
       --text: #1a1a1a;
       --text-secondary: #4a4a4a;
       --accent: #2e7d32;
       --accent-hover: #256628;
     }
     
     [data-theme="dark"] {
       --bg: #121212;
       --bg-secondary: #1e1e1e;
       --text: #f5f5f5;
       --text-secondary: #cfcfcf;
       --accent: #66bb6a;
       --accent-hover: #81c784;
     }

2. Consistent Application

   • Apply variables across body, navbar, footer, and buttons.
   • Ensure smooth transitions with transition: all 0.3s ease;.

3. Improved Button Styling

   • Differentiate nav links and action buttons.
   • Highlight CTA buttons with stronger contrast (e.g., white on green or green on dark).

4. Footer Redesign

   • Use a darker background in dark mode for contrast.
   • Ensure links/icons are clearly visible in both themes.
   • Add spacing and section separation.

5. Accessibility

   • Maintain WCAG 2.1 contrast ratios (4.5:1 minimum for text).
   • Test across devices.

---

🔹 Expected Outcome

• Fully functional light/dark mode with consistent styling.
• Clearer visual hierarchy and contrast.
• A modern, polished look with improved usability.
• Better accessibility and user comfort across devices.

---

Priority

High — Theme switching is a visible feature. Improving it will significantly enhance first impressions and usability.

[github-actions]

Thank you for raising this issue!

We'll review it as soon as possible. We truly appreciate your contributions! ✨

Meanwhile make sure you've visited the README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md before creating a PR for this. Also, please do NOT create a PR until this issue has been assigned to you. 😊

[Niyati-Dinesh]

@omroy07 I would like to work on this issue as part of GSSoC’25.
Please assign it to me.

[omroy07]

Assigned but do on all pages

[Niyati-Dinesh]

Assigned but do on all pages

Yess I will .