hcloez/forgetaboutit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

demo : bouton de bascule light/dark

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Yugonito
2026-07-06 23:43:02 +02:00
parent b6185cd127
commit fce356cd40
1 changed files with 36 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/direction-dark-tech.html
+36
View File
@@ -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>