From 109a17e044ff61014369cf0b37d71cd779645cd3 Mon Sep 17 00:00:00 2001
From: Kjell Tore Guttormsen <hello@fromaitochitta.com>
Date: Sun, 10 May 2026 10:29:27 +0200
Subject: [PATCH] feat(voyage): add theme toggle button + delegated handler

---
 .../voyage/playground/voyage-playground.html  | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/plugins/voyage/playground/voyage-playground.html b/plugins/voyage/playground/voyage-playground.html
index f7cc0c4..d74fff3 100644
--- a/plugins/voyage/playground/voyage-playground.html
+++ b/plugins/voyage/playground/voyage-playground.html
@@ -478,6 +478,11 @@
   <header class="app-header">
     <div class="app-header__title">Voyage Annotation Playground</div>
     <div class="app-header__meta">v4.2 · brief / plan / review</div>
+    <div class="app-header__actions" role="group" aria-label="Hovednavigasjon">
+      <button type="button" class="theme-toggle" data-action="toggle-theme" aria-label="Bytt tema">
+        <span data-theme-label aria-hidden="true">☀</span>
+      </button>
+    </div>
   </header>
   <main id="main">
     <section
@@ -1494,6 +1499,31 @@ playground first-run shows a complete round-trip-able artifact.
 
         // Step 11 — export-flow wiring
         wireExport();
+
+        // Step 7 (v4.3) — theme-toggle button (delegated data-action handler)
+        // Sun icon (☀) in dark mode, moon icon (☾) in light mode. Click toggles
+        // data-theme + colorScheme, persists to localStorage('voyage-theme').
+        wireThemeToggle();
+      }
+
+      function setThemeLabel(theme) {
+        var lbl = document.querySelector('[data-theme-label]');
+        if (lbl) lbl.textContent = theme === 'light' ? '☾' : '☀';
+      }
+
+      function wireThemeToggle() {
+        var initial = document.documentElement.getAttribute('data-theme') || 'dark';
+        setThemeLabel(initial);
+        document.addEventListener('click', function (e) {
+          var btn = e.target && e.target.closest && e.target.closest('[data-action="toggle-theme"]');
+          if (!btn) return;
+          var cur = document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+          var next = cur === 'light' ? 'dark' : 'light';
+          document.documentElement.setAttribute('data-theme', next);
+          document.documentElement.style.colorScheme = next;
+          try { localStorage.setItem('voyage-theme', next); } catch (err) { /* file:// + privatmodus */ }
+          setThemeLabel(next);
+        });
       }
 
       if (document.readyState === 'loading') {