Refactor dark mode implementation and improve styling consistency

[SRSoham]

Changes Made

This PR refactors and improves the previous dark mode implementation after review feedback from the earlier PR (#248).

Improvements

• Refactored dark mode styling to use scoped [data-theme="dark"] component-based overrides
• Reduced unnecessary global overrides and excessive !important usage
• Improved maintainability and readability of dark mode CSS architecture
• Fixed UI inconsistencies across multiple sections of the application
• Improved contrast, readability, and accessibility in dark mode
• Cleaned up duplicated/redundant styling where possible

Updated Components

• Hero section
• Feature cards
• Buttons and interactive elements
• Form sections and inputs
• GitHub import button
• Skill strip / tech stack marquee
• Cards, labels, and support sections
• Dark mode icon styling

Fixes

• Fixed overflow/layout issues in skill-strip section
• Fixed light backgrounds appearing in dark mode
• Fixed inconsistent card/button appearance
• Improved dark mode responsiveness and visual consistency
• Corrected text visibility issues in dark theme

Previous PR

This PR continues and refines the earlier dark mode implementation:

• Previous PR: Improved dark mode UI consistency across the application. #248

Testing

Tested locally for:

• Dark/light theme switching
• Desktop responsiveness
• Form visibility and readability
• Buttons/cards/labels consistency
• Hero and feature sections
• Skill strip layout and overflow behavior

[vercel]

@SRSoham is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[SRSoham]

Hi @komalharshita,
Addressed the review feedback from the previous PR by refactoring the dark mode implementation into a cleaner component-based structure.

Key updates:

• replaced large global overrides with scoped [data-theme="dark"] styling
• reduced unnecessary !important usage
• improved consistency across cards, forms, buttons, hero sections, and skill-strip components
• fixed contrast/readability issues in dark mode
• cleaned up duplicated and redundant styling
• fixed layout and overflow issues in the tech stack section

Tested locally for theme switching, responsiveness, and UI consistency across major sections.

[komalharshita]

This is a strong visual improvement overall — the dark mode coverage is much more complete now, and several UI areas feel significantly more polished and consistent.

Things done well:

• Expanded dark mode styling across many previously inconsistent components
• Good use of CSS variables
• Clean localStorage toggle implementation
• Marquee layout cleanup improves stability
• Better visual consistency across cards/buttons/pills/modals

However, a few important issues should be addressed before merge:

• package-lock.json changes should be removed unless actual dependency updates are required.

• The theme toggle button is missing accessibility attributes like:

  • aria-label
  • aria-pressed

• No reduced-motion handling was added for animations/transitions.

• The implementation currently relies on many repeated component-specific dark mode overrides, which may become difficult to maintain long-term.

• Multiple !important declarations suggest CSS specificity issues that should ideally be resolved architecturally instead.

• Theme initialization likely causes a flash-of-incorrect-theme (FOUC) before dark mode loads.

• prefers-color-scheme support is currently missing for first-time users.

Overall, the UI work is genuinely good, but the accessibility and maintainability concerns should be resolved before approval.

[SRSoham]

Hi @komalharshita , thank you for the detailed review and suggestions. I’ve addressed the requested accessibility improvements, reduced-motion support, and resolved the merge conflicts.

Kindly review the updated changes when you get time. Thank you!

[SRSoham]

Hi @komalharshita , just following up on this PR. I’ve addressed the requested review changes and resolved the merge conflicts. Kindly review it when you get time. Thank you!

[komalharshita]

Thanks for addressing the accessibility concerns, reduced-motion support, and resolving the merge conflicts.

The dark mode implementation looks much stronger now. Before approval, I'd like one final verification:

• Please confirm the new skill-strip marquee structure does not introduce duplicate content or layout issues across screen sizes.
• Verify theme persistence works correctly (save/restore state, icon updates, and aria attributes).

Once those checks are confirmed and the preview looks good, this should be ready for merge.

If the Vercel preview and local testing look good, I'd be comfortable approving this PR after that final check.

[SRSoham]

Hi @komalharshita, I completed the final verification checks locally.

• Confirmed the updated skill-strip marquee does not introduce duplicate content or layout issues across different screen sizes.
• Verified dark mode persistence works correctly, including save/restore state, icon updates, and aria attributes.

The local preview looks stable now. Thank you for the review!

[SRSoham]

Hi @komalharshita, I verified the latest working state locally:

• skill-strip layout and responsiveness look correct across screen sizes
• dark mode persistence, icon updates, and aria attributes work properly

The current branch is working correctly locally. Since the main branch has moved ahead again, there are merge conflicts showing on GitHub. Please let me know if you’d prefer me to resolve them again locally or if you’d like to handle the final rebase/merge from your side. Thank you!

[komalharshita]

@SRSoham you will need to resolve them locally, as there are several contributors who are working for the similar codespace directory

[SRSoham]

@komalharshita
Superseded by #717

Due to repeated merge conflicts after overlapping updates landed in the same sections, I rebuilt the implementation cleanly on top of the latest main branch and opened a fresh PR with the resolved version.

The new PR includes:

• resolved merge conflicts
• restored dark mode functionality
• accessibility improvements
• reduced motion support
• cleaned duplicate/conflicting CSS and JS logic
• verified local testing

Continuing review/discussion in the new PR.

[komalharshita]

Closing this PR as the updated one has been merged