romane/agentbox-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark mode toggle for the web UI
CI / test-and-package (push) Successful in 1m13s
Details
CI / build-android (push) Successful in 1m41s
Details

Browse Source 
- CSS variables for dark theme: surface, text, borders, accents
- Dark mode overrides for all hardcoded colors (buttons, tags,
  flashes, inputs, table headers, code blocks)
- Toggle button (☀️/🌙) in navbar, saved to localStorage
- Inline script applies saved theme before page render (no flash)
- Applied to both base.html and public.html
- System color-scheme meta tag for native browser chrome
This commit is contained in:
agentbox
2026-08-01 13:19:19 +00:00
parent 11d111fe83
commit b41c1ade44
3 changed files with 167 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/base.html
+29 -1
View File
@@ -1,16 +1,25 @@
<!doctype html>
<html lang="{{ lang }}">
<html lang="{{ lang }}" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>{% block title %}{{ t('Meal Tracker') }}{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<script>
// Apply saved theme immediately to avoid flash
(function() {
var t = localStorage.getItem('mealtracker-theme');
if (t === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
})();
</script>
</head>
<body>
<nav class="navbar">
<span class="brand">🍽 {{ t('Meal Tracker') }}</span>
{% if session.user_id %}
<div class="nav-right">
<button class="theme-toggle" id="theme-toggle" title="Toggle dark mode" aria-label="Toggle dark mode">☀️</button>
<span class="nav-household">{{ session.household_name }}</span>
<span class="nav-user">{{ session.username }}{% if session.is_admin %} ({{ t('admin') }}){% endif %}</span>
<a class="btn btn-sm" href="{{ url_for('auth.logout') }}">{{ t('Logout') }}</a>
@@ -39,5 +48,24 @@
aria-label="{{ name }}">{{ code.upper() }}</a>
{% endfor %}
</footer>
<script>
(function() {
var btn = document.getElementById('theme-toggle');
var html = document.documentElement;
function setIcon() {
btn.textContent = html.getAttribute('data-theme') === 'dark' ? '🌙' : '☀️';
}
setIcon();
btn.addEventListener('click', function() {
var next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', next);
localStorage.setItem('mealtracker-theme', next);
setIcon();
});
})();
</script>
</body>
</html>
templates/public.html
+29 -2
View File
@@ -1,16 +1,26 @@
<!doctype html>
<html lang="{{ lang }}">
<html lang="{{ lang }}" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<meta name="color-scheme" content="light dark">
<title>{{ household.name }} — {{ t('Meal Tracker') }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<script>
(function() {
var t = localStorage.getItem('mealtracker-theme');
if (t === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
})();
</script>
</head>
<body class="public-page">
<nav class="navbar">
<span class="brand">🍽 {{ household.name }}</span>
<span class="nav-household">{{ viewing_date.isoformat() }}</span>
<div class="nav-right">
<button class="theme-toggle" id="theme-toggle" title="Toggle dark mode" aria-label="Toggle dark mode">☀️</button>
<span class="nav-household">{{ viewing_date.isoformat() }}</span>
</div>
</nav>
<main class="container">
@@ -73,5 +83,22 @@
aria-label="{{ name }}">{{ code.upper() }}</a>
{% endfor %}
</footer>
<script>
(function() {
var btn = document.getElementById('theme-toggle');
var html = document.documentElement;
function setIcon() {
btn.textContent = html.getAttribute('data-theme') === 'dark' ? '🌙' : '☀️';
}
setIcon();
btn.addEventListener('click', function() {
var next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', next);
localStorage.setItem('mealtracker-theme', next);
setIcon();
});
})();
</script>
</body>
</html>