From ed42af5b3b071190e58df9c833f2eb43809559b2 Mon Sep 17 00:00:00 2001
From: Joe Mooring <joe.mooring@veriphor.com>
Date: Thu, 13 Feb 2025 11:09:54 -0800
Subject: [PATCH] theme: Adjust search field and search activation

- Activate search with / regardless of OS
- Adjust colors for "standalone" search button

Closes #2893
---
 assets/js/alpinejs/data/search.js           |  2 +-
 layouts/partials/layouts/search/button.html | 21 +++++++++++----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/assets/js/alpinejs/data/search.js b/assets/js/alpinejs/data/search.js
index 9be42617e..d2cacd6ef 100644
--- a/assets/js/alpinejs/data/search.js
+++ b/assets/js/alpinejs/data/search.js
@@ -102,7 +102,7 @@ export const search = (Alpine, cfg) => ({
 		['@search-toggle.window']() {
 			this.toggleOpen();
 		},
-		['@keydown.meta.k.window.prevent']() {
+		['@keydown.slash.window.prevent']() {
 			this.toggleOpen();
 		},
 	},
diff --git a/layouts/partials/layouts/search/button.html b/layouts/partials/layouts/search/button.html
index 228f48ad9..dd4887be4 100644
--- a/layouts/partials/layouts/search/button.html
+++ b/layouts/partials/layouts/search/button.html
@@ -1,19 +1,20 @@
+{{ $textColor := "text-gray-300" }}
+{{ $fillColor := "fill-slate-400 dark:fill-slate-500" }}
+{{ if .standalone }}
+  {{ $textColor = "text-gray-800 dark:text-gray-300 " }}
+  {{ $fillColor = "fill-slate-500 dark:fill-slate-400" }}
+{{ end }}
+
 <button
   {{ if .standalone }}
     x-data @click="$dispatch('search-toggle')"
   {{ end }}
   type="button"
-  class="grid cursor-pointer w-full text-gray-300 lg:w-56 grid-cols-[auto_1fr_auto] items-center rounded-md px-2 sm:px-4 py-2 text-left text-xs/6 lg:text-sm/6 outline-0 sm:outline-1 -outline-offset-1 outline-gray-600">
+  class="{{ $textColor }} grid cursor-pointer w-full lg:w-56 grid-cols-[auto_1fr_auto] items-center rounded-md px-2 sm:px-4 py-2 text-left text-xs/6 lg:text-sm/6 outline-0 sm:outline-1 -outline-offset-1 outline-gray-600">
   <svg
-    class="pointer-events-none -ml-0.5 mr-2 size-5 sm:size-4 fill-slate-400 dark:fill-slate-500">
+    class="{{ $fillColor}} pointer-events-none -ml-0.5 mr-2 size-5 sm:size-4">
     <use href="#icon--search"></use>
   </svg>
-  <span class="hidden lg:inline">Search docs</span
-  ><kbd
-    class="hidden font-sans text-xs/4 text-gray-400 dark:text-gray-400 sm:[.os-macos_&amp;]:block"
-    ><span class="text-gray-400/70 ">⌘</span>K</kbd
-  ><kbd
-    class="hidden font-sans text-xs/4 text-gray-400 sm:not-[.os-macos_&amp;]:block dark:text-gray-400"
-    ><span class="text-gray-400/70">Ctrl</span>&nbsp;K</kbd
-  >
+  <span class="hidden lg:inline">Search docs</span>
+  <span class="hidden lg:inline">/</span>
 </button>