Add dark mode support

_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

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;
+}

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();
+    }
+})();

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>

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>