open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions

feat(voyage): add theme toggle button + delegated handler

Browse source
This commit is contained in:
Kjell Tore Guttormsen 2026-05-10 10:29:27 +02:00
commit 109a17e044
1 changed files with 30 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

30
plugins/voyage/playground/voyage-playground.html
View file

@ -478,6 +478,11 @@
<header class="app-header"> <header class="app-header">
<div class="app-header__title">Voyage Annotation Playground</div> <div class="app-header__title">Voyage Annotation Playground</div>
<div class="app-header__meta">v4.2 · brief / plan / review</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> </header>
<main id="main"> <main id="main">
<section <section
@ -1494,6 +1499,31 @@ playground first-run shows a complete round-trip-able artifact.
// Step 11 — export-flow wiring // Step 11 — export-flow wiring
wireExport(); 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') { if (document.readyState === 'loading') {