feat: Add a dark/light mode toggle

[Dev1822]

Problem

Currently, users have no way to switch between light and dark themes within the application. The app defaults to a single theme, which may not be comfortable or accessible for all environments (e.g., bright daylight versus low-light nighttime use) and ignores individual user preferences.

Proposed Improvement

Implement a dark/light mode toggle switch accessible from a prominent location, such as the main navigation bar or settings menu. This toggle will allow users to manually switch between the two themes. Additionally, the application should automatically respect the user's system-wide theme preference by default if no manual selection has been made.

Why improvement is needed

Adding a dark mode option significantly improves accessibility and reduces eye strain in low-light environments. It provides a better overall user experience by accommodating personal preferences and brings the application up to standard with modern web and software expectations.

Expected Result

• Users will see an intuitive toggle button (e.g., a sun/moon icon) that immediately updates the UI theme when interacted with.
• The user's selected theme preference will be persisted across sessions (e.g., using localStorage).
• If a user has not set a preference, the app will default to their OS/system theme setting.
• All UI components will have well-defined, accessible color palettes for both modes.

Alternatives Considered

• Auto-detect only (No Toggle): We considered only relying on the system preference (prefers-color-scheme) without providing a manual toggle. However, users often prefer to explicitly set an app's theme independently of their operating system theme.
• Time-based theme switching: Automatically switching based on the user's local time of day. This is more complex to implement reliably and often less desirable than giving the user direct manual control.

Additional Context

• We will need to define the exact dark mode color palette (backgrounds, text, primary/secondary colors, borders) to ensure we maintain WCAG contrast compliance.

[PadmakarBagade]

Hi @Charushi06,

I'd like to work on this enhancement. I have experience implementing theme systems with system preference detection, persistent user preferences, and accessible dark/light mode support.

My implementation will include:

• Manual light/dark theme toggle
• Automatic detection of the user's system theme (prefers-color-scheme)
• Persistent theme preference using localStorage
• Accessible color contrast across both themes
• Minimal impact on the existing UI and architecture

I'll ensure the implementation follows the project's coding standards and maintains backward compatibility.

Please assign this issue to me. Thank you!

[hemag111]

Hi @Dev1822,

I would like to work on this issue as part of my contribution for GSSoC 2026.
I have previous experience implementing theme management systems in web applications, focusing on both accessibility and user experience. My proposed approach for this task is as follows:
Implementation: Introduce a theme provider that supports a manual light/dark toggle.
System Preference: Use the prefers-color-scheme media query to automatically detect and respect the user's OS-level theme settings by default.
Persistence: Utilize localStorage to ensure the user's manual preference persists across sessions.
Accessibility: Ensure the new color palette adheres to WCAG contrast standards to maintain accessibility.
I am familiar with the project’s contribution guidelines and will ensure my implementation maintains clean, modular code with minimal impact on the existing architecture.
Could you please assign this issue to me? Thank you!