purescript / purescript/spago

Illegible search input text in `spago docs` app (low contrast) in system dark mode

Open Beginner friendly
#1,408 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
PureScript
Stars
831
Forks
137
PR merge metrics
No merged PRs in 30d

Description

The <input> used for searching in the spago docs app has color: hsl(221.25, 21.62%, 14.51%); with no background-color set:

Image

The background color for the <input> inherits from the default user agent stylesheet, which uses the Field system color for inputs. Because we also have

:root {
  color-scheme: light dark;
}

in our CSS (I think this is coming from the Pursuit styles defined in purescript repo), the resolved value of Field will vary depending on color scheme.

In dark color scheme, Field is a dark gray which I think varies a bit depending on browser, but in any case the dark text color does not respond to color scheme and the result is that the input value is illegible. Here's a screenshot from Chrome on Mac OS with system them set to dark (the input value is set to "pure"):

screenshot of illegible text in dark mode

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

In the spago docs app, locate the search styling described in the issue; no source file or test is named. Reproduce the problem with system dark mode and verify that entered search text remains legible in both light and dark color schemes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.