From fce356cd401c575cdad9c1ee744915105832e96a Mon Sep 17 00:00:00 2001
From: Yugonito <me@hcloez.fr>
Date: Mon, 6 Jul 2026 23:43:02 +0200
Subject: [PATCH] demo : bouton de bascule light/dark

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 demo/direction-dark-tech.html | 36 +++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/demo/direction-dark-tech.html b/demo/direction-dark-tech.html
index 66f6bd9..b3be444 100644
--- a/demo/direction-dark-tech.html
+++ b/demo/direction-dark-tech.html
@@ -251,8 +251,44 @@
 
   footer { color: var(--muted-fg); font-size: 13px; border-top: 1px solid var(--border); padding-top: 20px; }
   footer code { font-family: var(--font-mono); font-size: 12px; background: var(--muted); padding: 1.5px 6px; border-radius: 5px; }
+
+  .theme-toggle {
+    position: fixed; top: 18px; right: 18px; z-index: 10;
+    display: inline-flex; align-items: center; gap: 8px;
+    font: inherit; font-size: 13px; font-weight: 500;
+    padding: 7px 14px; border-radius: 999px; cursor: pointer;
+    background: var(--card); color: var(--foreground);
+    border: 1px solid var(--border); box-shadow: var(--shadow);
+  }
+  .theme-toggle:hover { border-color: var(--ring); }
+  .theme-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+  .theme-toggle .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--primary); }
 </style>
 
+<button class="theme-toggle" id="themeToggle" type="button" aria-label="Basculer le thème">
+  <span class="dot"></span><span id="themeLabel">Thème</span>
+</button>
+<script>
+  (function () {
+    var root = document.documentElement;
+    var btn = document.getElementById("themeToggle");
+    var label = document.getElementById("themeLabel");
+    function effective() {
+      var forced = root.getAttribute("data-theme");
+      if (forced === "dark" || forced === "light") return forced;
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    function refresh() {
+      label.textContent = effective() === "dark" ? "Passer en light" : "Passer en dark";
+    }
+    btn.addEventListener("click", function () {
+      root.setAttribute("data-theme", effective() === "dark" ? "light" : "dark");
+      refresh();
+    });
+    refresh();
+  })();
+</script>
+
 <div class="wrap">
   <header>
     <p class="eyebrow">@forgetaboutit/ui · proposition de direction</p>