fix(v3): make equipped theme recolor the sidebar background (#570)

Equipping a cosmetic theme recolored text, fb-* utility surfaces, and
body, but the left sidebar's navy radial wash stayed on its default — so
the interface read as "only the fonts change, not the backgrounds".

Cause: #v3-sidebar is painted with a hardcoded radial-gradient in v3.css
and carries no fb-* utility class, so theme-core's per-utility override
loop never reaches it (#1e293b == default card, #0f172a == default bg).

Extend cssFor() — which already special-cases body — to re-point the
sidebar gradient at the theme, gated by html[data-fb-theme] so the
default (no-theme) look is untouched. Only background-image is overridden,
preserving v3.css's background-attachment:fixed.

Verified in Chromium against the real tailwind.min.css + v3.css +
theme-core.js: default = navy gradient (unthemed), apply() recolors the
sidebar to the theme's card->bg stops, apply(null) reverts to navy.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Byron Gamatos
2026-06-22 14:25:39 +02:00
committed by GitHub
co-authored by Claude Opus 4.8
parent 5d0229fc82
commit a07edd9971
+12
View File
@@ -58,6 +58,18 @@
// The app shell paints body via bg-fb-sidebar (covered above); cover a
// bare body too so the radial-gradient fallback areas follow the theme.
rules += 'html[data-fb-theme] body { background-color: rgb(var(--fbv-sidebar)); color: rgb(var(--fbv-text)); }\n';
// The sidebar's navy radial wash is hardcoded in v3.css (#v3-sidebar)
// and carries NO fb-* utility class, so the per-utility loop above
// can't reach it — it stayed navy under every theme, the most visible
// "backgrounds don't change" gap. Re-point it at the theme, mirroring
// v3.css's stops (#1e293b == default card, #0f172a == default bg).
// Only background-image is overridden, so background-attachment:fixed
// from v3.css is preserved. Gated by [data-fb-theme] => default look
// untouched. (Scroll-thumb colors are deliberately left alone: theming
// the resting thumb would out-specify v3.css's :hover lighten rule and
// kill it, and there's no palette token between border and textDim to
// reproduce the hover shade without color-mix, unused here.)
rules += 'html[data-fb-theme] #v3-sidebar { background-image: radial-gradient(circle at top, rgb(var(--fbv-card)) 0%, rgb(var(--fbv-bg)) 100%); }\n';
return 'html[data-fb-theme] {\n' + vars + '}\n' + rules;
}