Kyle Isom
940993a2e3
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>
49 lines
1.7 KiB
HTML
49 lines
1.7 KiB
HTML
{{define "layout"}}<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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>
|
|
<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>
|
|
</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>
|
|
</body>
|
|
</html>{{end}}
|