Skip to content

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

Description

@pete-murphy

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions