feat: 暗色主题、主题切换按钮

src/components/Post/List.astro

@@ -28,12 +28,12 @@ const {posts} = Astro.props
     align-items: baseline;
     gap: 20px;
     padding: 26px 0;
-    border-bottom: 1px solid #e8e8e8;
+    border-bottom: var(--border-secondary);
   }
 
   .post .d {
     font-size: 14px;
-    color: #b8b8b8;
+    color: var(--text-secondary);
     min-width: 80px;
     letter-spacing: 1px;
   }
@@ -42,18 +42,18 @@ const {posts} = Astro.props
     font-size: 16px;
     font-weight: normal;
     flex: 1;
+  }
+
+  .post h2 a {
+    color: var(--text-primary);
+    text-decoration: none;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
   }
 
-  .post h2 a {
-    color: #181818;
-    text-decoration: none;
-  }
-
   .post h2 a:hover {
-    color: #334155;
+    color: var(--text-title-hover);
     text-decoration: underline;
     text-underline-offset: 6px;
   }

src/components/ThemeIcon.astro

@@ -0,0 +1,75 @@
+---
+---
+<div class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
+  <svg aria-hidden="true" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path class="sun" fill-rule="evenodd"
+          d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
+    <path class="moon" fill-rule="evenodd"
+          d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
+  </svg>
+</div>
+
+<style>
+  #themeToggle {
+    border: 0;
+    background: none;
+    user-select: none;
+  }
+
+  .theme-toggle {
+    display: flex;
+    align-items: center;
+  }
+
+  .sun {
+    fill: black;
+  }
+
+  .moon {
+    fill: transparent;
+  }
+
+  :global(.dark) .sun {
+    fill: transparent;
+  }
+
+  :global(.dark) .moon {
+    fill: white;
+  }
+</style>
+
+<script is:inline>
+  const meta = document.querySelector('meta[name="theme-color"]');
+
+  const theme = (() => {
+    const localStorageTheme = localStorage?.getItem("theme") ?? '';
+    if (['dark', 'light'].includes(localStorageTheme)) {
+      return localStorageTheme;
+    }
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    return 'light';
+  })();
+
+  if (theme === 'light') {
+    document.documentElement.classList.remove('dark');
+    meta.setAttribute('content', '#ffffff');
+  } else {
+    document.documentElement.classList.add('dark');
+    meta.setAttribute('content', '#0a0a0a');
+  }
+
+  window.localStorage.setItem('theme', theme);
+
+  const handleToggleClick = () => {
+    const element = document.documentElement;
+    element.classList.toggle("dark");
+
+    const isDark = element.classList.contains("dark");
+    meta.setAttribute('content', isDark ? '#0a0a0a' : '#ffffff');
+    localStorage.setItem("theme", isDark ? "dark" : "light");
+  }
+
+  document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
+</script>

src/layouts/Layout.astro

@@ -42,7 +42,7 @@ const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
 
 <style>
   body {
-    background: #ffffff;
+    background: var(--background);
   }
 
   .container {

src/layouts/PageHeader.astro

@@ -1,5 +1,7 @@
 ---
 import {siteConfig} from "@/consts.ts";
+import ThemeIcon from "@/components/ThemeIcon.astro";
+
 const {siteTitle,git} = siteConfig;
 ---
 
@@ -8,6 +10,8 @@ const {siteTitle,git} = siteConfig;
   <nav>
     <a href="/archive">归档</a>
     <a target="_blank" href={git}>git</a>
+
+    <ThemeIcon />
   </nav>
 </header>
 
@@ -23,7 +27,8 @@ const {siteTitle,git} = siteConfig;
 
   nav {
     display: flex;
-    gap: 12px;
+    align-items: center;
+    gap: 16px;
     font-size: 14px;
     color: var(--text-secondary);
   }

src/pages/archive.astro

@@ -108,9 +108,12 @@ const {data} = await http.get<ApiResponse<Archive>>("posts/archives");
     text-overflow: ellipsis;
     color: var(--text-primary);
     font-size: 16px;
+    text-underline-offset: 4px;
+    line-height: 24px;
   }
 
   .post-title:hover{
+    color: var(--text-title-hover);
     text-decoration: underline;
   }
 

src/pages/post/[...slug].astro

@@ -94,7 +94,7 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
   h1 {
     font-size: 28px;
     line-height: 1.4;
-    font-weight: 400;
+    font-weight: 500;
     margin-bottom: 20px;
   }
 
@@ -130,6 +130,12 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
     border-radius: 20px;
     padding: 8px 16px;
   }
+
+  @media (max-width: 640px) {
+    h1{
+      font-size: 24px;
+    }
+  }
 </style>
 
 <script>

src/styles/global.css

@@ -2,21 +2,32 @@
 @import "css-reset.css";
 
 :root {
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --layout-width: 760px;
+
+  --background: #ffffff;
   --border-primary: 1px solid #dcdcdc;
   --border-secondary: 1px solid #eee;
-
+  --text-primary: #030712;
-  --text-primary: #24292e;
+  --text-secondary: #3f3f46;
-  --text-secondary: #4b5563;
+  --text-tertiary: #a1a1aa;
-  --text-tertiary: #9ca3af;
   --text-disabled: #d1d5db;
   --text-meta: #71717a;
-  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --article-text-color: #404040;
+  --text-title-hover: #000;
 }
 
 .dark {
-
+  --background: #0a0a0a;
+  --border-primary: 1px solid #52525b;
+  --border-secondary: 1px solid #525252;
+  --text-primary: #e4e4e7;
+  --text-secondary: #d1d5db;
+  --text-tertiary: #71717a;
+  --text-disabled: #6b7280;
+  --text-meta: #d4d4d8;
+  --article-text-color: #d4d4d8;
+  --text-title-hover: #fff;
 }
 
 html,