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>
42 lines
1.6 KiB
HTML
42 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Settings — AgentFeed</title>
|
|
<link rel="stylesheet" href="/static/daybook.css">
|
|
<script>
|
|
// Set the theme before first paint so dark-mode users never see a light flash.
|
|
(function () {
|
|
try {
|
|
if (localStorage.getItem("daybook.theme") === "dark") {
|
|
document.documentElement.setAttribute("data-theme", "dark");
|
|
}
|
|
} catch (e) {}
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
{% include "artifacts/_topbar.html" %}
|
|
|
|
<main class="settings-layout">
|
|
<nav class="settings-nav">
|
|
<a class="settings-nav-back" href="{% url 'feed' %}">← Back to Feed</a>
|
|
<a class="{% if active_section == 'account' %}selected{% endif %}" href="{% url 'settings-account' %}">Account</a>
|
|
<a class="{% if active_section == 'storage' %}selected{% endif %}" href="{% url 'settings-storage' %}">Storage</a>
|
|
<a class="{% if active_section == 'demo-data' %}selected{% endif %}" href="{% url 'settings-demo-data' %}">Demo Data</a>
|
|
{% if request.user.is_superuser %}
|
|
<a class="{% if active_section == 'users' %}selected{% endif %}" href="{% url 'settings-users' %}">Users</a>
|
|
{% endif %}
|
|
</nav>
|
|
<section class="settings-panel">
|
|
{% if messages %}
|
|
<ul class="settings-messages">
|
|
{% for message in messages %}<li>{{ message }}</li>{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
{% block settings_content %}{% endblock %}
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|