feat: 暗黑主题

src/components/BaseHeader.astro

@@ -1,7 +1,27 @@
 ---
-import { metadata } from "../consts";
+import {metadata} from "../consts";
+import ThemeIcon from './ThemeIcon.astro'
 ---
 
+<header>
+  <nav class="main-nav">
+    <h1>
+      <a href="/">{metadata.siteTitle}</a>
+    </h1>
+
+    <div class="main-nav-right">
+      <ul class="menu">
+        <li class="menu-item"><a href="/">首页</a></li>
+        <!--<li class="menu-item"><a href="/">文章</a></li>-->
+        <!--<li class="menu-item"><a href="/">分类</a></li>-->
+        <!--<li class="menu-item"><a href="/">关于</a></li>-->
+      </ul>
+
+      <ThemeIcon/>
+    </div>
+  </nav>
+</header>
+
 <style>
   header {
     height: 60px;
@@ -23,8 +43,14 @@ import { metadata } from "../consts";
     justify-content: space-between;
   }
 
+  .main-nav-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
   @media (max-width: 768px) {
-    .main-nav{
+    .main-nav {
       padding: 16px;
     }
   }
@@ -33,6 +59,7 @@ import { metadata } from "../consts";
     user-select: none;
     cursor: pointer;
     font-size: 24px;
+    color: #000000;
   }
 
   .main-nav .menu {
@@ -43,7 +70,7 @@ import { metadata } from "../consts";
     align-items: center;
   }
 
-  .menu-item{
+  .menu-item {
     text-align: center;
   }
 
@@ -54,18 +81,17 @@ import { metadata } from "../consts";
   .main-nav .menu-item a:hover {
     color: #64748b;
   }
-</style>
 
-<header>
-  <nav class="main-nav">
-    <h1>
-      <a href="/">{metadata.siteTitle}</a>
-    </h1>
-    <ul class="menu">
-      <li class="menu-item"><a href="/">首页</a></li>
-      <!--<li class="menu-item"><a href="/">文章</a></li>-->
-      <li class="menu-item"><a href="/">分类</a></li>
-      <!--<li class="menu-item"><a href="/">关于</a></li>-->
-    </ul>
-  </nav>
-</header>
+  :global(.dark) header {
+    background: #000000;
+    box-shadow: rgba(255, 255, 255, .3) 0px 1px 2px 0px;
+  }
+
+  :global(.dark) .main-nav h1 {
+    color: #ffffff;
+  }
+
+  :global(.dark) .main-nav .menu-item a:hover {
+    color: rgba(255, 255, 255, .8);
+  }
+</style>