Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Nov 24, 2025

The search bar magnifier icon was always rendered in black, making it invisible against dark backgrounds.

Changes

Override the default Docusaurus navbar search icon with theme-aware SVG data URLs in SearchBar.module.css:

/* Light theme - black icon */
:global(.navbar__search-input) {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23000000" ...') !important;
}

/* Dark theme - white icon */
html[data-theme="dark"] :global(.navbar__search-input) {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" ...') !important;
}

The icon now automatically switches color based on the active theme.

Screenshots

Before (issue - black icon invisible on dark background):
Issue

After - Light theme:
Light

After - Dark theme:
Dark

Original prompt

This section details on the original issue you should resolve

<issue_title>Magnifier icon isn't theme aware</issue_title>
<issue_description>The dark theme also uses a black magnifying glass, it should also switch color, like the font next to it

Image</issue_description>

Comments on the Issue (you are @copilot in this section)


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@netlify
Copy link

netlify bot commented Nov 24, 2025

Deploy Preview for easyops-cn-docusaurus-search-local ready!

Name Link
🔨 Latest commit eee6a66
🔍 Latest deploy log https://app.netlify.com/projects/easyops-cn-docusaurus-search-local/deploys/6923b7986f865c000823da9a
😎 Deploy Preview https://deploy-preview-545--easyops-cn-docusaurus-search-local.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai
Copy link

coderabbitai bot commented Nov 24, 2025

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.


Comment @coderabbitai help to get the list of available commands and usage tips.

Copilot AI changed the title [WIP] Fix magnifier icon to be theme aware Fix magnifier icon visibility in dark theme Nov 24, 2025
Copilot AI requested a review from weareoutman November 24, 2025 01:43
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.

Magnifier icon isn't theme aware

2 participants