fix: make Dev Card fully theme-aware for light and dark modes

[PranshuPujara]

Summary

Closes : #264

Fixed the Dev Card theme inconsistency issue by replacing hardcoded dark color styles with theme-aware CSS variables in DevCard.module.css.

The Dev Card now properly adapts to both Light and Dark modes while preserving the existing UI design and layout structure.

Changes Made

• Replaced hardcoded dark backgrounds with theme-aware CSS variables.
• Added scoped variables for:
  • Card background gradients
  • Borders
  • Primary and muted text colors
  • Stat cards
  • Badges
  • Language bars
  • Footer section
  • Buttons
• Updated avatarRingInner::after to use a dynamic theme variable instead of a fixed dark fill.
• Refactored grid dots, progress tracks, footer colors, and empty-state text to remove fixed rgba(255,255,255,...) styling.
• Added a :global(.dark) .card override to preserve the premium dark-mode appearance.
• Kept the existing component layout and visual hierarchy unchanged.

Issue Fixed

Previously, the Dev Card remained permanently dark because of hardcoded color values:

.card {
  background: linear-gradient(140deg, #0d1117 0%, #0a0e27 50%, #0d0520 100%);
}

.avatarRingInner::after {
  background: #0d1117;
}

This caused the component to clash with the rest of the UI when Light Mode was enabled.

The component now responds correctly to global theme changes.

Testing

• Verified Light Mode rendering.
• Verified Dark Mode rendering.
• Confirmed that gradients, badges, footer, and stat sections adapt correctly across themes.
• Ensured no layout or spacing regressions were introduced.

Screenshots: After needful changes

Dark theme

Light theme

[PranshuPujara]

Hey @Niteshagarwal01 @Aditya948351
Please review the PR and suggest any changes if needed.

Thanks for your time
Pranshu Pujara 🕵️