From b41ce8b522c76461ddb06f3b9f4df97f84c5f0eb Mon Sep 17 00:00:00 2001
From: joao <22820692+joaolago1113@users.noreply.github.com>
Date: Sat, 10 Feb 2024 14:36:42 +0000
Subject: [PATCH] chore: Fix Search Input Visibility in Dark Mode (#4317)

### 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.
---
 docs/src/css/custom.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 5a526ec5bfd..b08766fbc3b 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -209,3 +209,8 @@ html[data-theme='dark'] {
   border-width: 0;
   border-style: solid;
 }
+
+input#docsearch-input {
+  background-color: transparent;
+}
+