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,29 +13,40 @@ interface Props {
 export const GlobalSidebar: FC<Props> = ({className}) => {
 
   return (
-    <aside className={classnames(className, styles.sidebar)}>
-      <img className={styles.avatar} src="/images/avatar.png" />
-      <h2 className={styles.name}>{fullName}</h2>
+    <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>
 
-      <nav className={styles.nav}>
-        <ul>
-          <Link href="/">
-            <li className={styles.navItem}>文章</li>
-          </Link>
-          <Link href="/tags">
-            <li className={styles.navItem}>标签</li>
-          </Link>
-          <Link href="/about">
-            <li className={styles.navItem}>关于</li>
-          </Link>
-        </ul>
-      </nav>
-      <footer className={classnames(styles.bio, "md:block hidden")}>
-        {"“人造的身体，借来的心”"}
-      </footer>
-      <footer className={classnames(styles.bio, "md:hidden block")}>
-        {"好挤 (#`O′)"}
-      </footer>
-    </aside>
+        <nav className={styles.nav}>
+          <ul>
+            <Link href="/">
+              <li className={styles.navItem}>
+                文章
+                <small> / ARTICLES</small>
+              </li>
+            </Link>
+            <Link href="/tags">
+              <li className={styles.navItem}>
+                标签
+                <small> / TAGS</small>
+              </li>
+            </Link>
+            <Link href="/about">
+              <li className={styles.navItem}>
+                关于
+                <small> / ABOUT</small>
+              </li>
+            </Link>
+          </ul>
+        </nav>
+        <footer className={classnames(styles.bio, "md:block hidden")}>
+          {"“人造的身体，借来的心”"}
+        </footer>
+        <footer className={classnames(styles.bio, "md:hidden block")}>
+          {"好挤 (#`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;
+  }
   }
 }