Skip to content

Feature Request: Add Light/Dark Theme Toggle #104

@manjiri27

Description

@manjiri27

Feature Request: Add Light/Dark Theme Toggle

Problem

The current UI uses a predominantly dark color palette, which can feel visually heavy and may not be comfortable for all users during extended usage. Users currently have no option to switch themes based on their preference.

Proposed Solution

Implement a Light/Dark Theme Toggle across the platform.

Requirements

  • Add a theme switch button in the navbar/header.
  • Support both Light and Dark themes throughout the application.
  • Ensure all pages (Home, Registration, Leaderboard) follow the selected theme.
  • Store user preference using localStorage so the selected theme persists across sessions.
  • Maintain accessibility standards with sufficient color contrast.
  • Add smooth transitions while switching themes.

Expected Benefits

  • Improved user experience and visual comfort.
  • Better accessibility for different lighting conditions.
  • Modern and customizable interface.
  • Increased user engagement and usability.

Possible Implementation

  • Use CSS variables for theme colors.
  • Define separate light and dark theme palettes.
  • Apply themes by toggling a CSS class on the root element.
  • Save theme preference in localStorage.

Additional Notes

The current interface appears visually gloomy due to the consistently dark styling. Providing users with a choice between light and dark themes would significantly improve the overall look and feel of the platform.

Please assign this to me under gssoc.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions