peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): stronger ambient + more translucent glass in dark mode

Browse source 
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.
This commit is contained in:
npeter83 2026-06-16 01:20:40 +02:00
parent 67e518f7ef
commit 36c7a649ab
1 changed files with 16 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/index.css
View file

@ -63,6 +63,22 @@ body {
0 14px 30px -14px rgba(0, 0, 0, 0.5); 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. */ /* Performance mode (Settings → Appearance) drops the expensive blur + soft shadows. */
html[data-perf="1"] .glass, html[data-perf="1"] .glass,
html[data-perf="1"] .glass-card { html[data-perf="1"] .glass-card {