From 72a690cbc8840d803f04b6faf3a5dc4673be52e7 Mon Sep 17 00:00:00 2001
From: bitcoinafterlife <info@bitcoin-after.life>
Date: Fri, 23 Oct 2026 16:21:24 +0200
Subject: [PATCH] Explainer preview: always start light, add a light/dark
 button

- the pages start in the light theme also on phones set to dark mode
- new light/dark button next to the music and sound buttons
---
 preview-2a86b5/index.html  | 2 ++
 preview-2a86b5/simple.html | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/preview-2a86b5/index.html b/preview-2a86b5/index.html
index 4e24506..e0555aa 100644
--- a/preview-2a86b5/index.html
+++ b/preview-2a86b5/index.html
@@ -15,6 +15,7 @@
 <meta name="twitter:title" content="How the BAL Protocol works">
 <meta name="twitter:description" content="Animated guide in 15 steps, with voice in English, Italian and Spanish: how will-executors deliver your bitcoin to your heirs, without ever holding your keys.">
 <meta name="twitter:image" content="https://bitcoin-after.life/preview-2a86b5/cover.jpg">
+<script>document.documentElement.setAttribute("data-theme","light")</script>
 <title data-k="title">Come funziona BAL PROTOCOL</title>
 <meta name="claude:viewport-fit-sides" content="cover">
 <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -401,6 +402,7 @@ svg.tips .tip{opacity:1}
     <div class="langs" role="group" aria-label="Language"><button type="button" data-lang="en">EN</button><button type="button" data-lang="it">IT</button><button type="button" data-lang="es">ES</button></div>
     <span class="sndhint" id="sndhint" data-k="tapSound" hidden>tocca per il suono</span>
     <button class="snd" id="mus" type="button" data-t="music" aria-pressed="true"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M9 17V5l11-2v12" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><circle cx="6.5" cy="17.5" r="2.8" fill="currentColor"/><circle cx="17.5" cy="15.5" r="2.8" fill="currentColor"/><path class="mute" d="M3 3l18 18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg></button>
+    <button class="snd" id="thm" type="button" title="Light / dark" aria-label="Light / dark" onclick="var r=document.documentElement;r.setAttribute('data-theme',r.getAttribute('data-theme')==='dark'?'light':'dark')"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
     <button class="snd" id="snd" type="button" data-t="sound" aria-pressed="true"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M4 9h4l5-4v14l-5-4H4z" fill="currentColor"/><path class="wave" d="M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path class="mute" d="M16 9l5 6M21 9l-5 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
     </div>
   </div>
diff --git a/preview-2a86b5/simple.html b/preview-2a86b5/simple.html
index d41a9bc..51f58d0 100644
--- a/preview-2a86b5/simple.html
+++ b/preview-2a86b5/simple.html
@@ -15,6 +15,7 @@
 <meta name="twitter:title" content="How the BAL Protocol works (simple version)">
 <meta name="twitter:description" content="Animated guide in 8 steps, with voice in English, Italian and Spanish: how will-executors deliver your bitcoin to your heirs, without ever holding your keys.">
 <meta name="twitter:image" content="https://bitcoin-after.life/preview-2a86b5/cover.jpg">
+<script>document.documentElement.setAttribute("data-theme","light")</script>
 <title data-k="title">Come funziona BAL PROTOCOL</title>
 <meta name="claude:viewport-fit-sides" content="cover">
 <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -401,6 +402,7 @@ svg.tips .tip{opacity:1}
     <div class="langs" role="group" aria-label="Language"><button type="button" data-lang="en">EN</button><button type="button" data-lang="it">IT</button><button type="button" data-lang="es">ES</button></div>
     <span class="sndhint" id="sndhint" data-k="tapSound" hidden>tocca per il suono</span>
     <button class="snd" id="mus" type="button" data-t="music" aria-pressed="true"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M9 17V5l11-2v12" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><circle cx="6.5" cy="17.5" r="2.8" fill="currentColor"/><circle cx="17.5" cy="15.5" r="2.8" fill="currentColor"/><path class="mute" d="M3 3l18 18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg></button>
+    <button class="snd" id="thm" type="button" title="Light / dark" aria-label="Light / dark" onclick="var r=document.documentElement;r.setAttribute('data-theme',r.getAttribute('data-theme')==='dark'?'light':'dark')"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
     <button class="snd" id="snd" type="button" data-t="sound" aria-pressed="true"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M4 9h4l5-4v14l-5-4H4z" fill="currentColor"/><path class="wave" d="M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path class="mute" d="M16 9l5 6M21 9l-5 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
     </div>
   </div>