Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUpload a logo and see it on light, dark and brand-colored backgrounds, with a warning when a transparent logo disappears on one of them, and a second upload slot for a dark-mode version. Use this when a logo will appear in both themes.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
A product shows the customer's logo in light and dark themes and should warn about logos that vanish.
Do not use it when: For fixed brand assets that you control, no preview is needed.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Description |
|---|---|---|
sample | (file) => Promise<{ transparent, lightness } | null> | Replace the canvas sampling (for SVG, or on the server). |
onChange | ({ light, dark }) => void | The chosen files. |
sampleLogo(file) and logoWarnings(sample, hasDark) are exported.
The pattern ships with a Testing Library test (logo-light-dark-preview.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.