Improve Visual Consistency Between Dark Mode and Light Mode UI

[sahilsultane]

Description

Problem Statement

The UI styling between Dark Mode and Light Mode is currently inconsistent.

In Dark Mode, the top navigation/devcard panel has a modern glassmorphism effect with proper depth, blur, and visual appeal. However, in Light Mode, the same component appears as a plain white container without matching styling, making the overall interface feel visually unbalanced.

Additionally, the feature cards/sections below the hero section also look dull and disconnected in Light Mode compared to the polished appearance in Dark Mode. This creates an inconsistent user experience across themes.

Expected Behavior

• Maintain consistent UI quality across both Dark and Light themes.
• Apply matching glassmorphism/shadow/border aesthetics in Light Mode.
• Ensure cards and panels look visually balanced and premium in both themes.
• Improve contrast, depth, and spacing for Light Mode components.

Current Behavior

• Dark Mode looks polished and visually appealing.
• Light Mode panels appear flat/plain white.
• Below sections/cards look odd and less attractive in Light Mode.

Proposed Solution

• Add subtle shadows, borders, blur, and transparency effects in Light Mode.
• Improve background contrast and card elevation.
• Match component styling logic between both themes for consistency.
• Fine-tune colors and spacing for better visual harmony.

Screenshots

Attached screenshots showing:

• Dark Mode UI (working and visually appealing)

---

• Light Mode UI (inconsistent styling issue)

---

---

Additional Notes

This enhancement will improve overall UI/UX consistency and provide a more professional experience across themes.

---

Comment for assignment:

Hi @Harxhit , @ShantKhatri 👋
I would like to work on this UI consistency issue under GSSoC.
I can improve the Light Mode styling to match the premium appearance of Dark Mode while maintaining responsiveness and accessibility.
Please assign this issue to me. Thank you!

[sahilsultane]

Hi @Harxhit , @ShantKhatri 👋
I would like to work on this UI consistency issue under GSSoC.
I can improve the Light Mode styling to match the premium appearance of Dark Mode while maintaining responsiveness and accessibility.
Please assign this issue to me. Thank you!

[Archita-29]

Hi @Harxhit @ShantKhatri i would like to work on this issue to enhance the UI styling in light mode to make it look appealing. Assign me this issue under gssoc'26.

[Xenon010101]

Hi @Harxhit, I can work on making the dark and light mode visuals consistent. Please assign it to me under GSSoC 26.

[Kaustav2706]

Hi @sahilsultane @Harxhit pls review #issue243, i have fixed it along with #issue237.

[Harxhit]

@sahilsultane I have assigned this issue to you.

[sahilsultane]

@Harxhit

Thanks for assigning this issue to me. I’ve started working on it.

Could you please add the GSSoC 2026 labels (approved label and difficulty/level) for proper tracking?

also add lable gssoc:approved

Thanks!