From 36c7a649abff6ea14afe35660da96307a4fd720f Mon Sep 17 00:00:00 2001 From: npeter83 Date: Tue, 16 Jun 2026 01:20:40 +0200 Subject: [PATCH] feat(ui): stronger ambient + more translucent glass in dark mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In dark mode the faint accent pools left the docked frosted chrome (nav/header) looking flat — no content behind it to refract, unlike dialogs over the feed. Boost the dark-mode ambient pools and make .glass a bit more translucent there so the chrome reads as glass near the accent pools. Light mode unchanged. The full app-wide dark effect still needs Phase 2 (ambient content/mosaic), deferred. --- frontend/src/index.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/frontend/src/index.css b/frontend/src/index.css index 2a202f9..4b09812 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -63,6 +63,22 @@ body { 0 14px 30px -14px rgba(0, 0, 0, 0.5); } +/* Dark mode: the ambient accent pools are faint over a near-black bg, so the docked frosted + chrome (nav/header) barely reads — there's no content behind it to refract, unlike dialogs + which sit over the feed. Strengthen the pools and let a touch more bleed through the glass. + (The full "videos behind glass everywhere" effect is Phase 2 / end-of-project polish.) */ +html[data-theme="dark"] body { + background: + radial-gradient(1100px 620px at 10% -10%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 60%), + radial-gradient(1000px 720px at 115% 10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 55%), + radial-gradient(900px 640px at 50% 118%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), + var(--bg); + background-attachment: fixed; +} +html[data-theme="dark"] .glass { + background: color-mix(in srgb, var(--surface) 66%, transparent); +} + /* Performance mode (Settings → Appearance) drops the expensive blur + soft shadows. */ html[data-perf="1"] .glass, html[data-perf="1"] .glass-card {