feat: dark mode style.

components/layouts/global-layout.module.css

@@ -1,15 +1,24 @@
-.sidebar {
+.wrapper {
   @apply bg-green-400 text-white;
-  @apply overflow-hidden flex flex-col;
-  @apply text-center;
+  :global(.dark) & {
+    @apply bg-gray-800 text-gray-400;
+  }
+}
+.sidebar {
+  @apply overflow-hidden flex flex-col fixed top-0;
+  @apply text-center shadow-2xl;
   height: 100vh;
   padding-top: 10vh;
 }
 
 .avatar {
-  @apply md:w-36 md:h-36 rounded-full;
   @apply w-16 h-16;
+  @apply md:w-36 md:h-36 rounded-full;
   @apply mx-auto md:my-8 flex-none;
+  
+  :global(.dark) & {
+    @apply filter brightness-75;
+  }
 }
 
 .name {
@@ -17,10 +26,14 @@
   @apply md:my-8 my-4 flex-none select-all;
 }
 .nav {
-  @apply my-auto;
+  @apply my-auto text-left self-center;
 }
 .navItem {
-  @apply leading-8 md:text-lg cursor-pointer my-1;
+  @apply leading-8 md:text-lg cursor-pointer my-2;
+  @apply tracking-widest;
+  small {
+    @apply text-xs md:inline hidden;
+  }
   &:hover {
     text-shadow: 0 0px 5px #abbf00;
   }
@@ -28,4 +41,8 @@
 .bio {
   @apply text-sm text-opacity-70 text-white;
   @apply my-4;
+
+  :global(.dark) & {
+    @apply text-gray-500;
+  }
 }

components/layouts/global-sidebar.tsx

@@ -13,6 +13,7 @@ interface Props {
 export const GlobalSidebar: FC<Props> = ({className}) => {
 
   return (
+    <div className={classnames(className, styles.wrapper)}>
       <aside className={classnames(className, styles.sidebar)}>
         <img className={styles.avatar} src="/images/avatar.png" />
         <h2 className={styles.name}>{fullName}</h2>
@@ -20,13 +21,22 @@ export const GlobalSidebar: FC<Props> = ({className}) => {
         <nav className={styles.nav}>
           <ul>
             <Link href="/">
-            <li className={styles.navItem}>文章</li>
+              <li className={styles.navItem}>
+                文章
+                <small> / ARTICLES</small>
+              </li>
             </Link>
             <Link href="/tags">
-            <li className={styles.navItem}>标签</li>
+              <li className={styles.navItem}>
+                标签
+                <small> / TAGS</small>
+              </li>
             </Link>
             <Link href="/about">
-            <li className={styles.navItem}>关于</li>
+              <li className={styles.navItem}>
+                关于
+                <small> / ABOUT</small>
+              </li>
             </Link>
           </ul>
         </nav>
@@ -37,5 +47,6 @@ export const GlobalSidebar: FC<Props> = ({className}) => {
           {"好挤 (#`O′)"}
         </footer>
       </aside>
+    </div>
   );
 };

pages/_app.module.css

@@ -7,10 +7,17 @@
 .primary {
   @apply flex-auto;
   @apply bg-gray-100 text-gray-700;
+  :global(.dark) & {
+    @apply bg-gray-700 text-gray-300;
+  }
   .wrapper {
     @apply mx-auto max-w-screen-xl;
   }
 }
 .pageHeader {
   @apply p-3 bg-gray-50 flex justify-between;
+
+  :global(.dark) & {
+    @apply bg-gray-800;
+  }
 }

pages/index.module.css

@@ -4,14 +4,22 @@
 }
 
 .item {
-  @apply my-2 mx-4 px-3 overflow-hidden;
+  @apply my-2 mx-4 px-4 overflow-hidden;
   @apply rounded-md shadow-sm hover:shadow;
   @apply bg-gray-50 hover:bg-white;
 
+  :global(.dark) & {
+    @apply bg-gray-800;
+  }
+  
   .title {
-    @apply text-lg my-2;
+    @apply text-lg my-4;
   }
   .description {
-    @apply text-sm text-gray-600 leading-6 my-2;
+    @apply text-sm text-gray-600 leading-6 my-4;
+
+  :global(.dark) & {
+    @apply text-gray-400;
+  }
   }
 }