Skip to content

Add Global Dark/Light Theme Toggle #246

Description

@Sargam-Ghagre

Description

The application currently lacks a dedicated theme switcher, requiring users to stay on a single theme. Adding a Dark/Light Theme Toggle will improve accessibility, personalization, and overall user experience by allowing users to switch between themes seamlessly.

This feature should provide a consistent theming experience across the entire application while preserving the user's preference.

Proposed Improvements

  • Add a Dark/Light Theme Toggle that is easily accessible from the navigation bar.
  • Persist the selected theme using local storage so the preference is retained across sessions.
  • Apply the selected theme consistently across all pages and components.
  • Add smooth theme transition animations for a polished user experience.

Expected Outcome

  • Users can easily switch between Dark and Light themes.
  • Theme preference is remembered across page reloads and future visits.
  • Consistent and responsive theming throughout the application.
  • Improved accessibility, usability, and overall visual experience.

Additional Notes

  • The implementation should not affect existing functionality.
  • Ensure all UI components are fully compatible with both themes.
  • Follow the project's existing design system and styling conventions.

Metadata

Metadata

Assignees

Labels

TypeScriptTypeScript codeenhancementNew feature or requestgssoc:approvedApproved for GSSoC contributionlevel:intermediateModerate scope requiring project familiarity or cross-file changes.triageNeeds maintainer triage.type:accessibilityAccessibility, keyboard, screen-reader, or inclusive UX work.type:designVisual design, UX layout, or interaction polish.type:featureNew user-facing or API-facing capability.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions