Combinador de imagens claro/escuro — um PNG para fundos brancos e pretos
Combine uma imagem no modo claro e uma imagem no modo escuro em um único PNG transparente que mostra a arte clara sobre branco e a arte escura sobre preto. Envie as duas, veja o resultado lado a lado na prévia e baixe um único recurso adaptável ao tema para docs, READMEs ou UI — tudo no navegador.
O que o combinador de imagens claro/escuro faz
Um PNG, dois visuais
A saída é uma composição alfa pixel a pixel: numa superfície branca parece a sua imagem clara, numa preta parece a sua imagem escura. Assim, um README, uma página de documentação ou uma UI usa um único recurso em vez de dois arquivos ou de uma media query.
Dois campos de upload com prévia ao vivo
Escolha uma imagem no modo claro e uma no modo escuro; o PNG combinado aparece assim que as duas são carregadas, uma vez num cartão branco e outra num cartão preto, para você avaliar os dois temas antes de baixar.
Exportação PNG fixa
O download sempre gera um PNG chamado light-dark-image.png, criado com canvas.toDataURL. Não há saída JPEG, WebP ou SVG, nem ajustes de qualidade ou compressão.
Canvas no tamanho da imagem maior
O resultado usa a maior largura e a maior altura do par, e as duas imagens de origem são esticadas para preencher esse canvas a partir do canto superior esquerdo. Proporções diferentes são distorcidas em vez de preenchidas com margens ou cortadas.
Local e sem controles de ajuste
Os arquivos são lidos com FileReader e combinados num canvas: nada é enviado. Não há controles de brilho, contraste, tamanho, posição, fundo ou formato; as únicas entradas são as duas imagens.
Perguntas frequentes sobre imagens claro/escuro
Para que serve esta ferramenta exatamente?
Ela transforma uma arte no modo claro e uma arte no modo escuro em um único PNG transparente cuja aparência depende do fundo: superfícies brancas mostram a versão clara, superfícies pretas mostram a versão escura. Serve para recursos adaptáveis ao tema em READMEs, documentação e UI, não para gerar duas imagens separadas para você.
Quais configurações posso ajustar?
Apenas as duas imagens de origem. Não há controles de brilho, contraste, cor, posição, escala, cor de fundo, formato ou qualidade, nem ajuste fino da combinação; os painéis de prévia são apenas para exibição.
Quais formatos de entrada e saída são suportados?
A entrada aceita image/* e usa o decodificador do navegador, então JPEG, PNG, WebP e GIF funcionam; a saída é sempre PNG. Nenhuma exportação JPEG, WebP ou SVG é oferecida.
Posso processar vários pares de uma vez?
Não. Cada campo usa apenas o primeiro arquivo selecionado, e a página processa um par claro/escuro por vez, sem fila, modo em lote ou histórico.
Existem limites de tamanho e o que acontece se as dimensões forem diferentes?
Não há um limite explícito de pixels além do que a memória do canvas do navegador permite. A saída é max(largura) × max(altura), e as duas imagens são esticadas para esse tamanho a partir do canto superior esquerdo, então proporções diferentes são distorcidas em vez de preenchidas ou cortadas.
Tudo é local?
Sim. As imagens são decodificadas com FileReader e combinadas num canvas no navegador; nada é enviado e nenhum servidor participa. O resultado permanece na memória como data URL até você baixá-lo.
Quão fiel é o resultado?
É uma aproximação. Os canais claros são remapeados para 128–255 e os escuros para 0–127, e então alfa e cor são resolvidos para que o par se combine corretamente sobre branco puro e preto puro; as cores são quantizadas, um contraste extremo pode perder detalhe, e a fórmula só é exata sobre fundos brancos ou pretos puros (superfícies cinzas ou tingidas misturam de outro jeito). A transparência vem apenas do alfa da imagem clara, e quando as duas imagens violam a hipótese de luminosidade o alfa do pixel é fixado em zero.
