Add DocSearch button key theme styles for light and dark modes

[Deven14125]

Description

This PR introduces theme-aware styling for the DocSearch button key to ensure consistent appearance across light and dark modes.

Changes Made

• Added Tailwind utility styles for .DocSearch-Button-Key
• Implemented dark mode styles using dark: utilities
• Improved contrast and accessibility in dark mode

Before

The DocSearch button key did not adapt correctly to theme changes, resulting in inconsistent UI appearance.

After

The component now properly responds to theme changes, ensuring a consistent and polished user experience.

Checklist

• Code follows project style
• Dark mode tested
• No unused styles
• PR reviewed locally

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
webpack-js-org	Ready	Preview, Comment	Mar 20, 2026 4:19pm

[Copilot]

Pull request overview

Adds theme-aware styling for the DocSearch “key” UI so it looks consistent in light/dark modes.

Changes:

• Introduces base styles for .DocSearch-Button-Key (text/background/border).
• Adds a dark-theme override for .DocSearch-Button-Key when [data-theme="dark"] is active.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

bg-olive-700 doesn’t appear to be a defined Tailwind color in this repo (tailwind.config.js only defines blue/gray/white/black/transparent). In dark mode this means the background utility won’t be generated, so the key can end up with text-gray-100 on the inherited light bg-gray-100 (very low contrast). Use an existing color token (e.g. one of the configured grays/blues) or extend the Tailwind theme to include olive shades before using bg-olive-700.

Suggested change

	@apply text-gray-100! bg-olive-700! border-gray-500!;
	@apply text-gray-100! bg-gray-700! border-gray-500!;

[Copilot]

This file already uses the custom dark variant via dark: utilities (e.g. .DocSearch-Button-Placeholder uses lg:dark:text-gray-300!), but here dark mode is handled with a separate [data-theme="dark"] .DocSearch-Button-Key selector. Consider folding the dark styles into the base rule with dark: utilities to keep the pattern consistent and reduce duplicated selectors.

Suggested change

	@apply text-gray-700! bg-gray-100! border-gray-300!;
	}
	[data-theme="dark"] .DocSearch-Button-Key {
	@apply text-gray-100! bg-olive-700! border-gray-500!;
	}
	@apply text-gray-700! bg-gray-100! border-gray-300! dark:text-gray-100! dark:bg-olive-700! dark:border-gray-500!;
	}

[alexander-akait]

Fix this problems and never ignore the PR template

[Deven14125]

I Fixed the Problem , now you can review it.

[alexander-akait]

Black on black, looks bad, to see - go to https://webpack-js-org-git-fork-deven14125-fix-search-icon-color-openjs.vercel.app/, enabled dark mode and click on search and you will see black on black

[Deven14125]

Thanks for pointing this out!

Previously, the DocSearch key wasn’t adapting well to dark mode, so I adjusted the background styling. I’ve now updated it to use dark:bg-blue-400, which provides better contrast and improves visibility against the dark UI.

Please take another look and let me know if this works better or if any further adjustments are needed.