What
When the flyer palette is set to black & white, render the logo in grayscale in the preview and output (screenshot / Download HTML / Print-PDF) only — without ever modifying the stored logo. Today a color logo (e.g. the India flag) stays full-color on an otherwise monochrome b&w flyer.
Why
The bw palette is meant to produce a fully monochrome flyer (cheap, consistent printing). A color logo breaks that look. But permanently converting the stored logo would be wrong: switching back to the color palette must restore full color instantly, and the original upload must be preserved (it is shared across snapshots via conceptLogo).
How (sketch)
- Pure CSS, no pixel data touched: apply
filter: grayscale(1) to the logo <img> inside .page when palette === "bw". Toggling the palette back to color removes the filter and the logo is full-color again.
- Lives on the
.page render path so it shows everywhere the flyer is drawn: preview, html2canvas screenshot, Download HTML, Print/PDF.
Open questions (resolve before building)
- Plain
grayscale(1) vs. a contrast-boosted conversion — some flags/logos turn to flat mud in naive grayscale. Maybe grayscale(1) contrast(1.1) or a luminance threshold.
- Confirm it covers both the
conceptLogo-table path and the legacy inline concept.logo (same render path, so it should).
Notes
Preview/output filter only — never mutate the stored logo. Surfaced while building the "Špína, nebo chudoba?" flyer (bw palette + a color India-flag logo).
What
When the flyer palette is set to black & white, render the logo in grayscale in the preview and output (screenshot / Download HTML / Print-PDF) only — without ever modifying the stored logo. Today a color logo (e.g. the India flag) stays full-color on an otherwise monochrome b&w flyer.
Why
The
bwpalette is meant to produce a fully monochrome flyer (cheap, consistent printing). A color logo breaks that look. But permanently converting the stored logo would be wrong: switching back to thecolorpalette must restore full color instantly, and the original upload must be preserved (it is shared across snapshots viaconceptLogo).How (sketch)
filter: grayscale(1)to the logo<img>inside.pagewhenpalette === "bw". Toggling the palette back tocolorremoves the filter and the logo is full-color again..pagerender path so it shows everywhere the flyer is drawn: preview, html2canvas screenshot, Download HTML, Print/PDF.Open questions (resolve before building)
grayscale(1)vs. a contrast-boosted conversion — some flags/logos turn to flat mud in naive grayscale. Maybegrayscale(1) contrast(1.1)or a luminance threshold.conceptLogo-table path and the legacy inlineconcept.logo(same render path, so it should).Notes
Preview/output filter only — never mutate the stored logo. Surfaced while building the "Špína, nebo chudoba?" flyer (bw palette + a color India-flag logo).