peter
9a3b381f39
The UI stylesheet already centralized its palette in a :root block, so this mostly meant (1) migrating the ~30 colors still hardcoded in rules into variables so they flip in one place, and (2) adding a [data-theme="dark"] override palette. Artifact rendering is untouched — those use the separate static/themes/*.css and the preview backdrop stays white by design, since artifacts (charts, reports) are authored light. - Toggle lives in the gear-menu dropdown (Dark mode / Light mode), persists to localStorage. - A tiny inline script in each page <head> (feed, settings, login) applies the stored theme before first paint, so dark-mode users never see a white flash on load. - color-scheme: dark on the dark palette makes native form controls (inputs, buttons) render dark too. - Semantic accents (kept=green, shared=blue, today, danger) got dark-appropriate variants; status/data-viz colors (usage bar, tag chips) and the white artifact backdrop are intentionally left as-is. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
58 lines
2.3 KiB
HTML
58 lines
2.3 KiB
HTML
<header class="topbar">
|
|
<div class="brandline">
|
|
<a class="brand-link" href="{% url 'feed' %}"><h1>AgentFeed</h1></a>
|
|
</div>
|
|
<div class="toolbar">
|
|
{% if topbar_toolbar %}{% include topbar_toolbar %}{% endif %}
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<button class="icon-button" type="button" data-user-menu-toggle aria-haspopup="true" aria-expanded="false" title="{{ request.user.username }}">
|
|
⚙ {{ request.user.username }}
|
|
</button>
|
|
<div class="user-menu-dropdown" hidden data-user-menu>
|
|
<a href="{% url 'settings-account' %}">Settings</a>
|
|
<a href="{% url 'settings-demo-data' %}">Demo Data</a>
|
|
<button type="button" data-theme-toggle>Dark mode</button>
|
|
<form method="post" action="{% url 'logout' %}">{% csrf_token %}<button type="submit">Log out</button></form>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<script>
|
|
(() => {
|
|
const toggle = document.querySelector("[data-user-menu-toggle]");
|
|
const menu = document.querySelector("[data-user-menu]");
|
|
if (!toggle || !menu) return;
|
|
toggle.addEventListener("click", (event) => {
|
|
event.stopPropagation();
|
|
const isHidden = menu.hidden;
|
|
menu.hidden = !isHidden;
|
|
toggle.setAttribute("aria-expanded", String(isHidden));
|
|
});
|
|
document.addEventListener("click", (event) => {
|
|
if (!menu.hidden && !menu.contains(event.target) && event.target !== toggle) {
|
|
menu.hidden = true;
|
|
toggle.setAttribute("aria-expanded", "false");
|
|
}
|
|
});
|
|
|
|
const themeToggle = document.querySelector("[data-theme-toggle]");
|
|
if (themeToggle) {
|
|
const syncLabel = () => {
|
|
const isDark = document.documentElement.getAttribute("data-theme") === "dark";
|
|
themeToggle.textContent = isDark ? "Light mode" : "Dark mode";
|
|
};
|
|
syncLabel();
|
|
themeToggle.addEventListener("click", () => {
|
|
const isDark = document.documentElement.getAttribute("data-theme") === "dark";
|
|
if (isDark) {
|
|
document.documentElement.removeAttribute("data-theme");
|
|
try { localStorage.setItem("daybook.theme", "light"); } catch (e) {}
|
|
} else {
|
|
document.documentElement.setAttribute("data-theme", "dark");
|
|
try { localStorage.setItem("daybook.theme", "dark"); } catch (e) {}
|
|
}
|
|
syncLabel();
|
|
});
|
|
}
|
|
})();
|
|
</script>
|