Skip to content

fix: resolve low contrast input text in light mode(#290)(#291) - #292

Open
AkhileshPachnanda wants to merge 1 commit into
avishek0769:mainfrom
AkhileshPachnanda:#290/1
Open

fix: resolve low contrast input text in light mode(#290)(#291)#292
AkhileshPachnanda wants to merge 1 commit into
avishek0769:mainfrom
AkhileshPachnanda:#290/1

Conversation

@AkhileshPachnanda

Copy link
Copy Markdown

Description

Please include a summary of the changes and the rationale behind them. Reference any files, components, or modules modified.

Fixes #290 & #291

Description

This PR resolves a contrast issue in Light Mode where user-entered text in input fields (such as on the Sign Up and Sign In pages) was hardcoded to white (text-white), resulting in low contrast (white text on a light gray background).

Rationale & Changes:
Instead of modifying text-white classes on dozens of individual component inputs across the codebase, a clean, global CSS override was added to src/index.css targeting all input, textarea, and select elements when Light Mode is active (html:not(.dark)). This safely forces entered text to use the theme-aware var(--text-primary) color (black/dark gray) in Light Mode, while keeping it white in Dark Mode.

Type of Change

  • Bug fix (non-breaking change which fixes an issue)

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings or console errors
  • I have run tests locally (pnpm run test or vitest run under backend/) and they pass
  • Any dependent changes have been merged and published in downstream modules

Verification Details

1. Manual Verification

Steps to reproduce:

  1. Run the frontend application and toggle Light Mode.
  2. Navigate to the Sign Up (/signup) or Sign In (/signin) page.
  3. Type text into the input fields (Name, Email, Password, etc.).
  4. Toggle back to Dark Mode and type inside the fields.

Expected result:

  • In Light Mode: The entered text is fully visible in dark gray/black (#0f172a), providing high contrast against the input field background.
  • In Dark Mode: The entered text remains white (#f9fafb) as before.

Visual Documentation

image image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Full Name field displays white text on a light background

1 participant