chore: fix search result color

assets/css/global.css

@@ -95,3 +95,9 @@ input[type="search"]::-ms-clear {
 .navbar-group:first-of-type {
   margin-top: 0.2rem !important;
 }
+
+#search-page-results {
+  mark:where(.dark, .dark *) {
+    color: var(--color-blue-400);
+  }
+}

assets/css/utilities.css

@@ -253,3 +253,7 @@
 @utility chip {
   @apply border-divider-light dark:border-divider-dark inline-flex items-center gap-1 rounded-full border bg-gray-100 px-2 text-sm text-gray-800 select-none dark:bg-gray-700 dark:text-gray-200;
 }
+
+@utility pagination-link {
+  @apply flex items-center justify-center rounded-sm p-2;
+}

layouts/_default/search.html

@@ -133,14 +133,14 @@ <h1 class="py-4">{{ .Title }}</h1>
         }
 
         // Generate the search results HTML
-        let resultsHTML = `<div class="text-gray-200 dark:text-gray-500 p-2">${resultsLength} results</div>`;
+        let resultsHTML = `<div class="text-gray-400 dark:text-gray-500 p-2">${resultsLength} results</div>`;
 
         // Map results to HTML
         resultsHTML += results
           .map((item) => {
             return `<div class="p-4">
          <div class="flex flex-col">
-           <span class="text-gray-200 dark:texty-gray-dark text-sm">${item.meta.breadcrumbs}</span>
+           <span class="text-gray-400 dark:texty-gray-dark text-sm">${item.meta.breadcrumbs}</span>
            <a class="link" href="${item.url}" data-query="${query}" data-index="${item.index}">${item.meta.title}</a>
            <p class="text-black dark:text-white overflow-hidden">…${item.excerpt}…</p>
          </div>
@@ -153,12 +153,12 @@ <h1 class="py-4">{{ .Title }}</h1>
           resultsHTML += `<ul class="flex flex-wrap gap-1 pt-4 pb-8 justify-center text-sm">`;
           for (let i = 1; i <= resultsLength / 10; i++) {
             if (i == currentPage) {
-              resultsHTML += `<li class="text-center text-white">
-                <a href="/search/?q=${query}&page=${i}" class="block h-6 w-6 rounded-sm bg-blue-light dark:bg-blue-dark">${i}</a>
+              resultsHTML += `<li class="flex items-center justify-center">
+                 <a href="/search/?q=${query}&page=${i}" class="pagination-link bg-gray-200 dark:bg-gray-800 dark:text-gray-200">${i}</a>
               </li>`;
             } else {
-              resultsHTML += `<li class="text-center text-gray-200 dark:text-gray-500">
-                <a href="/search/?q=${query}&page=${i}" class="block h-6 w-6 rounded-sm bg-gray-200 dark:bg-gray-800">${i}</a>
+              resultsHTML += `<li class="flex items-center justify-center">
+                <a href="/search/?q=${query}&page=${i}" class="pagination-link bg-gray-100 dark:bg-gray-900 dark:text-gray-400">${i}</a>
               </li>`;
             }
           }

layouts/partials/search-bar.html

@@ -104,7 +104,7 @@
             searchBarResults.classList.add("hidden");
           }
 
-          let resultsHTML = `<div class="p-2 text-gray-200 dark:text-gray-500">${resultsLength} results</div>`;
+          let resultsHTML = `<div class="p-2 text-gray-400 dark:text-gray-500">${resultsLength} results</div>`;
           resultsHTML += results
             .map((item) => {
               return `<div class="p-2">