Light/Dark Image Combiner — One PNG for White and Black Backgrounds
Merge a light-mode and a dark-mode image into a single transparent PNG that shows the bright artwork on white and the dark artwork on black. Upload both, preview the result side by side, and download one theme-aware asset for docs, READMEs or UI — all in your browser.
What the light/dark image combiner does
One PNG, two looks
The output is a per-pixel alpha composite: on a white surface it reads as your light image, on a black surface it reads as your dark image. That lets a README, docs page or UI ship a single asset instead of two files or a media query.
Two upload slots with live previews
Pick a light-mode image and a dark-mode image; the merged PNG appears as soon as both are loaded, shown once on a white card and once on a black card so you can judge both themes before downloading.
Fixed PNG export
Download always produces a PNG named light-dark-image.png, generated with canvas.toDataURL. There is no JPEG, WebP or SVG output and no quality or compression setting.
Canvas sized to the larger image
The result uses the larger width and the larger height of the pair, and both source images are stretched to fill that canvas from the top-left corner. Mismatched aspect ratios are distorted rather than letterboxed or cropped.
Local, with no adjustment controls
Files are read with FileReader and composited on a canvas — nothing is uploaded. There are no brightness, contrast, size, position, background or format controls; the only inputs are the two images.
Light/dark image FAQ
What is this tool actually for?
It turns a light-mode artwork and a dark-mode artwork into one transparent PNG whose appearance depends on the background: white surfaces show the light version, black surfaces show the dark version. It is for theme-aware assets in READMEs, documentation and UI, not a tool that generates two separate images for you.
Which settings can I adjust?
Only the two source images. There are no brightness, contrast, colour, position, scaling, background-colour, format or quality controls, and no fine-tuning of the merge itself; the preview panels are display-only.
Which input and output formats are supported?
Input accepts image/* and uses the browser's decoder, so JPEG, PNG, WebP and GIF work; the output is always PNG. No JPEG, WebP or SVG export is offered.
Can I process several pairs at once?
No. Each slot takes only the first selected file and the page handles one light/dark pair at a time, with no queue, batch mode or history.
Are there size limits, and what happens with mismatched dimensions?
There is no explicit pixel limit beyond what the browser's canvas memory allows. The output is max(width) × max(height), and both images are stretched to that size from the top-left, so different aspect ratios get distorted instead of being padded or cropped.
Is everything local?
Yes. The images are decoded with FileReader and merged in a canvas in your browser; nothing is uploaded and no server is involved. The merged result lives in memory as a data URL until you download it.
How faithful is the merged result?
It is an approximation. Light channels are remapped to 128–255 and dark channels to 0–127, then alpha and colour are solved so the pair composites correctly on pure white and pure black; colours are quantised, extreme contrast can lose detail, and the formula is only exact on pure white or black backgrounds (grey or tinted surfaces blend differently). Transparency is taken from the light image's alpha, and when the two images violate the brightness assumption the pixel alpha is clamped to zero.
