feat: dark mode for main pages (#637)

* feat: update dark mode styles for auth and explore page

* feat: dark mode for home page

web/src/components/Memo.tsx

@@ -149,9 +149,7 @@ const Memo: React.FC<Props> = (props: Props) => {
   const handleMemoContentDoubleClick = (e: React.MouseEvent) => {
     const targetEl = e.target as HTMLElement;
 
-    if (targetEl.className === "memo-link-text") {
-      return;
-    } else if (targetEl.className === "tag-span") {
+    if (targetEl.className === "tag-span") {
       return;
     } else if (targetEl.classList.contains("todo-block")) {
       return;

web/src/components/UserBanner.tsx

@@ -74,20 +74,20 @@ const UserBanner = () => {
           {!isVisitorMode && user?.role === "HOST" ? <span className="tag">MOD</span> : null}
         </div>
         <Dropdown
-          trigger={<Icon.MoreHorizontal className="ml-2 w-5 h-auto cursor-pointer" />}
+          trigger={<Icon.MoreHorizontal className="ml-2 w-5 h-auto cursor-pointer dark:text-gray-200" />}
           actionsClassName="min-w-36"
           actions={
             <>
               {!userService.isVisitorMode() && (
                 <>
                   <button
-                    className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
+                    className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-zinc-800"
                     onClick={handleResourcesBtnClick}
                   >
                     <span className="mr-1">🌄</span> {t("sidebar.resources")}
                   </button>
                   <button
-                    className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
+                    className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-zinc-800"
                     onClick={handleArchivedBtnClick}
                   >
                     <span className="mr-1">🗂</span> {t("sidebar.archived")}
@@ -95,14 +95,14 @@ const UserBanner = () => {
                 </>
               )}
               <button
-                className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
+                className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-zinc-800"
                 onClick={handleAboutBtnClick}
               >
                 <span className="mr-1">🤠</span> {t("common.about")}
               </button>
               {!userService.isVisitorMode() && (
                 <button
-                  className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
+                  className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-zinc-800"
                   onClick={handleSignOutBtnClick}
                 >
                   <span className="mr-1">👋</span> {t("common.sign-out")}

web/src/components/common/Dropdown.tsx

@@ -37,12 +37,12 @@ const Dropdown: React.FC<Props> = (props: Props) => {
       {trigger ? (
         trigger
       ) : (
-        <button className="flex flex-row justify-center items-center border p-1 rounded shadow text-gray-600 cursor-pointer hover:opacity-80">
+        <button className="flex flex-row justify-center items-center border p-1 rounded shadow text-gray-600 dark:text-gray-200 cursor-pointer hover:opacity-80">
           <Icon.MoreHorizontal className="w-4 h-auto" />
         </button>
       )}
       <div
-        className={`w-auto mt-1 absolute top-full right-0 flex flex-col justify-start items-start bg-white z-1 border p-1 rounded-md shadow ${
+        className={`w-auto mt-1 absolute top-full right-0 flex flex-col justify-start items-start bg-white dark:bg-zinc-700 z-1 p-1 rounded-md shadow ${
           actionsClassName ?? ""
         } ${dropdownStatus ? "" : "!hidden"}`}
       >

web/src/css/tailwind.css

@@ -18,19 +18,19 @@
   .btn-normal {
     @apply select-none inline-flex border cursor-pointer px-3 text-sm leading-8 rounded-md hover:opacity-80 hover:shadow;
   }
-  
+
   .btn-primary {
-    @apply btn-normal border-transparent bg-green-600 text-white;
+    @apply btn-normal border-transparent bg-green-600 text-white dark:text-gray-200;
   }
-  
+
   .btn-danger {
     @apply btn-normal border-red-600 bg-red-50 text-red-600;
   }
-  
+
   .btn-text {
-    @apply btn-normal text-gray-600 border-none hover:shadow-none;
+    @apply btn-normal text-gray-600 border-none dark:text-gray-200 hover:shadow-none;
   }
-  
+
   .input-text {
     @apply w-full px-3 py-2 leading-6 text-sm border rounded;
   }

web/src/less/auth.less

@@ -1,5 +1,5 @@
 .page-wrapper.auth {
-  @apply flex flex-row justify-center items-center w-full h-screen bg-white dark:bg-zinc-900;
+  @apply flex flex-row justify-center items-center w-full h-screen bg-white dark:bg-zinc-800;
 
   > .page-container {
     @apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center;
@@ -18,12 +18,12 @@
           }
 
           > .logo-text {
-            @apply text-4xl tracking-wide text-black dark:text-white;
+            @apply text-6xl tracking-wide text-black dark:text-gray-200;
           }
         }
 
         > .slogan-text {
-          @apply text-sm text-gray-700 dark:text-gray-200;
+          @apply text-sm text-gray-700 dark:text-gray-300;
         }
       }
 
@@ -45,7 +45,7 @@
             @apply py-2;
 
             > input {
-              @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400 hover:opacity-80 dark:bg-zinc-800 dark:text-white;
+              @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400 hover:opacity-80 dark:bg-zinc-800 dark:text-gray-200 dark:border-gray-600;
             }
           }
         }
@@ -58,20 +58,8 @@
       > .action-btns-container {
         @apply flex flex-row justify-end items-center w-full mt-2;
 
-        > .btn {
-          @apply flex flex-row justify-center items-center px-1 py-2 text-sm rounded hover:opacity-80;
-
-          &.signup-btn {
-            @apply px-3 dark:text-white dark:opacity-70;
-          }
-
-          &.signin-btn {
-            @apply bg-green-600 text-white px-3 shadow;
-          }
-
-          &.requesting {
-            @apply cursor-wait opacity-80;
-          }
+        > .requesting {
+          @apply cursor-wait opacity-80;
         }
       }
 
@@ -83,25 +71,5 @@
         }
       }
     }
-
-    > .footer-container {
-      @apply w-full flex flex-col justify-start items-center;
-
-      > .language-container {
-        @apply mt-2 w-full flex flex-row justify-center items-center text-sm text-gray-400;
-
-        > .locale-item {
-          @apply px-2 cursor-pointer;
-
-          &.active {
-            @apply text-blue-600 font-bold;
-          }
-        }
-
-        > .split-line {
-          @apply font-mono text-gray-400;
-        }
-      }
-    }
   }
 }

web/src/less/common/selector.less

@@ -2,15 +2,15 @@
   @apply flex flex-col justify-start items-start relative h-8;
 
   > .current-value-container {
-    @apply flex flex-row justify-between items-center w-full h-full rounded px-2 pr-1 bg-white border cursor-pointer select-none;
+    @apply flex flex-row justify-between items-center w-full h-full rounded px-2 pr-1 bg-white dark:bg-zinc-700 dark:border-zinc-600 border cursor-pointer select-none;
 
     &:hover,
     &.active {
-      @apply bg-gray-100;
+      @apply bg-gray-100 dark:bg-zinc-700;
     }
 
     > .value-text {
-      @apply text-sm mr-0 truncate;
+      @apply text-sm mr-0 truncate dark:text-gray-300;
       width: calc(100% - 20px);
     }
 
@@ -18,19 +18,19 @@
       @apply flex flex-row justify-center items-center w-4 shrink-0;
 
       > .icon-img {
-        @apply w-4 h-auto opacity-40;
+        @apply w-4 h-auto opacity-40 dark:text-gray-300;
       }
     }
   }
 
   > .items-wrapper {
-    @apply flex flex-col justify-start items-start absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white rounded-md overflow-y-auto z-1 hide-scrollbar;
+    @apply flex flex-col justify-start items-start absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white dark:bg-zinc-700 dark:border-zinc-600 rounded-md overflow-y-auto z-1 hide-scrollbar;
     min-width: calc(100% + 16px);
     max-height: 256px;
     box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
 
     > .item-container {
-      @apply flex flex-col justify-start items-start w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100;
+      @apply flex flex-col justify-start items-start w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-600;
 
       &.selected {
         @apply text-green-600;

web/src/less/explore.less

@@ -1,5 +1,5 @@
 .page-wrapper.explore {
-  @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-900;
+  @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-800;
   background-color: #f6f5f4;
 
   > .page-container {
@@ -16,17 +16,13 @@
         }
 
         > .title-text {
-          @apply text-xl sm:text-3xl font-mono text-gray-700 dark:text-gray-300;
+          @apply text-xl sm:text-4xl font-mono text-gray-700 dark:text-gray-200;
         }
       }
 
       > .action-button-container {
-        > .btn {
-          @apply block text-gray-600 dark:text-gray-300 font-mono text-base py-1 border px-3 leading-8 rounded-xl hover:opacity-80 hover:underline;
-
-          > .icon {
-            @apply text-lg;
-          }
+        > .link-btn {
+          @apply block text-gray-600 dark:text-gray-200 dark:border-gray-600 font-mono text-base py-1 border px-3 leading-8 rounded-xl hover:opacity-80;
         }
       }
     }
@@ -35,7 +31,7 @@
       @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6;
 
       > .memo-container {
-        @apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700;
+        @apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-600;
 
         > .memo-header {
           @apply mb-2 w-full flex flex-row justify-start items-center text-sm text-gray-400;
@@ -44,14 +40,6 @@
             @apply ml-2 hover:text-green-600 hover:underline;
           }
         }
-
-        > .memo-content {
-          @apply cursor-default dark:text-zinc-50;
-
-          > * {
-            @apply cursor-default;
-          }
-        }
       }
     }
   }

web/src/less/home.less

@@ -1,5 +1,5 @@
 .page-wrapper.home {
-  @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden;
+  @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-800;
   background-color: #f6f5f4;
 
   > .banner-wrapper {
@@ -17,7 +17,7 @@
       @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6;
 
       > .memos-editor-wrapper {
-        @apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-10;
+        @apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-10 dark:bg-zinc-800;
         background-color: #f6f5f4;
       }
 
@@ -25,7 +25,7 @@
         @apply fixed bottom-12 left-1/2 -translate-x-1/2;
 
         > .btn {
-          @apply bg-blue-600 text-white px-4 py-2 rounded-3xl shadow-2xl hover:opacity-80;
+          @apply bg-blue-600 dark:bg-blue-800 text-white dark:text-gray-200 px-4 py-2 rounded-3xl shadow-2xl hover:opacity-80;
 
           > .icon {
             @apply text-lg mr-1;

web/src/less/memo-content.less

@@ -1,5 +1,5 @@
 .memo-content-wrapper {
-  @apply w-full flex flex-col justify-start items-start;
+  @apply w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-200;
 
   > .memo-content-text {
     @apply w-full break-words text-base leading-7;
@@ -14,15 +14,12 @@
     }
 
     .tag-span {
-      @apply inline-block w-auto font-mono text-blue-600 cursor-pointer;
-    }
-
-    .memo-link-text {
-      @apply inline-block text-blue-600 cursor-pointer font-bold border-none no-underline hover:opacity-80;
+      @apply inline-block w-auto font-mono text-blue-600 dark:text-blue-400 cursor-pointer;
     }
 
     .link {
-      @apply text-blue-600 cursor-pointer underline break-all hover:opacity-80 decoration-1;
+      @apply text-blue-600 dark:text-blue-400 cursor-pointer underline break-all hover:opacity-80 decoration-1;
+
       code {
         @apply underline decoration-1;
       }
@@ -55,7 +52,7 @@
     }
 
     pre {
-      @apply w-full my-1 p-3 rounded bg-gray-100 whitespace-pre-wrap;
+      @apply w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap;
 
       code {
         @apply block;
@@ -63,7 +60,7 @@
     }
 
     code {
-      @apply bg-gray-100 px-1 rounded text-sm font-mono leading-6 inline-block;
+      @apply bg-gray-100 dark:bg-zinc-600 px-1 rounded text-sm font-mono leading-6 inline-block;
     }
 
     table {
@@ -79,11 +76,11 @@
     }
 
     blockquote {
-      @apply border-l-4 pl-2 text-gray-400;
+      @apply border-l-4 pl-2 text-gray-400 dark:text-gray-300;
     }
 
     hr {
-      @apply my-1;
+      @apply my-1 dark:border-zinc-600;
     }
   }
 
@@ -91,7 +88,7 @@
     @apply w-full relative flex flex-row justify-start items-center;
 
     > .btn {
-      @apply flex flex-row justify-start items-center pl-2 pr-1 py-1 my-1 text-xs rounded-lg border bg-gray-100 border-gray-200 opacity-80 shadow hover:opacity-60 cursor-pointer;
+      @apply flex flex-row justify-start items-center pl-2 pr-1 py-1 my-1 text-xs rounded-lg border bg-gray-100 dark:bg-zinc-600 border-gray-200 dark:border-zinc-600 opacity-80 shadow hover:opacity-60 cursor-pointer;
 
       &.expand-btn {
         @apply mt-2;

web/src/less/memo-detail.less

@@ -1,12 +1,12 @@
 .page-wrapper.memo-detail {
-  @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-900;
+  @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-800;
   background-color: #f6f5f4;
 
   > .page-container {
     @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;
 
     > .page-header {
-      @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 pt-6 mb-2 dark:bg-zinc-900;
+      @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 pt-6 mb-2 dark:bg-zinc-800;
       background-color: #f6f5f4;
 
       > .title-container {

web/src/less/memo-editor.less

@@ -1,12 +1,12 @@
 .memo-editor-container {
-  @apply transition-all relative w-full flex flex-col justify-start items-start bg-white px-4 rounded-lg border-2 border-gray-200;
+  @apply transition-all relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 rounded-lg border-2 border-gray-200 dark:border-zinc-600;
 
   &.fullscreen {
     @apply fixed w-full h-full top-0 left-0 z-1000 border-none rounded-none sm:p-8;
     background-color: #f6f5f4;
 
     > .memo-editor {
-      @apply p-4 mb-4 rounded-lg border shadow-lg flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white;
+      @apply p-4 mb-4 rounded-lg border shadow-lg flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white dark:bg-zinc-700;
 
       > .common-editor-inputer {
         @apply flex-grow w-full !h-full max-h-full;
@@ -33,7 +33,7 @@
   }
 
   > .memo-editor {
-    @apply mt-4 flex flex-col justify-start items-start relative w-full h-auto bg-white;
+    @apply mt-4 flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-200;
   }
 
   > .common-tools-wrapper {
@@ -43,7 +43,7 @@
       @apply flex flex-row justify-start items-center;
 
       > .action-btn {
-        @apply flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer opacity-60 hover:opacity-90 hover:bg-gray-300 hover:shadow;
+        @apply flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer dark:text-gray-200 opacity-60 hover:opacity-90 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow;
 
         &.tag-action {
           @apply relative;
@@ -67,8 +67,8 @@
           }
         }
 
-        &.resource-btn{
-          @apply relative ;
+        &.resource-btn {
+          @apply relative;
 
           &:hover {
             > .resource-action-list {
@@ -76,18 +76,16 @@
             }
           }
 
-          >.resource-action-list{
+          > .resource-action-list {
             @apply hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-1 rounded w-36 max-h-52 overflow-auto font-mono bg-zinc-100;
 
-            >.resource-action-item{
+            > .resource-action-item {
               @apply w-full flex text-black cursor-pointer rounded text-sm leading-6 px-2 truncate hover:bg-zinc-300 shrink-0;
 
-              >.icon-img{
+              > .icon-img {
                 @apply w-4 mr-2;
               }
-
             }
-
           }
         }
 
@@ -131,7 +129,7 @@
   }
 
   > .editor-footer-container {
-    @apply w-full flex flex-row justify-between items-center border-t border-t-gray-100 py-3 mt-2;
+    @apply w-full flex flex-row justify-between items-center border-t border-t-gray-100 dark:border-t-zinc-500 py-3 mt-2;
 
     > .visibility-selector {
       @apply h-8;

web/src/less/memo-filter.less

@@ -1,16 +1,16 @@
 .filter-query-container {
-  @apply flex flex-row justify-start items-start w-full flex-wrap p-2 pb-1 text-sm font-mono leading-7;
+  @apply flex flex-row justify-start items-start w-full flex-wrap p-2 pb-1 text-sm font-mono leading-7 dark:text-gray-300;
 
   > .tip-text {
     @apply mr-2;
   }
 
   > .filter-item-container {
-    @apply flex flex-row justify-start items-center px-2 mr-2 cursor-pointer bg-gray-200 rounded whitespace-nowrap truncate hover:line-through;
+    @apply flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through;
     max-width: 256px;
 
     > .icon-text {
-      @apply w-4 h-auto mr-1 text-gray-500;
+      @apply w-4 h-auto mr-1 text-gray-500 dark:text-gray-400;
     }
   }
 }

web/src/less/memo.less

@@ -1,12 +1,12 @@
 .memo-wrapper {
-  @apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
+  @apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-600 hover:border-gray-200 dark:hover:border-zinc-600;
 
   &.archived-memo {
     @apply border-gray-200;
   }
 
   &.pinned {
-    @apply border-gray-200 border-2;
+    @apply border-gray-200 border-2 dark:border-zinc-600;
   }
 
   > .corner-container {
@@ -54,14 +54,14 @@
         @apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3;
 
         > .more-action-btns-container {
-          @apply w-28 h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white;
+          @apply w-28 h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-700;
           box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
 
           > .btns-container {
-            @apply w-full flex flex-row justify-around items-center border-b border-gray-100 p-1 mb-1;
+            @apply w-full flex flex-row justify-around items-center border-b border-gray-100 dark:border-zinc-600 p-1 mb-1;
 
             > .btn {
-              @apply relative w-6 h-6 p-1 text-gray-600 cursor-pointer select-none;
+              @apply relative w-6 h-6 p-1 text-gray-600 dark:text-gray-300 cursor-pointer select-none;
 
               &:hover > .tip-text {
                 @apply block;
@@ -78,7 +78,7 @@
           }
 
           > .btn {
-            @apply w-full text-sm leading-6 py-1 px-3 rounded justify-start  cursor-pointer;
+            @apply w-full text-sm leading-6 py-1 px-3 rounded justify-start cursor-pointer dark:text-gray-300;
 
             &.archive-btn {
               @apply text-orange-600;
@@ -88,13 +88,13 @@
       }
 
       .btn {
-        @apply flex flex-row justify-center items-center px-2 leading-6 text-sm rounded hover:bg-gray-200;
+        @apply flex flex-row justify-center items-center px-2 leading-6 text-sm rounded hover:bg-gray-200 dark:hover:bg-zinc-600;
 
         &.more-action-btn {
           @apply w-8 -mr-2 opacity-60 cursor-default hover:bg-transparent;
 
           > .icon-img {
-            @apply w-4 h-auto;
+            @apply w-4 h-auto dark:text-gray-300;
           }
 
           &:hover {

web/src/less/memos-header.less

@@ -9,12 +9,12 @@
       @apply flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent;
 
       > .icon-img {
-        @apply w-5 h-auto;
+        @apply w-5 h-auto dark:text-gray-200;
       }
     }
 
     > .title-text {
-      @apply font-bold text-lg leading-10 mr-2 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700;
+      @apply font-bold text-lg leading-10 mr-2 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-200;
     }
   }
 

web/src/less/search-bar.less

@@ -9,14 +9,14 @@
   }
 
   > .search-bar-inputer {
-    @apply h-9 flex flex-row justify-start items-center w-full py-2 px-3 sm:px-4 rounded-full sm:rounded-lg bg-zinc-200;
+    @apply h-9 flex flex-row justify-start items-center w-full py-2 px-3 sm:px-4 rounded-full sm:rounded-lg bg-zinc-200 dark:bg-zinc-700;
 
     > .icon-img {
-      @apply w-4 h-auto opacity-30;
+      @apply w-4 h-auto opacity-30 dark:text-gray-200;
     }
 
     > .text-input {
-      @apply flex ml-2 w-24 grow text-sm outline-none bg-transparent;
+      @apply flex ml-2 w-24 grow text-sm outline-none bg-transparent dark:text-gray-200;
     }
   }
 
@@ -24,18 +24,18 @@
     @apply hidden absolute top-9 -right-2 p-2 w-80 z-10;
 
     > .quickly-action-container {
-      @apply flex flex-col justify-start items-start w-full bg-white px-4 py-3 rounded-lg;
+      @apply flex flex-col justify-start items-start w-full bg-white dark:bg-zinc-700 px-4 py-3 rounded-lg;
       box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
 
       > .title-text {
-        @apply text-gray-600 text-xs;
+        @apply text-gray-600 dark:text-gray-400 text-xs;
       }
 
       > .types-container {
         @apply flex flex-row justify-start items-start w-full text-xs mt-2;
 
         > .section-text {
-          @apply text-gray-600 mr-1 shrink-0 leading-6;
+          @apply text-gray-600 dark:text-gray-400 mr-1 shrink-0 leading-6;
         }
 
         > .values-container {
@@ -45,10 +45,10 @@
             @apply flex flex-row justify-start items-center leading-6;
 
             .type-item {
-              @apply cursor-pointer px-1 rounded hover:bg-gray-100;
+              @apply cursor-pointer px-1 rounded dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-600;
 
               &.selected {
-                @apply bg-green-600 text-white;
+                @apply !bg-green-600 text-white;
               }
             }
 

web/src/less/shortcut-list.less

@@ -9,10 +9,10 @@
     }
 
     > .btn {
-      @apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 rounded ml-2 hover:shadow;
+      @apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-700 rounded ml-2 hover:shadow;
 
       > .icon-img {
-        @apply w-4 h-4 text-gray-500;
+        @apply w-4 h-4 text-gray-400;
       }
     }
   }
@@ -21,7 +21,7 @@
     @apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2;
 
     > .shortcut-container {
-      @apply relative flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white;
+      @apply relative flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white dark:hover:bg-zinc-700;
 
       &:hover {
         > .btns-container {
@@ -36,7 +36,7 @@
       }
 
       > .shortcut-text-container {
-        @apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black;
+        @apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black dark:text-gray-200;
 
         > .icon-text {
           @apply block w-4 shrink-0;
@@ -54,7 +54,7 @@
           @apply flex flex-row justify-center items-center;
 
           &.toggle-btn {
-            @apply text-gray-600;
+            @apply text-gray-600 dark:text-gray-400;
 
             > .icon-img {
               @apply w-4 h-auto;
@@ -72,11 +72,11 @@
           @apply absolute top-6 right-0 flex-col justify-start items-start w-auto h-auto px-4 pt-3 hidden z-1;
 
           > .action-btns-container {
-            @apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white;
+            @apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white dark:bg-zinc-700;
             box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
 
             > .btn {
-              @apply w-full text-sm leading-6 py-1 px-3 rounded text-left hover:bg-gray-100;
+              @apply w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800;
 
               &.delete-btn {
                 @apply text-orange-600;

web/src/less/siderbar.less

@@ -1,5 +1,5 @@
 .sidebar-wrapper {
-  @apply fixed sm:sticky top-0 z-30 sm:z-0 -translate-x-64 sm:translate-x-0 sm:flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 bg-white sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar;
+  @apply fixed sm:sticky top-0 z-30 sm:z-0 -translate-x-64 sm:translate-x-0 sm:flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 bg-white dark:bg-zinc-800 sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar;
 
   &.show {
     @apply translate-x-0 shadow-2xl sm:shadow-none;
@@ -9,7 +9,7 @@
     @apply w-full px-2 my-2 flex flex-col justify-start items-start shrink-0;
 
     > .action-btn {
-      @apply leading-10 px-4 rounded-lg text-base hover:bg-white;
+      @apply leading-10 px-4 rounded-lg text-base dark:text-gray-200 hover:bg-white dark:hover:bg-zinc-700;
 
       > .icon {
         @apply mr-1;

web/src/less/tag-list.less

@@ -9,7 +9,7 @@
     @apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2 mt-1;
 
     .subtags-container {
-      @apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1 border-l-2 border-l-gray-200;
+      @apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400;
       width: calc(100% - 18px);
       min-width: 80px;
 
@@ -19,7 +19,7 @@
     }
 
     .tag-item-container {
-      @apply flex flex-row justify-between items-center w-full h-10 py-0 px-4 rounded-lg text-base shrink-0 select-none cursor-pointer hover:bg-white;
+      @apply flex flex-row justify-between items-center w-full h-10 py-0 px-4 rounded-lg text-base shrink-0 select-none cursor-pointer hover:bg-white dark:hover:bg-zinc-700;
 
       &.active {
         > .tag-text-container {
@@ -28,7 +28,7 @@
       }
 
       > .tag-text-container {
-        @apply flex flex-row justify-start items-center overflow-hidden shrink-0 leading-5 text-black;
+        @apply flex flex-row justify-start items-center overflow-hidden shrink-0 leading-5 text-black dark:text-gray-200;
         max-width: calc(100% - 24px);
 
         > .icon-text {
@@ -47,7 +47,7 @@
           @apply flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0;
 
           > .icon-img {
-            @apply w-5 h-5 opacity-80;
+            @apply w-5 h-5 opacity-80 dark:text-gray-400;
           }
 
           &.shown {
@@ -58,7 +58,7 @@
     }
 
     > .tip-text {
-      @apply w-full bg-gray-50 mt-2 pl-4 leading-8 rounded text-sm text-gray-400 font-mono;
+      @apply w-full bg-gray-50 dark:bg-zinc-700 mt-2 pl-4 leading-8 rounded text-sm text-gray-400 font-mono;
     }
   }
 }

web/src/less/usage-heat-map.less

@@ -18,28 +18,28 @@
 
     > .stat-wrapper {
       > .stat-container {
-        @apply block rounded-sm bg-gray-200;
+        @apply block rounded-sm bg-gray-200 dark:bg-zinc-700;
         width: 14px;
         height: 14px;
 
         &.stat-day-l1-bg {
-          @apply bg-green-400;
+          @apply bg-green-400 dark:bg-green-500;
         }
 
         &.stat-day-l2-bg {
-          @apply bg-green-500;
+          @apply bg-green-500 dark:bg-green-600;
         }
 
         &.stat-day-l3-bg {
-          @apply bg-green-600;
+          @apply bg-green-600 dark:bg-green-700;
         }
 
         &.stat-day-l4-bg {
-          @apply bg-green-700;
+          @apply bg-green-700 dark:bg-green-800;
         }
 
         &.today {
-          @apply border border-black;
+          @apply border border-black dark:border-gray-400;
         }
       }
     }

web/src/less/user-banner.less

@@ -5,11 +5,11 @@
     @apply shrink flex flex-row justify-start items-center flex-nowrap truncate;
 
     > .username-text {
-      @apply font-bold text-lg pr-1 text-slate-800 cursor-pointer shrink truncate;
+      @apply font-bold text-lg pr-1 text-slate-800 dark:text-gray-200 cursor-pointer shrink truncate;
     }
 
     > .tag {
-      @apply text-xs px-1 bg-blue-600 rounded text-white shadow;
+      @apply text-xs px-1 bg-blue-600 dark:bg-blue-800 rounded text-white dark:text-gray-200 shadow;
     }
   }
 
@@ -33,7 +33,7 @@
     @apply flex flex-col justify-start items-start;
 
     > .amount-text {
-      @apply font-bold text-2xl opacity-80 leading-10 text-slate-600;
+      @apply font-bold text-2xl opacity-80 leading-10 text-slate-600 dark:text-gray-300;
     }
 
     > .type-text {

web/src/pages/Auth.tsx

@@ -136,11 +136,11 @@ const Auth = () => {
           <div className="action-btns-container">
             {systemStatus?.host ? (
               <>
-                {actionBtnLoadingState.isLoading && <Icon.Loader className="w-4 h-auto animate-spin" />}
+                {actionBtnLoadingState.isLoading && <Icon.Loader className="w-4 h-auto mr-2 animate-spin" />}
                 {systemStatus?.allowSignUp && (
                   <>
                     <button
-                      className={`btn signup-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
+                      className={`btn-text ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
                       onClick={() => handleSignUpBtnsClick("USER")}
                     >
                       {t("common.sign-up")}
@@ -148,14 +148,14 @@ const Auth = () => {
                     <span className="mr-2 font-mono text-gray-200">/</span>
                   </>
                 )}
-                <button className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`} onClick={handleSigninBtnsClick}>
+                <button className={`btn-primary ${actionBtnLoadingState.isLoading ? "requesting" : ""}`} onClick={handleSigninBtnsClick}>
                   {t("common.sign-in")}
                 </button>
               </>
             ) : (
               <>
                 <button
-                  className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
+                  className={`btn-primary ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
                   onClick={() => handleSignUpBtnsClick("HOST")}
                 >
                   {t("auth.signup-as-host")}
@@ -165,21 +165,19 @@ const Auth = () => {
           </div>
           {!systemStatus?.host && <p className="tip-text">{t("auth.host-tip")}</p>}
         </div>
-        <div className="footer-container">
-          <div className="w-full flex flex-row justify-center items-center gap-2">
-            <Select
-              className="!min-w-[9rem] w-auto whitespace-nowrap"
-              startDecorator={<Icon.Globe className="w-4 h-auto" />}
-              value={i18n.language}
-              onChange={(_, value) => handleLocaleItemClick(value as Locale)}
-            >
-              <Option value="en">English</Option>
-              <Option value="zh">中文</Option>
-              <Option value="vi">Tiếng Việt</Option>
-              <Option value="fr">French</Option>
-            </Select>
-            <ApperanceSelect />
-          </div>
+        <div className="w-full flex flex-row justify-center items-center gap-2">
+          <Select
+            className="!min-w-[9rem] w-auto whitespace-nowrap"
+            startDecorator={<Icon.Globe className="w-4 h-auto" />}
+            value={i18n.language}
+            onChange={(_, value) => handleLocaleItemClick(value as Locale)}
+          >
+            <Option value="en">English</Option>
+            <Option value="zh">中文</Option>
+            <Option value="vi">Tiếng Việt</Option>
+            <Option value="fr">French</Option>
+          </Select>
+          <ApperanceSelect />
         </div>
       </div>
     </div>

web/src/pages/Explore.tsx

@@ -63,16 +63,16 @@ const Explore = () => {
         <div className="page-header">
           <div className="title-container">
             <img className="logo-img" src="/logo.webp" alt="" />
-            <span className="title-text">Explore</span>
+            <span className="title-text">memos</span>
           </div>
           <div className="action-button-container">
             {!loadingState.isLoading && user ? (
-              <Link to="/" className="btn">
-                <span className="icon">🏠</span> {t("common.back-to-home")}
+              <Link to="/" className="link-btn btn-normal">
+                <span>🏠</span> {t("common.back-to-home")}
               </Link>
             ) : (
-              <Link to="/auth" className="btn">
-                <span className="icon">👉</span> {t("common.sign-in")}
+              <Link to="/auth" className="link-btn btn-normal">
+                <span>👉</span> {t("common.sign-in")}
               </Link>
             )}
           </div>

web/src/pages/Home.tsx

@@ -11,8 +11,11 @@ import MemoFilter from "../components/MemoFilter";
 import MemoList from "../components/MemoList";
 import UpdateVersionBanner from "../components/UpdateVersionBanner";
 import "../less/home.less";
+import useApperance from "../hooks/useApperance";
 
 function Home() {
+  useApperance();
+
   const { t } = useTranslation();
   const location = useLocation();
   const user = useAppSelector((state) => state.user.user);

web/tailwind.config.js

@@ -13,6 +13,8 @@ module.exports = {
       "2xl": "1.5rem",
       "3xl": "1.875rem",
       "4xl": "2.25rem",
+      "5xl": "2.5rem",
+      "6xl": "3rem",
     },
     extend: {
       spacing: {