Skip to content

🐛 [Bug]: Fix text contrast and UI component readability in Light Mode #747

@siri-004

Description

@siri-004

📝 Description

When switching the application to Light Mode, several components across different mini-apps/games become unreadable. The text elements remain white or highly desaturated, causing them to blend directly into the light-colored container backgrounds.

🔄 Steps to Reproduce

  1. Open the application.
  2. Toggle the theme/mood to Light Mode (or view the components within a light-themed container).
  3. Navigate to any of the following components:
    • Fibonacci Series: The generated sequence numbers are white on a light background.
    • Word Guessing/Hangman Game: The letter keyboard (A-Z) and "New Game" button text are unreadable.
    • Pascal's Triangle: The generated rows of numbers lack contrast.
    • Game Control Visibility: Essential action buttons like Start, Restart, and New Game are washed out in Light Mode, making it incredibly difficult for users to navigate or begin a new session.

🎯 Expected Behavior

Text colors, button labels, and generated outputs should dynamically switch to a dark/contrasting color (e.g., a deep slate, dark gray, or theme-specific dark color) when Light Mode is active to ensure web accessibility (WCAG) compliance.

❌ Actual Behavior / Error Logs

Image Image Image

💻 Environment

  • OS: Windows 11

  • Browser: Chrome

  • I am a registered GSSoC 2026 contributor.

  • I want to be assigned to fix this issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    type:bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions