diff --git a/web/static/style.css b/web/static/style.css
index c403621..b7cf1cf 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -16,6 +16,46 @@
   --code-bg: #f0ede4;
   --green:   #4a7c40;
   --blue:    #3b5998;
+  --error-bg: #fdf0f0;
+  --error-border: #e8c4c4;
+}
+
+/* Dark theme — explicit toggle */
+[data-theme="dark"] {
+  --bg:      #1a1a1a;
+  --bg-alt:  #242420;
+  --text:    #d4d0c8;
+  --text-dim: #999;
+  --text-lt: #666;
+  --accent:  #d44040;
+  --accent-h: #e85050;
+  --border:  #3a3a36;
+  --border-lt: #2e2e2a;
+  --code-bg: #2a2a24;
+  --green:   #6aac58;
+  --blue:    #5b89c8;
+  --error-bg: #2a1a1a;
+  --error-border: #4a2a2a;
+}
+
+/* Dark theme — system preference fallback */
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme]) {
+    --bg:      #1a1a1a;
+    --bg-alt:  #242420;
+    --text:    #d4d0c8;
+    --text-dim: #999;
+    --text-lt: #666;
+    --accent:  #d44040;
+    --accent-h: #e85050;
+    --border:  #3a3a36;
+    --border-lt: #2e2e2a;
+    --code-bg: #2a2a24;
+    --green:   #6aac58;
+    --blue:    #5b89c8;
+    --error-bg: #2a1a1a;
+    --error-border: #4a2a2a;
+  }
 }
 
 /* ===========================
@@ -82,6 +122,20 @@ code {
   font-size: 0.8125rem;
   color: var(--text-dim);
 }
+.theme-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0.25rem;
+  line-height: 1;
+  color: var(--text-dim);
+}
+.theme-toggle:hover {
+  background: none;
+  border: none;
+  color: var(--text);
+}
 
 /* ===========================
    Page containers
@@ -147,9 +201,9 @@ code {
    Alerts
    =========================== */
 .error {
-  background: #fdf0f0;
+  background: var(--error-bg);
   color: var(--accent);
-  border: 1px solid #e8c4c4;
+  border: 1px solid var(--error-border);
   padding: 0.625rem 1rem;
   border-radius: 3px;
   margin-bottom: 1rem;
diff --git a/web/templates/layout.html b/web/templates/layout.html
index fbf813f..1932d38 100644
--- a/web/templates/layout.html
+++ b/web/templates/layout.html
@@ -5,20 +5,42 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>mcq{{block "title" .}}{{end}}</title>
     <link rel="stylesheet" href="/static/style.css">
+    <script>
+    (function(){var t=localStorage.getItem("theme");if(t)document.documentElement.setAttribute("data-theme",t)})();
+    </script>
 </head>
 <body>
     <nav class="topnav">
         <a href="/" class="topnav-brand">mcq</a>
-        {{if .Username}}
         <div class="topnav-right">
+            <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
+            {{if .Username}}
             <span class="topnav-user">{{.Username}}</span>
             <form method="POST" action="/logout" style="margin:0">
                 {{csrfField}}
                 <button type="submit" class="btn-ghost btn">Logout</button>
             </form>
+            {{end}}
         </div>
-        {{end}}
     </nav>
+    <script>
+    (function(){
+        var btn=document.getElementById("theme-toggle");
+        function isDark(){
+            var t=document.documentElement.getAttribute("data-theme");
+            if(t)return t==="dark";
+            return window.matchMedia("(prefers-color-scheme:dark)").matches;
+        }
+        function update(){btn.textContent=isDark()?"\u2600":"\u263D";}
+        btn.addEventListener("click",function(){
+            var next=isDark()?"light":"dark";
+            document.documentElement.setAttribute("data-theme",next);
+            localStorage.setItem("theme",next);
+            update();
+        });
+        update();
+    })();
+    </script>
     <div class="{{block "container-class" .}}page-container{{end}}">
         {{template "content" .}}
     </div>
