SVGs responsivos ao dark mode

Fazer ícones em SVGs responsivos a temas escuros é bem simples para quem tem conhecimentos básicos de CSS.

Compreendendo o código do SVGs

Arquivos SVG são diferente de uma imagem rasterizada. Ele é uma instrução em código dos contornos da ilustração que o computador interpreta, dando ao SVG a capacidade de ser expandido para a resolução que você quiser. Isso também é chamado de imagem vetorizada.

A estrutura do SVG é identica ao de qualquer arquivo HTML. Se você abrir o favicon desse site em um editor de texto, verá que seu código dispõe de um círculo, definido pela tag <circle> em um texto definido pela tag <text>:

<g>
  <circle
     id="path234"
     cx="105.02773"
     cy="105.02773"
     r="104.81809" />
  <text
     xml:space="preserve"
     transform="matrix(0.46633127,0,0,-0.46633127,-78.576085,282.65555)"
     id="text398"><tspan
       x="184.33605"
       y="477.84502"
       id="tspan1073"><tspan id="tspan1071">DN</tspan></tspan></text>
</g>

Adicionando um <style> ao SVG

Arquivos SVGs, permitem que você adicione css inline usando tag <style> dentro deles. Dentro das especificações do CSS, você vai encontrar a media query prefers-color-scheme: dark, que altera a cor do círculo e do texto quando o dispositivo do usuário usa o tema escuro.

@media (prefers-color-scheme: dark) {
  circle {
    fill: #ffd5d5;
  }
  text {
    fill: #bd1f2e;
  }
}