Fix: Input text invisible in DebateRoom dark theme

[Abhishek2005-ard]

Bug Fix

Fixes an issue where the debate input text was not visible in Dark Theme.

Root Cause

Input field did not explicitly define text and background colors, causing
low contrast in dark mode.

Solution

• Applied theme-aware Tailwind classes:
  • text-foreground
  • bg-background
  • placeholder:text-muted-foreground

Affected Area

• DebateRoom input field

Closes #140

Summary by CodeRabbit

• Style
  • Updated input field styling to enhance visual appearance and improve interface consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This change updates the Input component's styling in DebateRoom.tsx to resolve text visibility issues when using dark theme. The className was modified from hardcoded color values to theme-aware Tailwind utility classes (border-border, bg-input, text-foreground), ensuring consistent visibility across all theme modes.

Changes

Cohort / File(s)	Summary
Dark Theme Styling Fix frontend/src/Pages/DebateRoom.tsx	Updated Input field className from hardcoded borders and backgrounds to theme-aware utilities: replaced border-gray-300 bg-transparent with border-border bg-input, added text-foreground for proper text color inheritance, and maintained focus state styling with focus:border-orange-400. Fixes invisible text bug in dark theme.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰✨ A rabbit hops through themes so dark,
Where text once hid without a spark,
With colors borrowed from the scheme,
Input fields now gleam and beam!
Dark or light, the words shine true,
Thanks to classes fresh and new! 🌙

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main fix: resolving invisible input text in the DebateRoom component specifically for dark theme, which directly matches the changeset.
Linked Issues check	✅ Passed	The PR addresses the core requirement from issue #140 by updating the Input component's className with theme-aware Tailwind classes (text-foreground, bg-input, placeholder:text-muted-foreground) to ensure visible text with proper contrast.
Out of Scope Changes check	✅ Passed	The change is limited to the DebateRoom input field styling as specified in issue #140, with no unrelated modifications to other components or features.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1f8db72 and e5b2b06.

📒 Files selected for processing (1)

• frontend/src/Pages/DebateRoom.tsx

🔇 Additional comments (1)

frontend/src/Pages/DebateRoom.tsx (1)

841-842: Ensure DebateRoom input uses theme-aware styling.

The Input component correctly uses theme-aware Tailwind classes (border-border, bg-input, text-foreground, placeholder:text-muted-foreground) that adapt to light, dark, and contrast modes via CSS variables. This approach is correct.

However, other Input components in the codebase still use hardcoded colors (e.g., BotSelection.tsx line 466: bg-white text-gray-800). Consider applying the same theme-aware pattern across all Inputs for consistency, or document why certain components require hardcoded styling.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}