diff --git a/frontend/src/components/GlassTuner.tsx b/frontend/src/components/GlassTuner.tsx index f922025..11a4f1e 100644 --- a/frontend/src/components/GlassTuner.tsx +++ b/frontend/src/components/GlassTuner.tsx @@ -104,6 +104,7 @@ export default function GlassTuner() { const [open, setOpen] = useState(() => initial.open ?? true); const [tab, setTab] = useState<"glass" | "palette">("glass"); const [copied, setCopied] = useState(false); + const [themeTick, setThemeTick] = useState(0); // Seed the colour pickers from the live scheme for display (without forcing them onto ). const [swatches, setSwatches] = useState>({}); @@ -173,8 +174,25 @@ export default function GlassTuner() { setSwatches(sw); } - // Export only what differs from the shipped defaults, ready to paste into index.css. + // Re-read the LIVE, theme-driven glass values into the sliders (clearing inline overrides first), + // so the panel reflects whatever theme is active — switch to light, hit this, and the opacity + // sliders show the light-theme values (index.css `html[data-theme="light"]`) ready to tune. + function syncToTheme() { + ALL.forEach((s) => root().style.removeProperty(s.k)); + const next: Record = { ...vars }; + ALL.forEach((s) => { + const n = parseFloat(readVar(s.k)); + if (!Number.isNaN(n)) next[s.k] = n; + }); + setVars(next); + persist({ vars: {} }); + setThemeTick((t) => t + 1); + } + + // Export the values that differ from the baseline, headered for the active theme's scope so a + // light-theme tune pastes into the right block. const cssOut = useMemo(() => { + void themeTick; // re-run when the active theme is re-synced const lines: string[] = []; ALL.forEach((s) => { if (vars[s.k] !== s.def) lines.push(` ${s.k}: ${vars[s.k]}${s.unit};`); @@ -182,8 +200,9 @@ export default function GlassTuner() { PALETTE.forEach((p) => { if (palette[p.k]) lines.push(` ${p.k}: ${palette[p.k]};`); }); - return lines.length ? `:root {\n${lines.join("\n")}\n}` : "/* all values at defaults */"; - }, [vars, palette]); + const scope = root().dataset.theme === "light" ? 'html[data-theme="light"]' : ":root"; + return lines.length ? `${scope} {\n${lines.join("\n")}\n}` : "/* all values at defaults */"; + }, [vars, palette, themeTick]); function copy() { navigator.clipboard?.writeText(cssOut).then(() => { @@ -293,6 +312,13 @@ export default function GlassTuner() { {/* Export */}
Export → bake in
+