2603.11 added dark/light mode

includes/style.php

@@ -13,6 +13,20 @@
   --yellow:  #d29922;
 }
 
+[data-theme="light"] {
+  --bg:      #ffffff;
+  --surface: #f6f8fa;
+  --border:  #d0d7de;
+  --text:    #1f2328;
+  --muted:   #656d76;
+  --accent:  #0969da;
+  --green:   #1a7f37;
+  --red:     #cf222e;
+  --yellow:  #9a6700;
+}
+
+*, *::before, *::after { transition: background-color .2s, border-color .2s, color .2s; }
+
 body { background: var(--bg); color: var(--text); font: 14px/1.6 'Segoe UI', system-ui, sans-serif; }
 
 header {
@@ -64,7 +78,7 @@ label input[type=text], label input[type=url], label input[type=password], label
 label input:focus { outline: none; border-color: var(--accent); }
 
 button[type=submit], .btn {
-  background: var(--accent); color: #0d1117; border: none; border-radius: 5px;
+  background: var(--accent); color: #fff; border: none; border-radius: 5px;
   padding: .5rem 1.1rem; font-size: .9rem; font-weight: 600; cursor: pointer;
 }
 button[type=submit]:hover { opacity: .85; }
@@ -95,3 +109,10 @@ footer {
   border-top: 1px solid var(--border);
 }
 footer span { color: var(--accent); }
+
+.theme-toggle {
+  background: none; border: 1px solid var(--border); border-radius: 5px;
+  color: var(--muted); cursor: pointer; font-size: .8rem;
+  padding: .2rem .55rem; line-height: 1.6;
+}
+.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

includes/theme_toggle.php

@@ -0,0 +1,16 @@
+<button class="theme-toggle" id="theme-toggle" title="Toggle theme" onclick="
+  var next = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
+  document.documentElement.setAttribute('data-theme', next);
+  localStorage.setItem('theme', next);
+  this.textContent = next === 'dark' ? '☀' : '☾';
+">☀</button>
+<script>
+  (function(){
+    var t = localStorage.getItem('theme') || 'dark';
+    document.documentElement.setAttribute('data-theme', t);
+    document.addEventListener('DOMContentLoaded', function(){
+      var btn = document.getElementById('theme-toggle');
+      if (btn) btn.textContent = t === 'dark' ? '☀' : '☾';
+    });
+  })();
+</script>