Skip to content

Commit

Permalink
chore: Fix Search Input Visibility in Dark Mode (#4317)
Browse files Browse the repository at this point in the history
### Summary
This pull request addresses an issue with the search input box on the
Noir documentation site when in dark mode. The text within the search
box is illegible due to the white background color, which conflicts with
the white text color.

### Problem Description
In dark mode, the background color of the search input box remains
white, while the text color is also white, rendering the text invisible
to users. This creates a poor user experience as it prevents users from
seeing what they are typing into the search box.

### Solution
To fix this issue, the background color of the search input box has been
changed to transparent, allowing for the text to be visible in both
light and dark modes.

### Visual Evidence of Issue

#### Desktop Dark Mode

| Input State | Screenshot |
|-------------|------------|
| Text Entered, Barely Visible | <div style="text-align: center;"><img
src="https://github.com/noir-lang/noir/assets/22820692/924037e4-13de-47dd-b687-3da1e97c2234"
width="500" alt="Text barely visible in search box on desktop dark
mode"></div> |

#### Mobile Dark Mode

| Input State | Screenshot |
|-------------|------------|
| Text Entered, Barely Visible | <div style="text-align: center;"><img
src="https://github.com/noir-lang/noir/assets/22820692/1b7f3e3b-ebf8-41cc-a429-d0dd660484fa"
width="250" alt="Text barely visible in search box on mobile dark
mode"></div> |

### Visual Comparison

| Mode     | Before Change | After Change |
|----------|---------------|--------------|
| Dark - Desktop | <div style="text-align: center;"><img
src="https://github.com/noir-lang/noir/assets/22820692/55265613-c38d-4c79-96e5-7a30a680077b"
width="500" alt="Before Desktop Dark"></div> | <div style="text-align:
center;"><img
src="https://github.com/noir-lang/noir/assets/22820692/46c81b53-a028-450f-897f-271186bbecf6"
width="500" alt="After Desktop Dark"></div> |
| Light - Desktop | <div style="text-align: center;"><img
src="https://github.com/noir-lang/noir/assets/22820692/a8e06448-1030-4667-a659-4ff3c59e097e"
width="500" alt="Before Desktop Light"></div> | <div style="text-align:
center;"><img
src="https://github.com/noir-lang/noir/assets/22820692/d4a2dcb0-8edf-44fa-bbae-f3599f81bbc1"
width="500" alt="After Desktop Light"></div> |
| Dark - Mobile | <div style="text-align: center;"><img
src="https://github.com/noir-lang/noir/assets/22820692/1044b70f-6ab2-4ebd-b849-d41a593cb40c"
width="250" alt="Before Mobile Dark"></div> | <div style="text-align:
center;"><img
src="https://github.com/noir-lang/noir/assets/22820692/af31ddc2-4601-429c-812c-8231fa606876"
width="250" alt="After Mobile Dark"></div> |
| Light - Mobile | <div style="text-align: center;"><img
src="https://github.com/noir-lang/noir/assets/22820692/c4295751-8cb7-441c-9ebe-bdd9a76cd222"
width="250" alt="Before Mobile Light"></div> | <div style="text-align:
center;"><img
src="https://github.com/noir-lang/noir/assets/22820692/4c786e45-246c-42a9-8247-3881eb1b34c7"
width="250" alt="After Mobile Light"></div> |

### Files Changed
- `docs/src/css/custom.css`: Added styles to override the default
background color of the `#docsearch-input` element.

### Testing
The changes have been tested across various browsers and devices to
ensure compatibility and that the search input box text is now clearly
visible in both light and dark modes.
  • Loading branch information
joaolago1113 authored Feb 10, 2024
1 parent a44fcf3 commit b41ce8b
Showing 1 changed file with 5 additions and 0 deletions.
5 changes: 5 additions & 0 deletions docs/src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -209,3 +209,8 @@ html[data-theme='dark'] {
border-width: 0;
border-style: solid;
}

input#docsearch-input {
background-color: transparent;
}

0 comments on commit b41ce8b

Please sign in to comment.