> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Logo SVG no modo escuro: escolha quem controla a cor

> Decida se o logo SVG segue a preferência do usuário ou o tema da página. Compare CSS inline, arquivo externo adaptável e arte fixa em um teste de navegador.

Source: https://perfectvector.com/pt-BR/blog/dark-mode-svg-logo

Language: pt-BR
Author: Irene Kim
Published: 2026-10-22T08:00:00+09:00

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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme). 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) diferencia renderização administrada pelo navegador dos estilos de tema que o autor ainda precisa fornecer.

| Responsável pretendido              | Escolha de integração                                                     | O que verificar                                                                   |
| ----------------------------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| Tema manual do aplicativo           | Caminhos inline estilizados pelos seletores de tema da página             | As duas cores do logo mudam quando o tema muda                                    |
| Esquema da superfície que incorpora | SVG externo com regras internas de mídia e esquema adequado no hospedeiro | O mesmo arquivo escolhe as cores pretendidas em cada hospedeiro                   |
| Variante fixa fornecida da marca    | Seleção do recurso aprovado correto no aplicativo                         | O arquivo escolhido corresponde à superfície e continua identificado corretamente |

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](https://perfectvector.com/pt-BR/blog/inline-svg-vs-img) 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.

```css
.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](https://perfectvector.com/pt-BR/blog/how-to-change-svg-color) 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:

```xml
<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](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) 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.

![Teste real no navegador comparando o mesmo SVG externo adaptável em hospedeiros claro e escuro, um logo inline com tema manual e um controle externo fixo que mantém suas cores originais](https://perfectvector.com/blog/dark-mode-svg-logo/theme-ownership.webp)

*Teste HTML/CSS original no navegador integrado do Codex. O tema manual da página está escuro enquanto a consulta de preferência do usuário informa claro. Os esquemas dos hospedeiros superiores são entradas explícitas do teste; a preferência do sistema operacional não foi alterada.*

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](https://perfectvector.com/pt-BR/blog/responsive-svg-logo-lockup) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image). 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](https://perfectvector.com/pt-BR/vectorize-logo) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) — Entradas de preferência do usuário e comportamento de SVG incorporado.
2. [MDN: color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) — Suporte a esquemas e responsabilidade separada do autor pelos estilos.
3. [CSS Color Adjustment: Efeitos do esquema de cores usado](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) — Sinal de esquema fornecido ao conteúdo incorporado.
4. [MDN: SVG como imagem](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — 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](https://perfectvector.com/pt-BR/vectorize-logo), preserve o original aceito, defina as funções de cada cor e teste a página real com seus temas.

## Explore

- [Read the HTML article](https://perfectvector.com/pt-BR/blog/dark-mode-svg-logo)
- [Evite saltos do logo SVG reservando espaço na página](https://perfectvector.com/pt-BR/blog/svg-logo-layout-reservation.md)
- [Remova o espaço abaixo do SVG inline com layout CSS](https://perfectvector.com/pt-BR/blog/inline-svg-baseline-gap.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)