From 4fab91af2f43232b4777f8acf5bacc5dafe70661 Mon Sep 17 00:00:00 2001
From: Christopher Mayor <toph.homelab@gmail.com>
Date: Tue, 3 Mar 2026 16:54:23 -0800
Subject: [PATCH] feat: add dark mode support

---
 public/app.js     | 33 +++++++++++++++++++++++++++++++++
 public/index.html |  1 +
 public/styles.css | 40 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+)

diff --git a/public/app.js b/public/app.js
index a9dbee0..37b9241 100644
--- a/public/app.js
+++ b/public/app.js
@@ -1,3 +1,36 @@
+function getPreferredTheme() {
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {
+    return savedTheme;
+  }
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function setTheme(theme) {
+  if (theme === 'dark') {
+    document.documentElement.setAttribute('data-theme', 'dark');
+    document.getElementById('theme-toggle').textContent = '☀️';
+  } else {
+    document.documentElement.removeAttribute('data-theme');
+    document.getElementById('theme-toggle').textContent = '🌙';
+  }
+  localStorage.setItem('theme', theme);
+}
+
+setTheme(getPreferredTheme());
+
+document.getElementById('theme-toggle').addEventListener('click', () => {
+  const currentTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
+  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+  setTheme(newTheme);
+});
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+  if (!localStorage.getItem('theme')) {
+    setTheme(e.matches ? 'dark' : 'light');
+  }
+});
+
 // Navigation
 const navLinks = document.querySelectorAll('.nav-link');
 const pages = document.querySelectorAll('.page');
diff --git a/public/index.html b/public/index.html
index 54699ff..7be77f4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,6 +16,7 @@
         <a href="#" class="nav-link" data-page="wiki">📚 Wiki</a>
         <a href="#" class="nav-link" data-page="agents">🤖 Agents</a>
         <a href="#" class="nav-link" data-page="usage">📊 Usage</a>
+        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">🌙</button>
       </div>
     </nav>
 
diff --git a/public/styles.css b/public/styles.css
index 931ccaa..f7f1c7d 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -5,6 +5,20 @@
 }
 
 :root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f6f8fa;
+  --bg-card: #ffffff;
+  --text-primary: #24292f;
+  --text-secondary: #57606a;
+  --accent: #f78166;
+  --border: #d0d7de;
+  --priority-high: #f85149;
+  --priority-medium: #d29922;
+  --priority-low: #3fb950;
+  --priority-critical: #ff6b6b;
+}
+
+[data-theme="dark"] {
   --bg-primary: #0f1419;
   --bg-secondary: #1a1f2e;
   --bg-card: #242b3d;
@@ -23,6 +37,7 @@ body {
   background: var(--bg-primary);
   color: var(--text-primary);
   min-height: 100vh;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 /* Navigation */
@@ -36,6 +51,7 @@ body {
   position: sticky;
   top: 0;
   z-index: 1000;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .nav-brand h1 {
@@ -66,6 +82,22 @@ body {
   color: white;
 }
 
+.theme-toggle {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1.2rem;
+  transition: all 0.2s;
+}
+
+.theme-toggle:hover {
+  background: var(--accent);
+  color: white;
+}
+
 /* Pages */
 .page {
   display: none;
@@ -80,6 +112,7 @@ body {
   padding: 1.5rem 2rem;
   background: var(--bg-secondary);
   border-bottom: 1px solid var(--border);
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .topbar h2 {
@@ -97,6 +130,7 @@ body {
   margin: 1rem;
   border-radius: 8px;
   border: 1px solid var(--border);
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .composer h3 {
@@ -154,6 +188,7 @@ body {
   display: flex;
   flex-direction: column;
   max-height: calc(100vh - 250px);
+  transition: background-color 0.3s ease;
 }
 
 .column-header {
@@ -189,6 +224,7 @@ body {
   margin-bottom: 0.5rem;
   cursor: pointer;
   border: 1px solid transparent;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .card:hover {
@@ -287,6 +323,7 @@ body {
   padding: 1rem;
   overflow-y: auto;
   max-height: calc(100vh - 220px);
+  transition: background-color 0.3s ease;
 }
 
 .wiki-item {
@@ -321,6 +358,7 @@ body {
   padding: 2rem;
   overflow-y: auto;
   max-height: calc(100vh - 220px);
+  transition: background-color 0.3s ease;
 }
 
 .wiki-content h1 {
@@ -364,6 +402,7 @@ body {
   border-radius: 8px;
   border: 1px solid var(--border);
   overflow: hidden;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .agent-header {
@@ -435,6 +474,7 @@ body {
   border-radius: 8px;
   border: 1px solid var(--border);
   padding: 1.5rem;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .provider-name {