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
static/style.css
+109
View File
@@ -15,9 +15,28 @@
--orange-bg: #fff3e0; --orange-bg: #fff3e0;
--gray-bg: #f0f0f0; --gray-bg: #f0f0f0;
--primary: #1565c0; --primary: #1565c0;
--primary-bg: #e3f2fd;
--radius: 8px; --radius: 8px;
} }
/* ── Dark mode ── */
[data-theme="dark"] {
--bg: #1a1a2e;
--surface: #16213e;
--text: #e0e0e0;
--muted: #999;
--border: #2a2a4a;
--green: #66bb6a;
--green-bg: #1b3a1b;
--red: #ef5350;
--red-bg: #3a1b1b;
--orange: #ff9800;
--orange-bg: #3a2e1b;
--gray-bg: #2a2a3a;
--primary: #64b5f6;
--primary-bg: #1a2a3a;
}
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--bg); background: var(--bg);
@@ -358,3 +377,93 @@ body {
width: auto; width: auto;
} }
} }
/* ── Dark mode overrides for non-variable colors ── */
[data-theme="dark"] body {
color-scheme: dark;
}
[data-theme="dark"] .btn:hover {
background: #2a2a4a;
}
[data-theme="dark"] .btn-primary {
color: #1a1a2e;
}
[data-theme="dark"] .btn-primary:hover {
background: #42a5f5;
}
[data-theme="dark"] .btn-danger:hover {
background: #d32f2f;
}
[data-theme="dark"] .nav-household {
background: var(--primary-bg);
color: var(--primary);
}
[data-theme="dark"] .you-tag {
background: var(--primary-bg);
}
[data-theme="dark"] .chip-yes.active {
color: #1a1a2e;
}
[data-theme="dark"] .chip-no.active {
color: #1a1a2e;
}
[data-theme="dark"] .badge-yes,
[data-theme="dark"] .badge-no {
color: #1a1a2e;
}
[data-theme="dark"] .meal-table th {
background: #1a1a30;
}
[data-theme="dark"] .public-url-box {
background: #1a1a30;
}
[data-theme="dark"] .lang-link:hover {
background: #2a2a4a;
color: var(--text);
}
[data-theme="dark"] .lang-active {
color: #1a1a2e;
}
[data-theme="dark"] .lang-active:hover {
background: #42a5f5;
color: #1a1a2e;
}
[data-theme="dark"] .flash-error {
background: #3a1b1b;
color: #ef5350;
border-color: #5a2a2a;
}
[data-theme="dark"] .flash-success {
background: #1b3a1b;
color: #66bb6a;
border-color: #2a5a2a;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
background: #1a1a30;
color: var(--text);
border-color: var(--border);
}
[data-theme="dark"] input::placeholder {
color: #666;
}
[data-theme="dark"] .manage-form {
border-color: var(--border);
}
/* ── Dark mode toggle button ── */
.theme-toggle {
background: none;
border: 1px solid var(--border);
border-radius: 20px;
cursor: pointer;
font-size: 1rem;
padding: 4px 10px;
line-height: 1;
color: var(--text);
transition: background 0.15s;
}
.theme-toggle:hover {
background: var(--gray-bg);
}
templates/base.html
+29 -1
View File
@@ -1,16 +1,25 @@
<!doctype html> <!doctype html>
<html lang="{{ lang }}"> <html lang="{{ lang }}" data-theme="light">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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> <title>{% block title %}{{ t('Meal Tracker') }}{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> <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> </head>
<body> <body>
<nav class="navbar"> <nav class="navbar">
<span class="brand">🍽 {{ t('Meal Tracker') }}</span> <span class="brand">🍽 {{ t('Meal Tracker') }}</span>
{% if session.user_id %} {% if session.user_id %}
<div class="nav-right"> <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-household">{{ session.household_name }}</span>
<span class="nav-user">{{ session.username }}{% if session.is_admin %} ({{ t('admin') }}){% endif %}</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> <a class="btn btn-sm" href="{{ url_for('auth.logout') }}">{{ t('Logout') }}</a>
@@ -39,5 +48,24 @@
aria-label="{{ name }}">{{ code.upper() }}</a> aria-label="{{ name }}">{{ code.upper() }}</a>
{% endfor %} {% endfor %}
</footer> </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> </body>
</html> </html>
templates/public.html
+28 -1
View File
@@ -1,16 +1,26 @@
<!doctype html> <!doctype html>
<html lang="{{ lang }}"> <html lang="{{ lang }}" data-theme="light">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow">
<meta name="color-scheme" content="light dark">
<title>{{ household.name }} — {{ t('Meal Tracker') }}</title> <title>{{ household.name }} — {{ t('Meal Tracker') }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> <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> </head>
<body class="public-page"> <body class="public-page">
<nav class="navbar"> <nav class="navbar">
<span class="brand">🍽 {{ household.name }}</span> <span class="brand">🍽 {{ household.name }}</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> <span class="nav-household">{{ viewing_date.isoformat() }}</span>
</div>
</nav> </nav>
<main class="container"> <main class="container">
@@ -73,5 +83,22 @@
aria-label="{{ name }}">{{ code.upper() }}</a> aria-label="{{ name }}">{{ code.upper() }}</a>
{% endfor %} {% endfor %}
</footer> </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> </body>
</html> </html>