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

58
web/static/style.css
View File

@@ -16,6 +16,46 @@
--code-bg: #f0ede4; --code-bg: #f0ede4;
--green: #4a7c40; --green: #4a7c40;
--blue: #3b5998; --blue: #3b5998;
--error-bg: #fdf0f0;
--error-border: #e8c4c4;
}
/* Dark theme — explicit toggle */
[data-theme="dark"] {
--bg: #1a1a1a;
--bg-alt: #242420;
--text: #d4d0c8;
--text-dim: #999;
--text-lt: #666;
--accent: #d44040;
--accent-h: #e85050;
--border: #3a3a36;
--border-lt: #2e2e2a;
--code-bg: #2a2a24;
--green: #6aac58;
--blue: #5b89c8;
--error-bg: #2a1a1a;
--error-border: #4a2a2a;
}
/* Dark theme — system preference fallback */
@media (prefers-color-scheme: dark) {
html:not([data-theme]) {
--bg: #1a1a1a;
--bg-alt: #242420;
--text: #d4d0c8;
--text-dim: #999;
--text-lt: #666;
--accent: #d44040;
--accent-h: #e85050;
--border: #3a3a36;
--border-lt: #2e2e2a;
--code-bg: #2a2a24;
--green: #6aac58;
--blue: #5b89c8;
--error-bg: #2a1a1a;
--error-border: #4a2a2a;
}
} }
/* =========================== /* ===========================
@@ -82,6 +122,20 @@ code {
font-size: 0.8125rem; font-size: 0.8125rem;
color: var(--text-dim); color: var(--text-dim);
} }
.theme-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
padding: 0.25rem;
line-height: 1;
color: var(--text-dim);
}
.theme-toggle:hover {
background: none;
border: none;
color: var(--text);
}
/* =========================== /* ===========================
Page containers Page containers
@@ -147,9 +201,9 @@ code {
Alerts Alerts
=========================== */ =========================== */
.error { .error {
background: #fdf0f0; background: var(--error-bg);
color: var(--accent); color: var(--accent);
border: 1px solid #e8c4c4; border: 1px solid var(--error-border);
padding: 0.625rem 1rem; padding: 0.625rem 1rem;
border-radius: 3px; border-radius: 3px;
margin-bottom: 1rem; margin-bottom: 1rem;

26
web/templates/layout.html
View File

@@ -5,20 +5,42 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mcq{{block "title" .}}{{end}}</title> <title>mcq{{block "title" .}}{{end}}</title>
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css">
<script>
(function(){var t=localStorage.getItem("theme");if(t)document.documentElement.setAttribute("data-theme",t)})();
</script>
</head> </head>
<body> <body>
<nav class="topnav"> <nav class="topnav">
<a href="/" class="topnav-brand">mcq</a> <a href="/" class="topnav-brand">mcq</a>
{{if .Username}}
<div class="topnav-right"> <div class="topnav-right">
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
{{if .Username}}
<span class="topnav-user">{{.Username}}</span> <span class="topnav-user">{{.Username}}</span>
<form method="POST" action="/logout" style="margin:0"> <form method="POST" action="/logout" style="margin:0">
{{csrfField}} {{csrfField}}
<button type="submit" class="btn-ghost btn">Logout</button> <button type="submit" class="btn-ghost btn">Logout</button>
</form> </form>
{{end}}
</div> </div>
{{end}}
</nav> </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}}"> <div class="{{block "container-class" .}}page-container{{end}}">
{{template "content" .}} {{template "content" .}}
</div> </div>