From 559ec50c92c1a357a3d1794202a268d953dc75e4 Mon Sep 17 00:00:00 2001
From: LASER-Yi <liangyi0007@gmail.com>
Date: Tue, 11 Oct 2022 23:33:38 +0800
Subject: [PATCH] Fix display issue in the search bar

---
 frontend/src/components/Search.tsx | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
index ec1a23574..cf02d7682 100644
--- a/frontend/src/components/Search.tsx
+++ b/frontend/src/components/Search.tsx
@@ -2,7 +2,12 @@ import { useServerSearch } from "@/apis/hooks";
 import { useDebouncedValue } from "@/utilities";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Anchor, Autocomplete, SelectItemProps } from "@mantine/core";
+import {
+  Anchor,
+  Autocomplete,
+  createStyles,
+  SelectItemProps,
+} from "@mantine/core";
 import { forwardRef, FunctionComponent, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 
@@ -36,12 +41,31 @@ function useSearch(query: string) {
   );
 }
 
+const useStyles = createStyles((theme) => {
+  return {
+    result: {
+      color:
+        theme.colorScheme === "light"
+          ? theme.colors.dark[8]
+          : theme.colors.gray[1],
+    },
+  };
+});
+
 type ResultCompProps = SelectItemProps & SearchResultItem;
 
 const ResultComponent = forwardRef<HTMLDivElement, ResultCompProps>(
   ({ link, value }, ref) => {
+    const styles = useStyles();
+
     return (
-      <Anchor component={Link} to={link} underline={false} color="gray" p="sm">
+      <Anchor
+        component={Link}
+        to={link}
+        underline={false}
+        className={styles.classes.result}
+        p="sm"
+      >
         {value}
       </Anchor>
     );