Use duas versões da arte quando uma única ilustração decorativa perde definição ou domina a composição ao mudar de tema. Exporte ambas com o mesmo enquadramento, teste o fundo de cada uma e aplique light-dark() à imagem de fundo onde houver suporte. Vincule a troca ao esquema de cores efetivo do componente. Assim, a arte acompanha inclusive o tema que alguém seleciona no próprio site, quando ele difere da preferência definida no aparelho.
Que tipo de imagem deve entrar no fundo?
Use o fundo CSS para textura, grafismos de apoio e ilustrações que podem desaparecer sem prejudicar a tarefa. Pense numa página de agenda em que uma trama de linhas cruza a margem do cabeçalho. A trama ajuda a compor a página e o nome da agenda continua no título. Uma imagem que ensina a localizar um botão no painel tem outra função. Ela precisa ser apresentada como conteúdo e receber um equivalente textual adequado ao que ensina. Faça essa distinção para cada imagem antes de montar a troca.
Uma maneira rápida de revisar a função da arte é ocultar todos os fundos e ler a página de cima para baixo. Se um trecho perde seu significado, identifique a informação que sumiu e leve essa informação para a estrutura da página. A ilustração pode continuar como apoio quando o texto principal dá conta da tarefa. Em páginas que também são usadas em papel, confira o que o leitor recebe quando o navegador omite fundos na impressão. O guia de fichas técnicas da web para impressão em A4 mostra como priorizar desenhos e dados que precisam sobreviver nessa passagem.
Como preparar os dois arquivos no design?
Abra duas pranchetas de mesmo tamanho e coloque o desenho nas mesmas coordenadas. Marque uma área livre em torno do título e dos controles. Preserve essa área nos dois temas. Se a arte invade o centro no fundo escuro, experimente mudar os tons e a espessura dos traços antes de deslocar o desenho. Manter os pontos de referência permite alternar temas sem que as formas pareçam dar um salto. Quando a área disponível muda muito entre celular e desktop, desenhe uma composição que tolere o corte nas bordas.
Na versão clara, experimente reduzir a diferença entre os traços de apoio e o fundo até que o título se destaque. Na escura, confira se os traços finos ainda aparecem num monitor com brilho baixo e se as áreas maiores evitam manchas luminosas atrás do texto. Se a forma é vetorial e tem poucos detalhes, comece por um SVG e compare a renderização. Se a arte depende de textura fotográfica, compare versões raster exportadas na resolução em que serão exibidas. Avalie o peso real dos dois arquivos antes de aprovar.
Como conectar a imagem ao tema usado na página?
Defina color-scheme: light dark no contexto que segue a preferência do sistema. Para uma escolha explícita do tema no site, aplique color-scheme: light ou color-scheme: dark ao elemento que governa aquela área. A imagem de fundo pode então receber background-image: light-dark(url("/arte-clara.svg"), url("/arte-escura.svg")). As notas do WebKit sobre o Safari 27 registram a adição de imagens como argumentos dessa função.
Se uma prévia escura estiver dentro de uma página clara, defina o esquema da prévia no próprio contêiner e inspecione a imagem dentro dele. A função escolhe a variante usando o esquema efetivo no elemento. A versão de reserva precisa acompanhar a mesma decisão. Um projeto pode guardar essa decisão em um atributo de tema ou numa classe. Use o mecanismo que o produto já emprega para trocar as cores e confira se a alteração afeta tanto a superfície quanto a ilustração.
Como oferecer uma imagem de reserva?
Coloque primeiro uma declaração comum de background-image que escolha um arquivo seguro. No fluxo existente de temas, especifique a variante escura com o seletor correspondente e use a preferência do sistema somente no estado automático. Adicione a declaração moderna onde ela possa prevalecer sobre a declaração de reserva. Se a regra escura antiga tiver um seletor mais específico, organize o novo trecho com a mesma especificidade ou com camadas adequadas. Verifique a propriedade calculada no navegador para entender qual regra entrou em vigor.
Faça a consulta de suporte com um valor de imagem, por exemplo @supports (background-image: light-dark(none, linear-gradient(black, white))). Um navegador pode aceitar a função com cores e ainda rejeitar imagens. O rascunho do CSS Color 5 descreve a forma de imagem e mostra exemplos com none. Esse valor é uma opção quando o fundo escuro funciona melhor sem grafismo. Mantenha a cor de fundo definida em ambos os casos para que o texto tenha uma superfície previsível.
O que muda quando o usuário aproxima a página?
Revise a posição do desenho com zoom e com títulos longos. Uma forma ancorada no canto direito pode chegar ao meio da palavra quando o título quebra em três linhas. Teste o título em uma largura estreita e com o maior tamanho de texto que o navegador permitir sem ajustes externos. Se o desenho atravessa a área de leitura, restrinja a região decorativa ou desligue a imagem nessa largura. O guia de zoom e refluxo oferece uma sequência para conferir a leitura e as ações durante esse teste.
Experimente também uma largura intermediária. É comum a arte parecer adequada no monitor largo e sumir no celular, enquanto entra em conflito com os controles na largura em que o layout ainda usa duas colunas. Nas ferramentas do navegador, altere a largura devagar e observe o ponto em que a linha do título muda. Avalie o resultado antes e depois dessa quebra com as duas imagens. A borda da região decorativa pode usar as mesmas medidas nos dois temas, o que reduz o número de combinações a revisar.
Como aprovar a troca antes de entregar?
Abra a página no modo automático, altere o esquema do sistema e depois selecione manualmente o tema oposto dentro do site. Confira se as cores do componente e a imagem mudam juntas. Repita a passagem com o caminho de reserva ativado e inspecione a requisição de imagem. Se ambos os arquivos forem transferidos em uma situação em que só um aparece, veja se há pré-carregamento ou outra regra pedindo o arquivo extra. Registre o que acontece nas versões de navegador usadas pelo projeto.
Por fim, simule a falha de carregamento dos dois arquivos e revise o fundo sólido. O título, os botões e a separação entre as seções precisam funcionar nesse estado. Salve uma referência de cada tema com a mesma largura e com o mesmo conteúdo, junto dos nomes dos arquivos e da área livre que o desenho deve respeitar. Quando a ilustração for substituída numa campanha seguinte, essa referência dá à equipe uma prova visual para conferir a troca sem alterar a posição do texto nem a lógica de seleção do tema.
Se a área decorativa está em várias páginas, faça a última verificação em uma que usa outro tamanho de cabeçalho. A mesma coordenada de fundo pode ficar alinhada em um bloco e cortar a parte reconhecível da forma em outro. Para um padrão repetido, verifique também a junção entre duas cópias. Guarde as medidas como parte da especificação do componente e mantenha o nome do arquivo separado da posição, para que uma nova exportação possa reutilizar a composição aprovada. Inspecione também as margens na posição em que a página abre em um telefone.