brut/bincio-activity
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

bright/dark themes

Browse Source
This commit is contained in:
Davide Scaini
2026-03-30 09:03:53 +02:00
parent 1c49d3a769
commit 2a1493a3e5
2 changed files with 109 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/layouts/Base.astro
+106 -8
View File
@@ -6,36 +6,134 @@ interface Props {
const { title = 'BincioActivity', description = 'Your personal activity stats' } = Astro.props;
---
<!doctype html>
<html lang="en" class="dark">
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content={description} />
<title>{title}</title>
<style is:global>
:root {
--accent: #00c8ff;
--accent-dim: rgba(0,200,255,0.15);
<!-- Set theme before first paint to avoid flash -->
<script is:inline>
const t = localStorage.getItem('bincio-theme') || 'dark';
document.documentElement.setAttribute('data-theme', t);
</script>
<style is:global>
/* ── Theme tokens ─────────────────────────────────────────────────────── */
:root, [data-theme="dark"] {
--bg-base: #09090b; /* zinc-950 */
--bg-card: #18181b; /* zinc-900 */
--bg-elevated: #27272a; /* zinc-800 */
--bg-subtle: #3f3f46; /* zinc-700 */
--text-primary: #ffffff;
--text-2: #e4e4e7; /* zinc-200 */
--text-3: #d4d4d8; /* zinc-300 */
--text-4: #a1a1aa; /* zinc-400 */
--text-5: #71717a; /* zinc-500 */
--border: #27272a; /* zinc-800 */
--border-sub: #3f3f46; /* zinc-700 */
--accent: #00c8ff;
--accent-dim: rgba(0,200,255,0.15);
}
[data-theme="light"] {
--bg-base: #fafafa; /* zinc-50 */
--bg-card: #f4f4f5; /* zinc-100 */
--bg-elevated: #e4e4e7; /* zinc-200 */
--bg-subtle: #d4d4d8; /* zinc-300 */
--text-primary: #18181b; /* zinc-900 */
--text-2: #27272a; /* zinc-800 */
--text-3: #3f3f46; /* zinc-700 */
--text-4: #52525b; /* zinc-600 */
--text-5: #71717a; /* zinc-500 */
--border: #e4e4e7; /* zinc-200 */
--border-sub: #d4d4d8; /* zinc-300 */
--accent: #0284c7; /* sky-600 */
--accent-dim: rgba(2,132,199,0.12);
}
/* ── Tailwind zinc overrides for light mode ────────────────────────────
Overrides hardcoded Tailwind classes from all components in one place.
!important needed to beat Tailwind's generated specificity. */
[data-theme="light"] .bg-zinc-950 { background-color: var(--bg-base) !important; }
[data-theme="light"] .bg-zinc-900 { background-color: var(--bg-card) !important; }
[data-theme="light"] .bg-zinc-800 { background-color: var(--bg-elevated) !important; }
[data-theme="light"] .bg-zinc-700 { background-color: var(--bg-subtle) !important; }
[data-theme="light"] .text-white { color: var(--text-primary) !important; }
[data-theme="light"] .text-zinc-100{ color: var(--text-primary) !important; }
[data-theme="light"] .text-zinc-200{ color: var(--text-2) !important; }
[data-theme="light"] .text-zinc-300{ color: var(--text-3) !important; }
[data-theme="light"] .text-zinc-400{ color: var(--text-4) !important; }
[data-theme="light"] .text-zinc-500{ color: var(--text-5) !important; }
[data-theme="light"] .border-zinc-800 { border-color: var(--border) !important; }
[data-theme="light"] .border-zinc-700 { border-color: var(--border-sub) !important; }
/* Opacity variants (nav backdrop, tooltips, overlays) */
[data-theme="light"] .bg-zinc-950\/90 { background-color: rgba(250,250,250,0.92) !important; }
[data-theme="light"] .bg-zinc-900\/95 { background-color: rgba(244,244,245,0.95) !important; }
/* Soften shadows in light mode */
[data-theme="light"] .shadow-2xl {
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.12) !important;
}
/* ── Base reset ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
/* MapLibre GL needs these */
.maplibregl-canvas { outline: none; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased min-h-screen">
<nav class="border-b border-zinc-800 sticky top-0 z-50 bg-zinc-950/90 backdrop-blur">
<body
class="font-sans antialiased min-h-screen"
style="background-color: var(--bg-base); color: var(--text-primary)"
>
<nav
class="border-b border-zinc-800 sticky top-0 z-50 bg-zinc-950/90 backdrop-blur"
style="border-color: var(--border)"
>
<div class="max-w-7xl mx-auto px-4 h-12 flex items-center gap-6">
<a href="/" class="font-bold text-white tracking-tight hover:text-[--accent] transition-colors">
Bincio<span class="text-[--accent]">Activity</span>
</a>
<a href="/" class="text-sm text-zinc-400 hover:text-white transition-colors">Feed</a>
<a href="/stats/" class="text-sm text-zinc-400 hover:text-white transition-colors">Stats</a>
<a href="/athlete/" class="text-sm text-zinc-400 hover:text-white transition-colors">Athlete</a>
<div class="ml-auto">
<button
id="theme-toggle"
class="text-zinc-400 hover:text-white transition-colors w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-800 text-base"
aria-label="Toggle theme"
>☀</button>
</div>
</div>
</nav>
<main class="max-w-7xl mx-auto px-4 py-6">
<slot />
</main>
<script>
const btn = document.getElementById('theme-toggle') as HTMLButtonElement;
function applyTheme(theme: string) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('bincio-theme', theme);
btn.textContent = theme === 'dark' ? '☀' : '☾';
btn.title = theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
}
// Sync icon with current theme (set by inline script above)
const current = document.documentElement.getAttribute('data-theme') || 'dark';
applyTheme(current);
btn.addEventListener('click', () => {
const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
applyTheme(next);
});
</script>
</body>
</html>