feat: darkmode draft version

src/routes/users/Search.tsx

@@ -15,10 +15,10 @@ const Search: FC<Props> = ({ input, updateInput }) => {
     updateInput(evt.target.value);
   };
   return (
-    <div className="relative min-h-[56px] px-2 py-3 flex items-center justify-between gap-2 shadow">
+    <div className="relative min-h-[56px] px-2 py-3 flex items-center justify-between gap-2 border-solid border-b dark:border-b-gray-500">
       <div className="flex items-center gap-1">
         <img src={searchIcon} alt="search icon" />
-        <input value={input} placeholder={`${t("action.search")}...`} className="w-full text-sm" onChange={handleInput} />
+        <input value={input} placeholder={`${t("action.search")}...`} className="w-full text-sm bg-transparent" onChange={handleInput} />
       </div>
       <Tooltip tip={t("more")} placement="bottom">
         <Tippy interactive placement="bottom-end" trigger="click" content={<AddEntriesMenu />}>

src/routes/users/index.tsx

@@ -26,7 +26,7 @@ function UsersPage() {
   if (!users) return null;
   return (
     <StyledWrapper>
-      <div className="left">
+      <div className="left dark:!bg-[#1F2A37]">
         <Search input={input} updateInput={updateInput} />
         <div className="list">
           <nav className="nav">
@@ -40,7 +40,7 @@ function UsersPage() {
           </nav>
         </div>
       </div>
-      <div className={`right ${!user_id ? "placeholder" : ""}`}>
+      <div className={`right ${!user_id ? "placeholder" : ""} dark:!bg-[#384250]`}>
         {user_id ? <Profile uid={+user_id} /> : <BlankPlaceholder type="user" />}
       </div>
     </StyledWrapper>