feat: darkmode draft version

src/routes/home/Menu.tsx

@@ -2,36 +2,19 @@ import { FC } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import Tooltip from "../../common/component/Tooltip";
 import settingIcon from "../../assets/icons/setting.svg?url";
-import styled from "styled-components";
-const StyledMenus = styled.ul`
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  padding: 8px 12px;
-  .menu {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    gap: 10px;
-  }
-`;
 type Props = {};
 const Menu: FC<Props> = () => {
   const { pathname } = useLocation();
   return (
-    <StyledMenus>
-      <li className="menu link_navs">
+    <ul className="flex flex-col absolute left-0 bottom-0 w-full px-3 py-2">
+      <li className="cursor-pointer flex items-center p-2.5 gap-2.5 link_navs">
         <NavLink className="link" to={`/setting?f=${pathname}`}>
           <Tooltip placement="right" tip="Settings">
             <img src={settingIcon} alt="setting icon" className="w-6 h-6 max-w-[unset]" />
           </Tooltip>
         </NavLink>
       </li>
-    </StyledMenus>
+    </ul>
   );
 };
 export default Menu;

src/routes/home/index.tsx

@@ -57,7 +57,7 @@ function HomePage() {
     <>
       <Manifest />
       {!guest && <Notification />}
-      <StyledWrapper className={guest ? "guest" : ""}>
+      <StyledWrapper className={`dark:!bg-[#121926] ${guest ? "guest" : ""}`}>
         {!guest && (
           <div className={`col left`}>
             {loginUid && <User uid={loginUid} />}