From 0b997418d37b8389c038119d64323294d899b727 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 19 Jan 2024 01:47:23 +0530
Subject: [PATCH] add dark - sidebar

---
 frontend/src/App.tsx                          | 11 ++++-
 frontend/src/Navigation.tsx                   | 42 +++++++++----------
 frontend/src/Setting.tsx                      |  2 +-
 frontend/src/assets/discord.svg               |  2 +-
 frontend/src/assets/documentation.svg         |  2 +-
 frontend/src/assets/dropdown-arrow.svg        |  2 +-
 frontend/src/assets/github.svg                |  2 +-
 frontend/src/assets/info.svg                  |  2 +-
 frontend/src/assets/message.svg               |  2 +-
 frontend/src/assets/settingGear.svg           |  2 +-
 frontend/src/assets/upload.svg                |  2 +-
 .../src/conversation/ConversationTile.tsx     | 10 ++---
 frontend/tailwind.config.cjs                  |  6 ++-
 13 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fdf86dd2..bad19744 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,7 +5,7 @@ import About from './About';
 import PageNotFound from './PageNotFound';
 import { inject } from '@vercel/analytics';
 import { useMediaQuery } from './hooks';
-import { useState } from 'react';
+import { useState,useEffect } from 'react';
 import Setting from './Setting';
 
 inject();
@@ -13,7 +13,14 @@ inject();
 export default function App() {
   const { isMobile } = useMediaQuery();
   const [navOpen, setNavOpen] = useState(!isMobile);
-
+  const selectedTheme = localStorage.getItem('selectedTheme');
+  useEffect(()=>{
+    if (selectedTheme === 'Dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  },[])
   return (
     <div className="min-h-full min-w-full">
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index f08f0bdf..a513b370 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -174,7 +174,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
     <>
       {!navOpen && (
         <button
-          className="duration-25 absolute sticky top-3 left-3 z-20 hidden transition-all md:block"
+          className="duration-25 absolute  top-3 left-3 z-20 hidden transition-all md:block"
           onClick={() => {
             setNavOpen(!navOpen);
           }}
@@ -192,7 +192,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         ref={navRef}
         className={`${
           !navOpen && '-ml-96 md:-ml-[18rem]'
-        } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-2 bg-white transition-all`}
+        } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-2 bg-white dark:bg-chinese-black transition-all dark:text-white`}
       >
         <div
           className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
@@ -228,8 +228,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           }}
           className={({ isActive }) =>
             `${
-              isActive ? 'bg-gray-3000' : ''
-            } group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-gray-3000`
+              isActive ? 'bg-gray-3000 dark:bg-black' : ''
+            } group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray dark:border-purple-taupe dark:text-white hover:dark:bg-black hover:bg-gray-3000`
           }
         >
           <img
@@ -237,11 +237,11 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             alt="new"
             className="opacity-80 group-hover:opacity-100"
           />
-          <p className=" text-sm text-dove-gray group-hover:text-neutral-600 ">
+          <p className=" text-sm text-dove-gray group-hover:text-neutral-600 dark:text-white dark:group-hover:text-white">
             New Chat
           </p>
         </NavLink>
-        <div className="mb-auto h-[56vh] overflow-x-hidden  overflow-y-scroll">
+        <div className="mb-auto h-[56vh] overflow-x-hidden dark:text-white overflow-y-scroll">
           {conversations && (
             <div>
               <p className="ml-6 mt-3 text-sm font-semibold">Chats</p>
@@ -262,11 +262,11 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           )}
         </div>
 
-        <div className="flex h-auto flex-col justify-end">
+        <div className="flex h-auto flex-col justify-end text-eerie-black dark:text-white">
           <div className="flex flex-col-reverse border-b-2">
             <div className="relative my-4 flex gap-2 px-2">
               <div
-                className="flex h-12 w-5/6 cursor-pointer justify-between rounded-3xl border-2 bg-white"
+                className="flex h-12 w-5/6 cursor-pointer justify-between rounded-3xl border-2 bg-white dark:bg-chinese-black"
                 onClick={() => setIsDocsListOpen(!isDocsListOpen)}
               >
                 {selectedDocs && (
@@ -288,7 +288,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 onClick={() => setUploadModalState('ACTIVE')}
               ></img>
               {isDocsListOpen && (
-                <div className="absolute top-12 left-0 right-6 z-10 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg">
+                <div className="absolute top-12 left-0 right-6 z-10 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white dark:bg-chinese-black shadow-lg">
                   {docs ? (
                     docs.map((doc, index) => {
                       if (doc.model === embeddingsName) {
@@ -299,7 +299,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                               dispatch(setSelectedDocs(doc));
                               setIsDocsListOpen(false);
                             }}
-                            className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 hover:bg-gray-100"
+                            className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 dark:border-purple-taupe hover:bg-gray-100 dark:hover:bg-black"
                           >
                             <p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
                               {doc.name} {doc.version}
@@ -334,8 +334,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <NavLink
               to="/settings"
               className={({ isActive }) =>
-                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
-                  isActive ? 'bg-gray-3000' : ''
+                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-black ${
+                  isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
                 }`
               }
             >
@@ -344,7 +344,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 alt="settings"
                 className="ml-2 w-5 opacity-60"
               />
-              <p className="my-auto text-sm text-eerie-black">Settings</p>
+              <p className="my-auto text-sm text-eerie-black  dark:text-white">Settings</p>
             </NavLink>
           </div>
 
@@ -352,36 +352,36 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <NavLink
               to="/about"
               className={({ isActive }) =>
-                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
+                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-black ${
                   isActive ? 'bg-gray-3000' : ''
                 }`
               }
             >
               <img src={Info} alt="info" className="ml-2 w-5" />
-              <p className="my-auto text-sm text-eerie-black">About</p>
+              <p className="my-auto text-sm">About</p>
             </NavLink>
 
             <a
               href="https://docs.docsgpt.co.uk/"
               target="_blank"
               rel="noreferrer"
-              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
+              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-black"
             >
               <img
                 src={Documentation}
                 alt="documentation"
                 className="ml-2 w-5"
               />
-              <p className="my-auto text-sm text-eerie-black">Documentation</p>
+              <p className="my-auto text-sm ">Documentation</p>
             </a>
             <a
               href="https://discord.gg/WHJdfbQDR4"
               target="_blank"
               rel="noreferrer"
-              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
+              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-black"
             >
               <img src={Discord} alt="discord-link" className="ml-2 w-5" />
-              <p className="my-auto text-sm text-eerie-black">
+              <p className="my-auto text-sm">
                 Visit our Discord
               </p>
             </a>
@@ -390,10 +390,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               href="https://github.com/arc53/DocsGPT"
               target="_blank"
               rel="noreferrer"
-              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
+              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-black"
             >
               <img src={Github} alt="github-link" className="ml-2 w-5" />
-              <p className="my-auto text-sm text-eerie-black">
+              <p className="my-auto text-sm">
                 Visit our Github
               </p>
             </a>
diff --git a/frontend/src/Setting.tsx b/frontend/src/Setting.tsx
index c1a2a153..8f760e3f 100644
--- a/frontend/src/Setting.tsx
+++ b/frontend/src/Setting.tsx
@@ -96,7 +96,7 @@ const Setting: React.FC = () => {
   };
 
   return (
-    <div className="p-4 pt-20 md:p-12 ">
+    <div className="p-4 pt-20 md:p-12 wa">
       <p className="text-2xl font-bold text-eerie-black">Settings</p>
       <div className="mt-6 flex flex-row items-center space-x-4 overflow-x-auto md:space-x-8 ">
         <div className="md:hidden">
diff --git a/frontend/src/assets/discord.svg b/frontend/src/assets/discord.svg
index ca54be77..7f2201b4 100644
--- a/frontend/src/assets/discord.svg
+++ b/frontend/src/assets/discord.svg
@@ -1 +1 @@
-<svg fill="none" width="20" height="20" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M18.942 5.556a16.299 16.299 0 0 0-4.126-1.297c-.178.321-.385.754-.529 1.097a15.175 15.175 0 0 0-4.573 0 11.583 11.583 0 0 0-.535-1.097 16.274 16.274 0 0 0-4.129 1.3c-2.611 3.946-3.319 7.794-2.965 11.587a16.494 16.494 0 0 0 5.061 2.593 12.65 12.65 0 0 0 1.084-1.785 10.689 10.689 0 0 1-1.707-.831c.143-.106.283-.217.418-.331 3.291 1.539 6.866 1.539 10.118 0 .137.114.277.225.418.331-.541.326-1.114.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595c.415-4.396-.709-8.209-2.973-11.589zM8.678 14.813c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c.001 1.123-.793 2.045-1.798 2.045zm6.644 0c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c0 1.123-.793 2.045-1.798 2.045z" fill="black" fill-opacity="0.54"/></svg>
\ No newline at end of file
+<svg fill="none" width="20" height="20" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M18.942 5.556a16.299 16.299 0 0 0-4.126-1.297c-.178.321-.385.754-.529 1.097a15.175 15.175 0 0 0-4.573 0 11.583 11.583 0 0 0-.535-1.097 16.274 16.274 0 0 0-4.129 1.3c-2.611 3.946-3.319 7.794-2.965 11.587a16.494 16.494 0 0 0 5.061 2.593 12.65 12.65 0 0 0 1.084-1.785 10.689 10.689 0 0 1-1.707-.831c.143-.106.283-.217.418-.331 3.291 1.539 6.866 1.539 10.118 0 .137.114.277.225.418.331-.541.326-1.114.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595c.415-4.396-.709-8.209-2.973-11.589zM8.678 14.813c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c.001 1.123-.793 2.045-1.798 2.045zm6.644 0c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c0 1.123-.793 2.045-1.798 2.045z" fill="gray" fill-opacity="0.85"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/documentation.svg b/frontend/src/assets/documentation.svg
index 344fb6cc..e7c56956 100644
--- a/frontend/src/assets/documentation.svg
+++ b/frontend/src/assets/documentation.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
-    <g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="black" fill-opacity="0.5" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
+    <g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="gray" fill-opacity="0.85" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
 </svg>
diff --git a/frontend/src/assets/dropdown-arrow.svg b/frontend/src/assets/dropdown-arrow.svg
index 6d0c9b87..fb88e637 100644
--- a/frontend/src/assets/dropdown-arrow.svg
+++ b/frontend/src/assets/dropdown-arrow.svg
@@ -1,3 +1,3 @@
 <svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0L5 5L10 0H0Z" fill="black" fill-opacity="0.54"/>
+<path d="M0 0L5 5L10 0H0Z" fill="gray" fill-opacity="0.80"/>
 </svg>
diff --git a/frontend/src/assets/github.svg b/frontend/src/assets/github.svg
index 40fc238c..b327f7b3 100644
--- a/frontend/src/assets/github.svg
+++ b/frontend/src/assets/github.svg
@@ -1,5 +1,5 @@
 <svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <title>github</title>
   <rect width="24" height="24" fill="none"/>
-  <path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z" fill="black" fill-opacity="0.54"/>
+  <path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z" fill="gray" fill-opacity="0.85"/>
 </svg>
diff --git a/frontend/src/assets/info.svg b/frontend/src/assets/info.svg
index 6f3d2446..469cdacd 100644
--- a/frontend/src/assets/info.svg
+++ b/frontend/src/assets/info.svg
@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z" fill="black" fill-opacity="0.54"/>
+<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z" fill="gray" fill-opacity="0.85"/>
 </svg>
diff --git a/frontend/src/assets/message.svg b/frontend/src/assets/message.svg
index 927beaf2..228598dd 100644
--- a/frontend/src/assets/message.svg
+++ b/frontend/src/assets/message.svg
@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H4L2 16V2H18V14Z" fill="black" fill-opacity="0.54"/>
+<path d="M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H4L2 16V2H18V14Z" fill="gray" fill-opacity="0.80"/>
 </svg>
diff --git a/frontend/src/assets/settingGear.svg b/frontend/src/assets/settingGear.svg
index abbde123..51b28e47 100644
--- a/frontend/src/assets/settingGear.svg
+++ b/frontend/src/assets/settingGear.svg
@@ -1,3 +1,3 @@
 <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.5024 14.6918C9.50037 14.6918 8.5394 14.3047 7.83087 13.6155C7.12234 12.9263 6.72429 11.9915 6.72429 11.0168C6.72429 10.0422 7.12234 9.10743 7.83087 8.41823C8.5394 7.72903 9.50037 7.34185 10.5024 7.34185C11.5044 7.34185 12.4654 7.72903 13.1739 8.41823C13.8824 9.10743 14.2805 10.0422 14.2805 11.0168C14.2805 11.9915 13.8824 12.9263 13.1739 13.6155C12.4654 14.3047 11.5044 14.6918 10.5024 14.6918ZM18.5227 12.0353C18.5659 11.6993 18.5983 11.3633 18.5983 11.0168C18.5983 10.6703 18.5659 10.3238 18.5227 9.96685L20.8004 8.25535C21.0055 8.09785 21.0595 7.81435 20.9299 7.58335L18.771 3.95035C18.6415 3.71935 18.35 3.62485 18.1125 3.71935L15.4247 4.76935C14.8634 4.35985 14.2805 4.00285 13.6004 3.74035L13.201 0.957848C13.1791 0.834176 13.1129 0.722046 13.0141 0.641327C12.9153 0.560607 12.7903 0.51651 12.6613 0.516848H8.34347C8.07361 0.516848 7.84692 0.705848 7.80374 0.957848L7.40435 3.74035C6.72429 4.00285 6.14138 4.35985 5.58007 4.76935L2.89222 3.71935C2.65474 3.62485 2.36329 3.71935 2.23375 3.95035L0.0748404 7.58335C-0.0654889 7.81435 -0.000721403 8.09785 0.204375 8.25535L2.48203 9.96685C2.43885 10.3238 2.40647 10.6703 2.40647 11.0168C2.40647 11.3633 2.43885 11.6993 2.48203 12.0353L0.204375 13.7783C-0.000721403 13.9358 -0.0654889 14.2193 0.0748404 14.4503L2.23375 18.0833C2.36329 18.3143 2.65474 18.3983 2.89222 18.3143L5.58007 17.2538C6.14138 17.6738 6.72429 18.0308 7.40435 18.2933L7.80374 21.0758C7.84692 21.3278 8.07361 21.5168 8.34347 21.5168H12.6613C12.9312 21.5168 13.1578 21.3278 13.201 21.0758L13.6004 18.2933C14.2805 18.0203 14.8634 17.6738 15.4247 17.2538L18.1125 18.3143C18.35 18.3983 18.6415 18.3143 18.771 18.0833L20.9299 14.4503C21.0595 14.2193 21.0055 13.9358 20.8004 13.7783L18.5227 12.0353Z" fill="black"/>
+<path d="M10.5024 14.6918C9.50037 14.6918 8.5394 14.3047 7.83087 13.6155C7.12234 12.9263 6.72429 11.9915 6.72429 11.0168C6.72429 10.0422 7.12234 9.10743 7.83087 8.41823C8.5394 7.72903 9.50037 7.34185 10.5024 7.34185C11.5044 7.34185 12.4654 7.72903 13.1739 8.41823C13.8824 9.10743 14.2805 10.0422 14.2805 11.0168C14.2805 11.9915 13.8824 12.9263 13.1739 13.6155C12.4654 14.3047 11.5044 14.6918 10.5024 14.6918ZM18.5227 12.0353C18.5659 11.6993 18.5983 11.3633 18.5983 11.0168C18.5983 10.6703 18.5659 10.3238 18.5227 9.96685L20.8004 8.25535C21.0055 8.09785 21.0595 7.81435 20.9299 7.58335L18.771 3.95035C18.6415 3.71935 18.35 3.62485 18.1125 3.71935L15.4247 4.76935C14.8634 4.35985 14.2805 4.00285 13.6004 3.74035L13.201 0.957848C13.1791 0.834176 13.1129 0.722046 13.0141 0.641327C12.9153 0.560607 12.7903 0.51651 12.6613 0.516848H8.34347C8.07361 0.516848 7.84692 0.705848 7.80374 0.957848L7.40435 3.74035C6.72429 4.00285 6.14138 4.35985 5.58007 4.76935L2.89222 3.71935C2.65474 3.62485 2.36329 3.71935 2.23375 3.95035L0.0748404 7.58335C-0.0654889 7.81435 -0.000721403 8.09785 0.204375 8.25535L2.48203 9.96685C2.43885 10.3238 2.40647 10.6703 2.40647 11.0168C2.40647 11.3633 2.43885 11.6993 2.48203 12.0353L0.204375 13.7783C-0.000721403 13.9358 -0.0654889 14.2193 0.0748404 14.4503L2.23375 18.0833C2.36329 18.3143 2.65474 18.3983 2.89222 18.3143L5.58007 17.2538C6.14138 17.6738 6.72429 18.0308 7.40435 18.2933L7.80374 21.0758C7.84692 21.3278 8.07361 21.5168 8.34347 21.5168H12.6613C12.9312 21.5168 13.1578 21.3278 13.201 21.0758L13.6004 18.2933C14.2805 18.0203 14.8634 17.6738 15.4247 17.2538L18.1125 18.3143C18.35 18.3983 18.6415 18.3143 18.771 18.0833L20.9299 14.4503C21.0595 14.2193 21.0055 13.9358 20.8004 13.7783L18.5227 12.0353Z" fill="gray" fill-opacity="0.95"/>
 </svg>
diff --git a/frontend/src/assets/upload.svg b/frontend/src/assets/upload.svg
index 6d7be211..6ec01239 100644
--- a/frontend/src/assets/upload.svg
+++ b/frontend/src/assets/upload.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.35 6.04C18.67 2.59 15.64 0 12 0C9.11 0 6.6 1.64 5.35 4.04C2.34 4.36 0 6.91 0 10C0 13.31 2.69 16 6 16H19C21.76 16 24 13.76 24 11C24 8.36 21.95 6.22 19.35 6.04ZM14 9V13H10V9H7L12 4L17 9H14Z" fill="black" fill-opacity="0.54"/>
+<path d="M19.35 6.04C18.67 2.59 15.64 0 12 0C9.11 0 6.6 1.64 5.35 4.04C2.34 4.36 0 6.91 0 10C0 13.31 2.69 16 6 16H19C21.76 16 24 13.76 24 11C24 8.36 21.95 6.22 19.35 6.04ZM14 9V13H10V9H7L12 4L17 9H14Z" fill="gray" fill-opacity="0.85"/>
 </svg>
diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index 8fd6b261..9accf0cb 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -67,7 +67,7 @@ export default function ConversationTile({
       onClick={() => {
         selectConversation(conversation.id);
       }}
-      className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 ${
+      className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-black ${
         conversationId === conversation.id ? 'bg-gray-100' : ''
       }`}
     >
@@ -76,7 +76,7 @@ export default function ConversationTile({
           conversationId === conversation.id ? 'w-[75%]' : 'w-[95%]'
         } gap-4`}
       >
-        <img src={Message} className="ml-4 w-5"></img>
+        <img src={Message} className="ml-4 w-5 dark:text-white"/>
         {isEdit ? (
           <input
             autoFocus
@@ -86,17 +86,17 @@ export default function ConversationTile({
             onChange={(e) => setConversationsName(e.target.value)}
           />
         ) : (
-          <p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black">
+          <p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black dark:text-white">
             {conversationName}
           </p>
         )}
       </div>
       {conversationId === conversation.id && (
-        <div className="flex">
+        <div className="flex text-white dark:text-[#949494]">
           <img
             src={isEdit ? CheckMark2 : Edit}
             alt="Edit"
-            className="mr-2 h-4 w-4 cursor-pointer hover:opacity-50"
+            className="mr-2 h-4 w-4 cursor-pointer hover:opacity-50 text-white"
             id={`img-${conversation.id}`}
             onClick={(event) => {
               event.stopPropagation();
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 504b7e41..dbdd1593 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -32,10 +32,14 @@ module.exports = {
         'green-2000': '#0FFF50',
         'light-gray': '#edeef0',
         'white-3000': '#ffffff',
+        'just-black':"#00000",
+        'purple-taupe':'#464152',
         'dove-gray': '#6c6c6c',
         silver: '#c4c4c4',
         'rainy-gray': '#a4a4a4',
-        'dark-bg':'#222327'
+        'dark-bg':'#222327',
+        'chinese-black':'#161616',
+        'dark-charcoal':'#2F3036'
       },
     },
   },