From aca39ed5c8f2d470cb5c8616df58c2257142636b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Feb 2026 15:55:23 +0000
Subject: [PATCH 1/2] Initial plan
From db8fc6c536e2288e5fe16dc0547b99058eb2f090 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Feb 2026 16:01:14 +0000
Subject: [PATCH 2/2] Add dark/light theme toggle button to nav bar
Co-authored-by: brunoborges <129743+brunoborges@users.noreply.github.com>
---
site/app.js | 24 +++++++++++++
site/styles.css | 65 +++++++++++++++++++++++++++++++++++-
templates/index.html | 5 +++
templates/slug-template.html | 4 +++
4 files changed, 97 insertions(+), 1 deletion(-)
diff --git a/site/app.js b/site/app.js
index db6744f..fbce08c 100644
--- a/site/app.js
+++ b/site/app.js
@@ -547,6 +547,29 @@
window.updateViewToggleState = updateButtonState;
};
+ /* ==========================================================
+ 7. Theme Toggle
+ ========================================================== */
+ const initThemeToggle = () => {
+ const btn = document.getElementById('themeToggle');
+ if (!btn) return;
+
+ const updateButton = (theme) => {
+ btn.textContent = theme === 'dark' ? '☀️' : '🌙';
+ btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
+ };
+
+ // The anti-FOUC inline script already applied the theme; just sync the button state
+ updateButton(document.documentElement.getAttribute('data-theme') || 'dark');
+
+ btn.addEventListener('click', () => {
+ const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+ document.documentElement.setAttribute('data-theme', next);
+ localStorage.setItem('theme', next);
+ updateButton(next);
+ });
+ };
+
/* ==========================================================
Utilities
========================================================== */
@@ -569,5 +592,6 @@
initCopyButtons();
initSyntaxHighlighting();
initNewsletter();
+ initThemeToggle();
});
})();
diff --git a/site/styles.css b/site/styles.css
index 130e38b..1aa2085 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -96,6 +96,53 @@ code, pre { font-family: 'JetBrains Mono', monospace; }
}
}
+/* ---------- Manual Theme Override ---------- */
+:root[data-theme="light"] {
+ --bg: #f8f8fa;
+ --surface: #ffffff;
+ --surface-2: #f0f0f4;
+ --border: #d8d8e0;
+ --border-light: #e4e4ea;
+ --text: #1a1a2e;
+ --text-muted: #6b6b80;
+ --accent: #f97316;
+ --accent-dim: #ea580c;
+ --green: #059669;
+ --blue: #2563eb;
+ --pink: #db2777;
+ --orange: #ea580c;
+ --yellow: #ca8a04;
+ --cyan: #0891b2;
+ --red-muted: #dc2626;
+ --old-bg: #fef2f2;
+ --modern-bg: #eff6ff;
+ --nav-bg: rgba(248, 248, 250, .85);
+ color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+ --bg: #0b0b0f;
+ --surface: #14141a;
+ --surface-2: #1a1a22;
+ --border: #25252f;
+ --border-light: #2f2f3a;
+ --text: #e4e4e7;
+ --text-muted: #6b6b76;
+ --accent: #fb923c;
+ --accent-dim: #f97316;
+ --green: #34d399;
+ --blue: #60a5fa;
+ --pink: #f472b6;
+ --orange: #fb923c;
+ --yellow: #fbbf24;
+ --cyan: #22d3ee;
+ --red-muted: #ef4444;
+ --old-bg: #1a1412;
+ --modern-bg: #1a2838;
+ --nav-bg: rgba(11, 11, 15, .8);
+ color-scheme: dark;
+}
+
/* ---------- Base Body ---------- */
body {
background: var(--bg);
@@ -200,12 +247,28 @@ nav {
text-decoration: none;
}
-.github-link:hover {
+.github-link:hover,
+.theme-toggle:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--surface-2);
}
+.theme-toggle {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px;
+ border-radius: var(--radius-sm);
+ border: 1px solid var(--border);
+ background: var(--surface);
+ color: var(--text-muted);
+ font-size: 1rem;
+ line-height: 1;
+ transition: all 0.2s;
+ cursor: pointer;
+}
+
/* ---------- Hero ---------- */
.hero {
text-align: center;
diff --git a/templates/index.html b/templates/index.html
index d5e1dbe..47f648e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -41,6 +41,10 @@
+
+
@@ -96,6 +99,7 @@
+
← All patterns