Skip to content

Set background-color on search input#1409

Draft
pete-murphy wants to merge 2 commits into
purescript:masterfrom
pete-murphy:pete/fix-color-scheme
Draft

Set background-color on search input#1409
pete-murphy wants to merge 2 commits into
purescript:masterfrom
pete-murphy:pete/fix-color-scheme

Conversation

@pete-murphy

@pete-murphy pete-murphy commented Jul 13, 2026

Copy link
Copy Markdown

Fixes #1408

Description of the change

Explicitly setting background-color: white in the search <input>'s styles, to override UA stylesheet default of background-color: Field which has poor contrast with the input's color: hsl(221.25, 21.62%, 14.51%) in dark mode.

Before

Screenshot 2026-07-13 at 1 03 07 PM

After

image

Checklist:

  • Added the change to the "Unreleased" section of the changelog
  • Added some example of the new feature to the README
  • Added a test for the contribution (if applicable)

P.S.: the above checks are not compulsory to get a change merged, so you may skip them. However, taking care of them will result in less work for the maintainers and will be much appreciated 😊

@pete-murphy pete-murphy changed the title Set color-scheme to prevent dynamic system colors Set background-color on search input Jul 13, 2026
pursuitColor = rgb 0x1d 0x22 0x2d
rds = px 3.0

backgroundColor white

@pete-murphy pete-murphy Jul 13, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't check until after making this change, but Pursuit has different dark mode styles for its search input:

.top-banner__form input {
  border: 1px solid #1d222d;
  border-radius: 3px;
  background-color: #ffffff;
  color: #1d222d;
  font-weight: 300;
  line-height: 2;
  padding: 0.21em 0.512em;
  width: 100%;
}
@media (prefers-color-scheme: dark) {
  .top-banner__form input {
    border-color: #1d222d;
    background-color: #141417;
    color: #dedede;
  }
}
Image

Maybe we should match that? Would mean moving the style declaration to insertStyle in App.purs so we can use the media query. Nevermind, should be even simpler than that, we should be able to just re-use the same styles from Pursuit CSS (and delete a lot of inline styles here) by using the same classes as Pursuit.

@pete-murphy pete-murphy marked this pull request as draft July 13, 2026 22:36
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.

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

1 participant