diff --git a/_typos.toml b/_typos.toml
index da91470d..a61f2574 100644
--- a/_typos.toml
+++ b/_typos.toml
@@ -31,7 +31,9 @@ extend-ignore-re = [
 
 # Custom dictionary for technical terms (whole word matching only)
 [default.extend-words]
-# GitHub usernames (lowercase for case-insensitive matching)
+# Add any false positives here if needed
+
+# GitHub usernames (keys must be lowercase for case-insensitive matching)
 youy = "youy"
 
 # Product/Service names
diff --git a/content/css/dark-mode.css b/content/css/dark-mode.css
new file mode 100644
index 00000000..95b21569
--- /dev/null
+++ b/content/css/dark-mode.css
@@ -0,0 +1,100 @@
+/* Dark Mode Styles */
+:root {
+    --bg-primary: #ffffff;
+    --text-primary: #212529;
+    --text-secondary: #6c757d;
+    --navbar-bg: #343a40;
+    --code-bg: #f8f9fa;
+}
+
+[data-theme="dark"] {
+    --bg-primary: #0d1117;
+    --text-primary: #e6edf3;
+    --text-secondary: #8b949e;
+    --navbar-bg: #0d1117;
+    --code-bg: #161b22;
+}
+
+body {
+    background-color: var(--bg-primary) !important;
+    color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] .bg-white {
+    background-color: var(--bg-primary) !important;
+    color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] a {
+    color: #58a6ff !important;
+}
+
+[data-theme="dark"] a:hover {
+    color: #79c0ff !important;
+}
+
+[data-theme="dark"] .navbar-dark {
+    background-color: var(--navbar-bg) !important;
+}
+
+[data-theme="dark"] pre {
+    background-color: var(--code-bg) !important;
+    border-radius: 6px;
+}
+
+.dark-mode-toggle {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 1.2rem;
+    cursor: pointer;
+    padding: 0;
+    margin-left: 1rem;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    transition: color 0.15s ease;
+}
+
+.dark-mode-toggle:hover {
+    color: rgba(255, 255, 255, 1);
+}
+
+.dark-mode-toggle:focus {
+    outline: 2px solid #79c0ff;
+    outline-offset: 2px;
+}
+
+.dark-mode-toggle:focus:not(:focus-visible) {
+    outline: none;
+}
+
+.sun-icon {
+    display: none;
+}
+
+.moon-icon {
+    display: inline;
+}
+
+.sun-icon,
+.moon-icon {
+    line-height: 1;
+}
+
+[data-theme="dark"] .sun-icon {
+    display: inline;
+}
+
+[data-theme="dark"] .moon-icon {
+    display: none;
+}
+
+[data-theme="dark"] .hljs {
+    background: var(--code-bg) !important;
+    color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] .hljs-comment {
+    color: var(--text-secondary) !important;
+}
diff --git a/content/js/dark-mode.js b/content/js/dark-mode.js
new file mode 100644
index 00000000..34de7555
--- /dev/null
+++ b/content/js/dark-mode.js
@@ -0,0 +1,46 @@
+(function() {
+    'use strict';
+
+    const root = document.documentElement;
+
+    function getTheme() {
+        try {
+            return localStorage.getItem('theme') || 'light';
+        } catch {
+            return 'light';
+        }
+    }
+
+    function setButtonState(theme) {
+        const toggleButton = document.getElementById('dark-mode-toggle');
+        if (toggleButton) {
+            toggleButton.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
+        }
+    }
+
+    function applyTheme(theme) {
+        root.setAttribute('data-theme', theme);
+        try { localStorage.setItem('theme', theme); } catch { }
+        setButtonState(theme);
+    }
+
+    function toggleTheme() {
+        applyTheme(getTheme() === 'dark' ? 'light' : 'dark');
+    }
+
+    function setupToggleButton() {
+        const toggleButton = document.getElementById('dark-mode-toggle');
+        if (toggleButton) {
+            setButtonState(getTheme());
+            toggleButton.addEventListener('click', toggleTheme);
+        }
+    }
+
+    root.setAttribute('data-theme', getTheme());
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', setupToggleButton);
+    } else {
+        setupToggleButton();
+    }
+})();
diff --git a/content/theme/templates/menu.html b/content/theme/templates/menu.html
index c0f3ab2d..c8abbd38 100644
--- a/content/theme/templates/menu.html
+++ b/content/theme/templates/menu.html
@@ -15,6 +15,10 @@
                     <a class="nav-link" href="/blog/feed.xml">RSS</a>
                 </li>
             </ul>
+            <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" aria-label="Toggle dark mode" aria-pressed="false" title="Toggle dark mode">
+                <span class="sun-icon" aria-hidden="true">☀</span>
+                <span class="moon-icon" aria-hidden="true">☾</span>
+            </button>
         </div>
     </div>
 </nav>
diff --git a/content/theme/templates/styles.html b/content/theme/templates/styles.html
index f3eddf67..8ea375f0 100644
--- a/content/theme/templates/styles.html
+++ b/content/theme/templates/styles.html
@@ -3,5 +3,7 @@
 <link href="/blog/css/headerlink.css" rel="stylesheet">
 <link href="/blog/highlight/default.min.css" rel="stylesheet">
 <link href="/blog/css/app.css" rel="stylesheet">
+<link href="/blog/css/dark-mode.css" rel="stylesheet">
+<script src="/blog/js/dark-mode.js"></script>
 <script src="/blog/highlight/highlight.js"></script>
 <script>hljs.highlightAll();</script>