From 62aa324e16e24ff31b3f40673045294e88a197bc Mon Sep 17 00:00:00 2001
From: Daisuke <nakada0907@outlook.com>
Date: Wed, 11 Feb 2026 13:15:03 +0900
Subject: [PATCH] feat: implement dark mode support

- Introduce CSS variables for theming in `global.css`
- Add `ThemeIcon` component for toggling light/dark modes
- Integrate theme initialization script in `BaseLayout` to prevent FOUC
- Update navigation, buttons, and tag styles for dark mode compatibility
- Configure Shiki for dual-theme syntax highlighting in `astro.config.mjs`
- Adjust link colors to accessible blue shades for both themes
---
 astro.config.mjs                     |  11 ++-
 src/components/BlogPost.astro        |  10 ++-
 src/components/Header.astro          |   8 +++
 src/components/Navigation.astro      |   3 +-
 src/components/ThemeIcon.astro       |  36 ++++++++++
 src/layouts/BaseLayout.astro         |  16 +++++
 src/layouts/MarkdownPostLayout.astro |  11 ++-
 src/pages/blog/[...page].astro       |  13 ++++
 src/pages/index.astro                | 104 ++++++++++++++-------------
 src/pages/tags/index.astro           |  11 ++-
 src/styles/global.css                |  56 ++++++++++++---
 11 files changed, 218 insertions(+), 61 deletions(-)
 create mode 100644 src/components/ThemeIcon.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 87c4c0f..dde729c 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -6,5 +6,14 @@ import preact from "@astrojs/preact";
 // https://astro.build/config
 export default defineConfig({
   site: "https://blog.n-daisuke897.com/",
-  integrations: [preact()]
+  integrations: [preact()],
+  markdown: {
+    shikiConfig: {
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+      wrap: true,
+    },
+  },
 });
\ No newline at end of file
diff --git a/src/components/BlogPost.astro b/src/components/BlogPost.astro
index e10aa0b..32cfb32 100644
--- a/src/components/BlogPost.astro
+++ b/src/components/BlogPost.astro
@@ -12,11 +12,19 @@ const { title, url, datetime } = Astro.props;
         font-size: 14px;
         color: #666;
     }
+    :global(.dark) .new-article-date {
+        color: #94a3b8;
+    }
     .new-article-title {
         font-size: 18px;
         font-weight: bold;
-        color: #333f;
+        color: var(--text-color);
+        text-decoration: none;
     }
+    .new-article-title:hover {
+        text-decoration: underline;
+    }
+    /* Removed specific dark mode color to inherit var(--text-color) */
 </style>
 <div class="new-article">
     <div class="new-article-date">{datetime}</div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index b058c25..bd43431 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -9,3 +9,11 @@ import Navigation from "./Navigation.astro";
         <Navigation />
     </nav>
 </header>
+
+<style>
+    nav {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+</style>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 67284b2..fe72b60 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,8 +1,9 @@
 ---
-
+import ThemeIcon from "./ThemeIcon.astro";
 ---
 
 <div class="nav-links">
+    <ThemeIcon />
     <a href="/">Home</a>
     <a href="/about/">About</a>
     <a href="/blog/">Articles</a>
diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
new file mode 100644
index 0000000..de9258b
--- /dev/null
+++ b/src/components/ThemeIcon.astro
@@ -0,0 +1,36 @@
+---
+---
+<button id="themeToggle">
+    <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path class="sun" d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z" />
+        <path class="moon" d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.27-4.4 2.27-3.03 0-5.5-2.47-5.5-5.5 0-1.82.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" />
+    </svg>
+</button>
+
+<style>
+    #themeToggle {
+        border: 0;
+        background: none;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        padding: 0 10px;
+    }
+    .sun { fill: transparent; }
+    .moon { fill: transparent; }
+
+    :global(.dark) .moon { fill: white; }
+    :global(html:not(.dark)) .sun { fill: black; }
+</style>
+
+<script is:inline>
+    const handleToggleClick = () => {
+        const element = document.documentElement;
+        element.classList.toggle("dark");
+
+        const isDark = element.classList.contains("dark");
+        localStorage.setItem("theme", isDark ? "dark" : "light");
+    }
+
+    document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
+</script>
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 3e068d8..0837182 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -12,6 +12,22 @@ const { pageTitle } = Astro.props;
         <meta name="viewport" content="width=device-width" />
         <meta name="generator" content={Astro.generator} />
         <title>{pageTitle + " | Naputo"}</title>
+        <script is:inline>
+            const theme = (() => {
+                if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+                    return localStorage.getItem('theme');
+                }
+                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    return 'dark';
+                }
+                return 'light';
+            })();
+            if (theme === 'dark') {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        </script>
     </head>
     <body>
         <Header />
diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
index b236a24..280e17b 100644
--- a/src/layouts/MarkdownPostLayout.astro
+++ b/src/layouts/MarkdownPostLayout.astro
@@ -30,7 +30,11 @@ const optionsForDate = {
 
 <style>
   a {
-    color: #00539f;
+    color: #3b82f6;
+  }
+
+  :global(.dark) a {
+    color: #60a5fa;
   }
 
   .tags {
@@ -47,6 +51,11 @@ const optionsForDate = {
     background-color: #f8fcfd;
   }
 
+  :global(.dark) .tag {
+    background-color: #1e293b;
+    border-color: #475569;
+  }
+
   .markdown-content {
     font-family: sans-serif;
     font-size: 1.1rem;
diff --git a/src/pages/blog/[...page].astro b/src/pages/blog/[...page].astro
index c5b361c..89c8c02 100644
--- a/src/pages/blog/[...page].astro
+++ b/src/pages/blog/[...page].astro
@@ -77,15 +77,28 @@ const pageTitle = "Articles";
 		text-decoration: none;
 		transition: background-color 0.3s ease, transform 0.3s ease;
 	}
+	:global(.dark) nav.pagination a,
+	:global(.dark) nav.pagination span {
+		background-color: #1e293b;
+		color: #f8fafc;
+		border: 1px solid #334155;
+	}
 	nav.pagination a:hover {
 		background-color: #cacaca;
 		transform: translateY(-2px);
 	}
+	:global(.dark) nav.pagination a:hover {
+		background-color: #334155;
+	}
 	nav.pagination a.active {
 		background-color: #cacaca;
 		font-weight: bold;
 		pointer-events: none;
 	}
+	:global(.dark) nav.pagination a.active {
+		background-color: #334155;
+		color: #f8fafc;
+	}
 	@media (max-width: 600px) {
 		nav.pagination {
 			flex-direction: column;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index aa7888a..c95b4ff 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,55 +8,63 @@ const sortedPosts = allPosts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pu
 ---
 
 <style>
-    .new-articles {
-        text-align: start;
-		margin-bottom: 2rem;
-    }
-	.header-new-posts {
-		text-align: center;
-	}
-	.button-container {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		margin-top: 2rem;
-	}
-	.list-of-articles-button {
-		display: inline-block;
-		background-color:  #e0e0e0;
-		color: #333333; 
-		font-size: 1rem;
-		font-weight: 600;
-		padding: 12px 24px;
-		border: none;
-		border-radius: 6px;
-		text-decoration: none;
-		transition: background-color 0.3s ease, transform 0.3s ease;
-		cursor: pointer;
-	}
-	.list-of-articles-button:hover {
-		background-color: #cacaca;
-	}
+.new-articles {
+  text-align: start;
+  margin-bottom: 2rem;
+}
+.header-new-posts {
+  text-align: center;
+}
+.button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2rem;
+}
+.list-of-articles-button {
+  display: inline-block;
+  background-color:  #e0e0e0;
+  color: #333333;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  text-decoration: none;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+  cursor: pointer;
+}
+:global(.dark) .list-of-articles-button {
+  background-color: #1e293b;
+  color: #f8fafc;
+  border: 1px solid #334155;
+}
+.list-of-articles-button:hover {
+  background-color: #cacaca;
+}
+:global(.dark) .list-of-articles-button:hover {
+  background-color: #334155;
+}
 </style>
 <BaseLayout pageTitle={pageTitle}>
-	<h3 class="header-new-posts">New Posts</h3>
-	<div class="new-articles">
-		{
-			sortedPosts.slice(0, 5).map((post: any) => (
-				<BlogPost
-					url={`/posts/${post.id}/`}
-					title={post.data.title}
-					datetime={post.data.pubDate.toLocaleDateString("en-US", {
-						year: "numeric",
-						month: "long",
-						day: "numeric",
-					})}
-				/>
-			))
-		}
-	</div>
+  <h3 class="header-new-posts">New Posts</h3>
+  <div class="new-articles">
+    {
+    sortedPosts.slice(0, 5).map((post: any) => (
+    <BlogPost
+      url={`/posts/${post.id}/`}
+	  title={post.data.title}
+	  datetime={post.data.pubDate.toLocaleDateString("en-US", {
+	  year: "numeric",
+	  month: "long",
+	  day: "numeric",
+	  })}
+    />
+    ))
+    }
+  </div>
 
-	<div class="button-container">
-		<a href="/blog/" class="list-of-articles-button">List of Article</a>
-	</div>
+  <div class="button-container">
+    <a href="/blog/" class="list-of-articles-button">List of Article</a>
+  </div>
 </BaseLayout>
diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro
index 7d91fa3..61f315b 100644
--- a/src/pages/tags/index.astro
+++ b/src/pages/tags/index.astro
@@ -20,7 +20,7 @@ const pageTitle = "Tag List";
 
 <style>
     a {
-        color: #00539f;
+        color: #3b82f6;
     }
 
     .tags {
@@ -36,4 +36,13 @@ const pageTitle = "Tag List";
         font-size: 1.15em;
         background-color: #f8fcfd;
     }
+
+    :global(.dark) .tag {
+        background-color: #1e293b;
+        border-color: #475569;
+    }
+
+    :global(.dark) .tag a {
+        color: #f8fafc;
+    }
 </style>
diff --git a/src/styles/global.css b/src/styles/global.css
index 0ebece4..c94e447 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,5 +1,19 @@
+/* Dark Mode support */
+:root {
+  --bg-color: #f1f5f9;
+  --text-color: #333333;
+  --nav-hover: #e0e0e0;
+}
+
+html.dark {
+  --bg-color: #0f172a;
+  --text-color: #f8fafc;
+  --nav-hover: #1e293b;
+}
+
 html {
-    background-color: #f1f5f9;
+    background-color: var(--bg-color);
+    color: var(--text-color);
     font-family: sans-serif;
 }
 
@@ -21,6 +35,14 @@ h1 {
 }
 
 /* nav styles */
+a {
+    color: #3b82f6; /* Blue 500 - vivid but readable on light */
+}
+
+html.dark a {
+    color: #60a5fa; /* Blue 400 - lighter and softer for dark mode */
+}
+
 .hamburger {
     padding-right: 20px;
     cursor: pointer;
@@ -31,17 +53,22 @@ h1 {
     width: 32px;
     height: 4px;
     margin-bottom: 8px;
-    background-color: #333333;
+    background-color: var(--text-color);
 }
 
 .nav-links {
     width: 100%;
-    display: flex;
+    display: none;
     justify-content: center;
     align-items: center;
     margin: 0;
 }
 
+.nav-links.expanded {
+    display: flex;
+    flex-direction: column;
+}
+
 .nav-links a {
     display: block;
     text-align: center;
@@ -51,12 +78,12 @@ h1 {
     font-weight: bold;
     text-transform: uppercase;
     border-radius: 4px;
-    color: #333333;
+    color: var(--text-color);
 }
 
 .nav-links a:hover,
 .nav-links a:focus {
-    background-color: #e0e0e0;
+    background-color: var(--nav-hover);
 }
 
 .nav-links img {
@@ -66,14 +93,16 @@ h1 {
     display: inline-block;
 }
 
-.expanded {
-    display: unset;
+html.dark .nav-links img {
+    filter: invert(1) hue-rotate(180deg);
 }
 
+/* .expanded removed as it is handled by .nav-links.expanded */
+
 @media screen and (min-width: 636px) {
     .nav-links {
         margin-left: 5em;
-        display: block;
+        display: flex;
         position: static;
         width: auto;
         background: none;
@@ -94,3 +123,14 @@ pre,
 code {
     font-family: "JetBrains Mono", "Fira Code", "Menlo", "Consolas", monospace;
 }
+
+pre {
+    padding: 1rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+}
+
+html.dark pre {
+    background-color: #1e293b !important;
+}
+