Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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.
- Loading branch information