chore: update dark mode styles

web/src/components/MemoResourceListView.tsx

@@ -43,7 +43,7 @@ const MemoResourceListView: React.FC<Props> = (props: Props) => {
     <>
       {imageResourceList.length > 0 &&
         (imageResourceList.length === 1 ? (
-          <div className="mt-2 max-w-[90%] max-h-64 flex justify-center items-center border rounded overflow-hidden hide-scrollbar hover:shadow-md">
+          <div className="mt-2 max-w-[90%] max-h-64 flex justify-center items-center border dark:border-zinc-800 rounded overflow-hidden hide-scrollbar hover:shadow-md">
             <img
               className="cursor-pointer min-h-full w-auto min-w-full object-cover"
               src={getResourceUrl(imageResourceList[0])}

web/src/components/Settings/AccessTokenSection.tsx

@@ -60,11 +60,11 @@ const AccessTokenSection = () => {
         <div className="w-full">
           <div className="sm:flex sm:items-center sm:justify-between">
             <div className="sm:flex-auto space-y-1">
-              <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-400">
+              <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-300">
                 Access Tokens
                 <LearnMore className="ml-2" url="https://usememos.com/docs/access-tokens" />
               </p>
-              <p className="text-sm text-gray-700 dark:text-gray-500">A list of all access tokens for your account.</p>
+              <p className="text-sm text-gray-700 dark:text-gray-400">A list of all access tokens for your account.</p>
             </div>
             <div className="mt-4 sm:mt-0">
               <Button

web/src/components/Settings/MemberSection.tsx

@@ -134,7 +134,7 @@ const PreferencesSection = () => {
       </div>
       <div className="w-full overflow-x-auto">
         <div className="inline-block min-w-full align-middle">
-          <table className="min-w-full divide-y divide-gray-300">
+          <table className="min-w-full divide-y divide-gray-300 dark:divide-gray-400">
             <thead>
               <tr className="text-sm font-semibold text-left text-gray-900 dark:text-gray-300">
                 <th scope="col" className="py-2 pl-4 pr-3">
@@ -152,7 +152,7 @@ const PreferencesSection = () => {
                 <th scope="col" className="relative py-2 pl-3 pr-4"></th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-200">
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-500">
               {userList.map((user) => (
                 <tr key={user.id}>
                   <td className="whitespace-nowrap py-2 pl-4 pr-3 text-sm text-gray-900 dark:text-gray-300">{user.id}</td>

web/src/pages/MemoDetail.tsx

@@ -114,10 +114,10 @@ const MemoDetail = () => {
               </div>
               <div className="flex flex-row sm:justify-end items-center">
                 <IconButton size="sm" onClick={handleCopyLinkBtnClick}>
-                  <Icon.Link className="w-4 h-auto text-gray-600" />
+                  <Icon.Link className="w-4 h-auto text-gray-600 dark:text-gray-400" />
                 </IconButton>
                 <IconButton size="sm" onClick={() => showShareMemoDialog(memo)}>
-                  <Icon.Share className="w-4 h-auto text-gray-600" />
+                  <Icon.Share className="w-4 h-auto text-gray-600 dark:text-gray-400" />
                 </IconButton>
               </div>
             </div>