Skip to content

UI: Fix input placeholder contrast and focus styling in dark mode - #124

Open
jberlyn wants to merge 1 commit into
Chaptarr:developfrom
jberlyn:fix/dark-mode-placeholder-contrast
Open

UI: Fix input placeholder contrast and focus styling in dark mode#124
jberlyn wants to merge 1 commit into
Chaptarr:developfrom
jberlyn:fix/dark-mode-placeholder-contrast

Conversation

@jberlyn

@jberlyn jberlyn commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

Problem

In dark mode, the author details filter search input rendered dark grey placeholder text on a #333 dark grey background, causing poor contrast and making it difficult to read. It also abruptly flashed white when focused.

Change summary

  • Added placeholder styling (color: var(--gray); opacity: 1;) to FilterSearchInput.css, Input.css, and global scaffolding.css.
  • Added color: var(--textColor); and removed background-color: var(--white); on focus in FilterSearchInput.css.

Screenshots

Original

Screenshot 2026-09-04 at 7 17 04 pm Screenshot 2026-09-04 at 7 25 09 pm

Fixed

Screenshot 2026-09-04 at 7 19 35 pm Screenshot 2026-09-04 at 7 24 33 pm

Testing summary

  • Built and tested frontend against live Chaptarr backend.
  • Verified placeholder contrast and text input in both Dark and Light modes.
  • Verified on Author Details page switching between Audiobook and eBook views.
  • Verified that focusing the search input maintains the dark mode theme background.

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.

1 participant