Logo SVG no modo escuro: escolha quem controla a cor

Um logo SVG para modo escuro precisa de uma fonte explícita de informação de tema. O CSS da página pode estilizar os caminhos de um SVG inline. Um SVG externo carregado por um elemento de imagem tem contexto próprio de estilo, mas uma consulta interna prefers-color-scheme pode responder ao esquema de cores do elemento que o incorpora. Uma classe de tema manual e a preferência clara/escura do usuário são entradas separadas; decida qual deve controlar a arte.

Mantenha variantes aprovadas para superfícies claras e escuras quando existirem. Inverter todas as cores pode alterar um destaque, perder um contorno intencional ou produzir um logo não aprovado. O suporte a temas é uma decisão de cor e integração depois que a arte em si está correta.

Separe a preferência do usuário do tema da página

O recurso de mídia CSS prefers-color-scheme detecta uma preferência clara/escura comunicada pelo navegador ou sistema operacional. A MDN descreve essas entradas de preferência. O atributo próprio de um site data-theme="dark" é apenas estado do aplicativo até que CSS ou código lhe dê efeito.

Essa diferença explica uma divergência comum: a preferência do navegador continua clara enquanto o visitante escolhe uma superfície escura em um site. Um logo que segue apenas a preferência pode manter suas cores de superfície clara naquela página escura.

A propriedade color-scheme é outro controle. Ela informa ao navegador quais esquemas um elemento suporta; não redesenha automaticamente todo preenchimento especificado pelo autor. A referência da MDN diferencia renderização administrada pelo navegador dos estilos de tema que o autor ainda precisa fornecer.

Não acrescente três mecanismos independentes esperando que concordem. Identifique o responsável pretendido antes de depurar a cor visível.

Use seletores da página para um logo inline com tema manual

O SVG inline pertence ao documento da página, por isso seletores direcionados podem alcançar seus caminhos. Nossa comparação entre SVG inline e imagem explica melhor esse limite de acesso.

Criamos uma marca em F com duas funções de cor: a forma principal e um destaque circular separado. Essas cores ilustrativas são escolhas originais do exemplo, não um padrão de marca.

.ink { fill: #183c35; }
.accent { fill: #c58868; }
[data-theme="dark"] .ink { fill: #f5f0e7; }
[data-theme="dark"] .accent { fill: #ffc34d; }

Aplique as regras à arte inline pretendida, não a todo caminho do site. Um logo pode conter várias cores intencionais, máscaras ou gradientes. Nosso guia de recoloração SVG cobre a inspeção do que realmente pinta uma forma antes de mudar estilos.

currentColor é útil quando uma forma deve compartilhar a cor de texto de seu elemento. Não é obrigatório em um logo multicolorido. Separe o destaque quando o desenho pede outra cor e confira a marca completa em cada superfície pretendida.

Deixe o SVG externo administrar suas regras internas

Uma imagem externa é outro contexto de estilo. Definir color: rebeccapurple em seu elemento HTML de imagem não alcança e recolore caminhos arbitrários internamente. Mesmo currentColor dentro do SVG não se torna automaticamente a cor de texto da página hospedeira.

O arquivo pode conter suas próprias regras de tema. Este é o pequeno SVG adaptável completo usado em nosso teste original:

<svg xmlns="http://www.w3.org/2000/svg" width="140" height="105"
  viewBox="0 0 140 105">
  <style>
    .ink { fill: #183c35; }
    .accent { fill: #c58868; }
    @media (prefers-color-scheme: dark) {
      .ink { fill: #f5f0e7; }
      .accent { fill: #ffc34d; }
    }
  </style>
  <path class="ink" d="M15 15H85V30H33V48H70V63H33V90H15Z"/>
  <circle class="accent" cx="102" cy="73" r="17"/>
</svg>

Em uma imagem SVG incorporada, sua consulta de preferência pode refletir o esquema de cores usado pelo elemento que a incorpora. A especificação CSS Color Adjustment descreve essa relação. É um sinal de esquema, não os seletores CSS comuns da página atravessando para dentro do arquivo.

Em nosso teste, um hospedeiro define explicitamente color-scheme: light; outro define color-scheme: dark. Ambos carregam o mesmo arquivo adaptável. As cores de fundo e texto também foram definidas deliberadamente. A propriedade sozinha não forneceria esses estilos completos.

Se o aplicativo controla o tema, coordene o esquema do hospedeiro com essa escolha ao usar esta abordagem. Um fundo escuro com um hospedeiro ainda declarando claro pode enviar um sinal diferente do pretendido.

Compare os três caminhos em um navegador real

Nossa página HTML original tem dois hospedeiros de esquema fixo no topo. Abaixo, um botão muda o tema manual da página para uma marca inline e uma imagem externa de cor fixa. Esse arquivo externo de controle contém a mesma geometria, sem regra de mídia para tema escuro.

O navegador informou preferência clara do usuário. Clicar no botão de tema manual alterou o preenchimento principal inline de rgb(24, 60, 53) para rgb(245, 240, 231) e o destaque de rgb(197, 136, 104) para rgb(255, 195, 77). A leitura de preferência continuou clara. Os seletores da própria página causaram a alteração.

As duas imagens superiores mostraram cores claras e escuras selecionadas pelos respectivos esquemas hospedeiros. A imagem externa fixa manteve a arte verde e cobre mesmo quando a superfície ao redor ficou escura e o color calculado de seu elemento HTML era roxo.

Inspecionamos estilos calculados e o resultado renderizado real. As três imagens externas carregaram em suas dimensões naturais de 140 × 105 e foram exibidas a 280 × 210. O teste comprova o comportamento desses arquivos nessa sessão. Não é um teste entre navegadores, clientes de e-mail, exportação PDF ou alternância de sistema operacional.

Teste o uso final, não apenas o arquivo isolado

Abra o SVG original separadamente para verificar a geometria e inspecione sua incorporação na página real. Confira os dois temas, o destaque, as aberturas transparentes e o fundo imediato. Um logo responsivo também pode mudar a composição em uma largura pequena; nosso guia de assinatura responsiva trata dessa decisão separada.

Uma imagem SVG externa tem restrições: a MDN informa que scripts são desativados e recursos externos são restritos. Mantenha os estilos necessários dentro do recurso para a abordagem mostrada e teste o contexto real de entrega. Um resultado de navegador não promete o mesmo comportamento em um renderizador de e-mail ou importador de design.

Para um logo adequado disponível só como PNG ou JPEG, o fluxo de vetorização de logos do PerfectVector pode reconstruir caminhos de um SVG candidato. Compare silhueta, letras e pequenas aberturas com a origem antes de preparar variantes de tema. A vetorização não atribui funções semânticas às cores, adiciona a lógica de tema do aplicativo nem aprova uma versão invertida da marca. A marca de teste foi criada diretamente como formas vetoriais.

FAQ

Uma página escura recolore automaticamente um logo SVG externo? Não. As regras internas de cor ainda importam. Um SVG externo adaptável pode usar sua consulta de preferência com o esquema do elemento que o incorpora; um SVG de cor fixa pode manter as cores originais.

Uma classe manual de tema escuro muda prefers-color-scheme? Não sozinha. A classe ou atributo de dados é estado do aplicativo. No teste, o tema manual mudou enquanto a consulta de preferência do navegador continuou clara.

Devo inverter todas as cores do logo SVG no modo escuro? Use variantes aprovadas quando existirem. Inspecione cor principal, destaque, contornos e aberturas na superfície pretendida em vez de presumir que uma inversão geral preserva o desenho.

Fontes

1. MDN: prefers-color-scheme — Entradas de preferência do usuário e comportamento de SVG incorporado.
2. MDN: color-scheme — Suporte a esquemas e responsabilidade separada do autor pelos estilos.
3. CSS Color Adjustment: Efeitos do esquema de cores usado — Sinal de esquema fornecido ao conteúdo incorporado.
4. MDN: SVG como imagem — Restrições de scripts e recursos no contexto de imagem.

Precisa de caminhos editáveis de um logo disponível apenas em raster? Crie e inspecione um SVG candidato, preserve o original aceito, defina as funções de cada cor e teste a página real com seus temas.