mc/mcq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add light/dark theme toggle

Browse Source 
CSS custom properties overridden via [data-theme="dark"] with
prefers-color-scheme fallback. Toggle in nav persists choice to
localStorage. No Go changes — CSS and template only.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kyle Isom
2026-03-28 21:55:24 -07:00
parent afe14abe77
commit 940993a2e3
2 changed files with 80 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/templates/layout.html
View File

@@ -5,20 +5,42 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mcq{{block "title" .}}{{end}}</title>
<link rel="stylesheet" href="/static/style.css">
<script>
(function(){var t=localStorage.getItem("theme");if(t)document.documentElement.setAttribute("data-theme",t)})();
</script>
</head>
<body>
<nav class="topnav">
<a href="/" class="topnav-brand">mcq</a>
{{if .Username}}
<div class="topnav-right">
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
{{if .Username}}
<span class="topnav-user">{{.Username}}</span>
<form method="POST" action="/logout" style="margin:0">
{{csrfField}}
<button type="submit" class="btn-ghost btn">Logout</button>
</form>
{{end}}
</div>
{{end}}
</nav>
<script>
(function(){
var btn=document.getElementById("theme-toggle");
function isDark(){
var t=document.documentElement.getAttribute("data-theme");
if(t)return t==="dark";
return window.matchMedia("(prefers-color-scheme:dark)").matches;
}
function update(){btn.textContent=isDark()?"\u2600":"\u263D";}
btn.addEventListener("click",function(){
var next=isDark()?"light":"dark";
document.documentElement.setAttribute("data-theme",next);
localStorage.setItem("theme",next);
update();
});
update();
})();
</script>
<div class="{{block "container-class" .}}page-container{{end}}">
{{template "content" .}}
</div>