#49

frontend/src/components/TagSearch.tsx

@@ -93,7 +93,7 @@ const TagSearch: React.FC = () => {
                onFocus={() => setSuggestionsVsbl (true)}
                onBlur={() => setSuggestionsVsbl (false)}
                onKeyDown={handleKeyDown}
-               className="w-full px-3 py-2 border rounded border-gray-600 bg-gray-800 text-white" />
+               className="w-full px-3 py-2 border rounded dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
         <TagSearchBox suggestions={suggestionsVsbl && suggestions.length ? suggestions : [] as Tag[]}
                       activeIndex={activeIndex}
                       onSelect={handleTagSelect} />

frontend/src/components/TagSearchBox.tsx

@@ -3,26 +3,26 @@ import { cn } from '@/lib/utils'
 import type { Tag } from '@/types'
 
 type Props = { suggestions: Tag[]
-               activeIndex: number
-               onSelect:    (tag: Tag) => void }
+	       activeIndex: number
+	       onSelect:    (tag: Tag) => void }
 
 
 export default ({ suggestions, activeIndex, onSelect }: Props) => {
   if (!(suggestions.length))
-    return null
+    return
 
   return (
-      <ul className="absolute left-0 right-0 z-50 w-full bg-gray-800 border border-gray-600 rounded shadow">
-        {suggestions.map ((tag, i) => (
-            <li key={tag.id}
-                className={cn ('px-3 py-2 cursor-pointer', 
-                               (i === activeIndex
-                                ? 'bg-blue-600 text-white'
-                                : 'hover:bg-gray-700'))}
-                onMouseDown={() => onSelect (tag)}
-            >
-              {tag.name}
-              {<span className="ml-2 text-sm text-gray-400">{tag.postCount}</span>}
-            </li>))}
+      <ul className="absolute left-0 right-0 z-50 w-full
+		     bg-gray-100 dark:bg-gray-800 border dark:border-gray-600
+		     rounded shadow">
+	{suggestions.map ((tag, i) => (
+	    <li key={tag.id}
+		className={cn ('px-3 py-2 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-700', 
+			       i === activeIndex && 'bg-gray-300 dark:bg-gray-700')}
+		onMouseDown={() => onSelect (tag)}
+	    >
+	      {tag.name}
+	      {<span className="ml-2 text-sm text-gray-400">{tag.postCount}</span>}
+	    </li>))}
       </ul>)
 }