prefere-color-scheme: Olá, escuridão, meu velho amigo

Exagero ou necessidade? Saiba tudo sobre o modo escuro e como oferecer suporte a ele para beneficiar seus usuários.

Thomas Steiner

Introdução

Modo escuro antes do Modo escuro

Com o modo escuro, fechamos o círculo. No início da computação pessoal, o modo escuro não era uma questão de escolha, mas um fato: os monitores de computador CRT monocromáticos funcionavam disparando feixes de elétrons em uma tela fosforescente, e o fósforo usado nos primeiros CRTs era verde. Como o texto era exibido em verde e o restante da tela era preto, esses modelos eram frequentemente chamados de telas verdes.

Os CRTs coloridos introduzidos posteriormente exibiam várias cores usando fósforos vermelhos, verdes e azuis. Eles criaram o branco ativando os três fósforos simultaneamente. Com o surgimento de WYSIWYG editoração eletrônica mais sofisticados, a ideia de fazer com que o documento virtual se parecesse com uma folha de papel física se tornou popular.

Foi aí que começou a tendência de design escuro no branco, que foi transferida para a Web inicial baseada em documentos. O primeiro navegador, o WorldWideWeb (lembre-se de que o CSS ainda não tinha sido inventado), exibia as páginas da Web dessa forma. Curiosidade: o segundo navegador da história, o Line Mode Browser, era verde em um fundo escuro. Hoje em dia, as páginas e os apps da Web geralmente são projetados com texto escuro em um plano de fundo claro, uma proposição básica que também é codificada em folhas de estilo do user agent, incluindo as do Chrome.

Os dias dos CRTs já acabaram. O consumo e a criação de conteúdo mudaram para dispositivos móveis que usam telas LCD retroiluminadas ou AMOLED com economia de energia. Computadores, tablets e smartphones menores e mais portáteis levaram a novos padrões de uso. Atividades de lazer, como navegação na Web, programação por diversão e jogos sofisticados, geralmente acontecem depois do expediente em ambientes escuros. As pessoas até usam os dispositivos na cama à noite. Quanto mais pessoas usam dispositivos no escuro, mais a ideia de voltar às raízes do claro no escuro se torna popular.

Por que usar o modo escuro

Modo escuro por motivos estéticos

Quando as pessoas são questionadas sobre por que gostam ou querem o modo escuro, a resposta mais comum é que "ele é mais fácil para os olhos", seguida por "ele é elegante e bonito". A Apple, na documentação para desenvolvedores do modo escuro, escreve explicitamente: "A escolha de ativar uma aparência clara ou escura é estética para a maioria dos usuários e pode não estar relacionada às condições de iluminação ambiente".

Modo escuro como ferramenta de acessibilidade

Há também pessoas que precisam do modo escuro e o usam como outra ferramenta de acessibilidade, por exemplo, usuários com baixa visão. A primeira ocorrência de uma ferramenta de acessibilidade que encontrei foi o recurso CloseView do System 7, que tinha uma opção para Preto no branco e Branco no preto. Embora o System 7 oferecesse suporte a cores, a interface do usuário padrão ainda era em preto e branco.

Essas implementações baseadas em inversão demonstraram suas fraquezas quando a cor foi introduzida. A pesquisa de usuários de Szpiro et al. sobre como pessoas com baixa visão acessam dispositivos de computação mostrou que todos os usuários entrevistados não gostavam de imagens invertidas, mas muitos preferiam texto claro em um fundo escuro. A Apple atende a essa preferência do usuário com um recurso chamado Inversão inteligente, que inverte as cores na tela, exceto imagens, mídia e alguns apps que usam estilos de cores escuras.

Uma forma especial de baixa visão é a síndrome da visão computadorizada, também conhecida como fadiga ocular digital, que é definida como "a combinação de problemas oculares e de visão associados ao uso de computadores (incluindo desktops, laptops e tablets) e outros monitores eletrônicos (por exemplo, smartphones e dispositivos de leitura eletrônica)". Foi proposto que o uso de dispositivos eletrônicos por adolescentes, principalmente à noite, aumenta o risco de menor duração do sono, maior latência de início do sono e maior deficiência de sono. Além disso, a exposição à luz azul tem sido amplamente relatada como envolvida na regulação do ritmo circadiano e do ciclo do sono. Ambientes com luz irregular podem levar à privação de sono, possivelmente afetando o humor e o desempenho de tarefas, de acordo com pesquisas de Rosenfield. Para limitar esses efeitos negativos, reduza a luz azul ajustando a temperatura da cor da tela com recursos como o Night Shift do iOS ou a Luz noturna do Android. Além disso, evite luzes fortes ou irregulares em geral usando temas ou modos escuros.

Economia de energia do modo escuro em telas AMOLED

Por fim, o modo escuro economiza muita energia em telas AMOLED. Estudos de caso do Android focados em apps populares do Google, como o YouTube, mostraram que a economia de energia pode chegar a 60%. O vídeo abaixo tem mais detalhes sobre esses estudos de caso e a economia de energia por app.

Ativar o modo escuro no sistema operacional

Agora que já expliquei por que o modo escuro é tão importante para muitos usuários, vamos analisar como você pode oferecer suporte a ele.

Os sistemas operacionais que oferecem um modo ou tema escuro geralmente têm uma opção para ativar esse recurso nas configurações. No macOS X, ele fica na seção Geral das preferências do sistema e é chamado de Aparência (captura de tela). No Windows 10, ele fica na seção Cores e é chamado de Escolher uma cor (captura de tela). No Android Q, ele está em Tela como uma chave de alternância do Tema escuro (captura de tela). No iOS 13, é possível mudar a Aparência na seção Tela e brilho das configurações (captura de tela).

A consulta de mídia prefers-color-scheme

Mais uma teoria antes de começar. As consultas de mídia permitem que os autores testem e consultem valores ou recursos do user agent ou do dispositivo de exibição, independente do documento renderizado. Eles são usados na regra CSS @media para aplicar estilos condicionalmente a um documento e em vários outros contextos e linguagens, como HTML e JavaScript. As consultas de mídia de nível 5 apresentam os chamados recursos de mídia de preferência do usuário, ou seja, uma maneira de os sites detectarem a forma preferida do usuário de exibir conteúdo.

A prefers-color-scheme consulta de mídia é usada para detectar se o usuário pediu que a página usasse um tema de cores claro ou escuro. Ele funciona com os seguintes valores:

• light: indica que o usuário notificou o sistema de que prefere uma página com um tema claro (texto escuro em fundo claro).
• dark: indica que o usuário notificou o sistema de que prefere uma página com um tema escuro (texto claro em fundo escuro).

Compatibilidade com o modo escuro

Descobrir se o modo escuro é compatível com o navegador

Como o modo escuro é informado por uma consulta de mídia, é fácil verificar se o navegador atual é compatível com o modo escuro. Basta verificar se a consulta de mídia prefers-color-scheme corresponde. Observe como não incluo nenhum valor, mas apenas verifico se a consulta de mídia corresponde.

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

No momento da redação deste artigo, o prefers-color-scheme é compatível com computadores e dispositivos móveis (quando disponível) pelo Chrome e pelo Edge a partir da versão 76, pelo Firefox a partir da versão 67 e pelo Safari a partir da versão 12.1 no macOS e da versão 13 no iOS. Para todos os outros navegadores, consulte o documento Posso usar tabelas de suporte?.

Aprender sobre as preferências de um usuário no momento da solicitação

O cabeçalho de dica do cliente Sec-CH-Prefers-Color-Scheme permite que os sites obtenham as preferências de esquema de cores do usuário opcionalmente no momento da solicitação, permitindo que os servidores incorporem o CSS correto e evitem um flash de tema de cor incorreto.

Modo escuro na prática

Por fim, vamos ver como o suporte ao modo escuro funciona na prática. Assim como no Highlander, no modo escuro só pode haver um: escuro ou claro, mas nunca os dois! Por que estou mencionando isso? porque esse fato deve ter um impacto na estratégia de carregamento. Não force os usuários a baixar CSS no caminho de renderização crítica para um modo que eles não usam no momento. Para otimizar a velocidade de carregamento, dividi o CSS do app de exemplo que mostra as seguintes recomendações na prática em três partes para adiar o CSS não essencial:

• style.css que contém regras genéricas usadas universalmente no site.
• dark.css que contém apenas as regras necessárias para o modo escuro.
• light.css que contém apenas as regras necessárias para o modo claro.

Estratégia de carregamento

Os dois últimos, light.css e dark.css, são carregados condicionalmente com uma consulta <link media>. Inicialmente, nem todos os navegadores vão oferecer suporte a prefers-color-scheme (detectável usando o padrão acima), que eu lido dinamicamente carregando o arquivo light.css padrão por um elemento <link rel="stylesheet"> inserido condicionalmente em um script inline minúsculo (light é uma escolha arbitrária, eu também poderia ter feito dark a experiência de fallback padrão). Para evitar um flash de conteúdo sem estilo, oculto o conteúdo da página até que light.css seja carregado.

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />

Arquitetura de folha de estilo

Uso ao máximo as variáveis CSS. Isso permite que meu style.css genérico seja, bem, genérico, e toda a personalização do modo claro ou escuro aconteça nos outros dois arquivos dark.css e light.css. Abaixo, você pode conferir um trecho dos estilos reais, mas isso é suficiente para transmitir a ideia geral. Declaro duas variáveis, -⁠-⁠color e -⁠-⁠background-color, que essencialmente criam um tema de referência escuro no claro e claro no escuro.

/* light.css: 👉 dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

/* dark.css: 👉 light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

No meu style.css, uso essas variáveis na regra body { … }. Como são definidos na pseudoclasse :root do CSS, um seletor que em HTML representa o elemento <html> e é idêntico ao seletor html, exceto que sua especificidade é maior, eles são transmitidos em cascata, o que me serve para declarar variáveis globais de CSS.

/* style.css */
:root {
  color-scheme: light dark;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

No exemplo de código acima, você provavelmente notou uma propriedade color-scheme com o valor light dark separado por espaços.

Isso informa ao navegador quais temas de cores meu app oferece suporte e permite que ele ative variantes especiais da folha de estilo do user agent, o que é útil, por exemplo, para permitir que o navegador renderize campos de formulário com um plano de fundo escuro e texto claro, ajuste as barras de rolagem ou ative uma cor de destaque compatível com o tema. Os detalhes exatos de color-scheme são especificados no Módulo de ajuste de cor CSS nível 1.

Todo o resto é apenas uma questão de definir variáveis CSS para coisas importantes no meu site. Organizar estilos semanticamente ajuda muito ao trabalhar com o modo escuro. Por exemplo, em vez de -⁠-⁠highlight-yellow, considere chamar a variável -⁠-⁠accent-color, já que "amarelo" pode não ser amarelo no modo escuro ou vice-versa. Confira abaixo um exemplo de outras variáveis que uso no meu exemplo.

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}

/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

Exemplo completo

Na incorporação do Glitch a seguir, você pode conferir o exemplo completo que coloca em prática os conceitos acima. Tente ativar o modo escuro nas configurações do seu sistema operacional e veja como a página reage.

Impacto da carga

Ao brincar com este exemplo, você vai entender por que eu carrego meus dark.css e light.css usando consultas de mídia. Tente ativar e desativar o modo escuro e recarregue a página. As folhas de estilo específicas que não correspondem no momento ainda são carregadas, mas com a menor prioridade, para que nunca concorram com os recursos necessários para o site agora.

Reagir a mudanças no modo escuro

Como qualquer outra mudança de consulta de mídia, as mudanças no modo escuro podem ser assinadas via JavaScript. Por exemplo, é possível usar isso para mudar dinamicamente o favicon de uma página ou alterar o <meta name="theme-color"> que determina a cor da barra de URL no Chrome. O exemplo completo acima mostra isso em ação. Para conferir as mudanças na cor do tema e no favicon, abra a demonstração em uma guia separada.

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

No Chromium 93 e no Safari 15, é possível ajustar a cor com base em uma consulta de mídia com o atributo media do elemento de cor do tema meta. A primeira correspondência será escolhida. Por exemplo, você pode ter uma cor para o modo claro e outra para o modo escuro. No momento em que este artigo foi escrito, não é possível definir esses elementos no manifesto. Consulte o problema w3c/manifest#975 do GitHub.

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

Depuração e teste do modo escuro

Como emular prefers-color-scheme no DevTools

Mudar todo o esquema de cores do sistema operacional pode ser irritante rapidamente. Por isso, o Chrome DevTools agora permite emular o esquema de cores preferido do usuário de uma forma que afeta apenas a guia visível no momento. Abra o Menu de comandos, comece a digitar Rendering, execute o comando Show Rendering e mude a opção Emular recurso de mídia CSS "prefers-color-scheme".

Capturas de tela de prefers-color-scheme com o Puppeteer

O Puppeteer (em inglês) é uma biblioteca do Node.js que fornece uma API de alto nível para controlar o Chrome ou o Chromium pelo DevTools Protocol. Com o dark-mode-screenshot, fornecemos um script do Puppeteer que permite criar capturas de tela das suas páginas nos modos claro e escuro. Você pode executar esse script uma única vez ou incluí-lo no seu conjunto de testes de integração contínua (CI).

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

Práticas recomendadas para o modo escuro

Evite o branco puro

Um pequeno detalhe que você pode ter notado é que eu não uso branco puro. Em vez disso, para evitar brilho e sangramento contra o conteúdo escuro ao redor, escolho um branco ligeiramente mais escuro. Algo como rgb(250, 250, 250) funciona bem.

Recolorir e escurecer imagens fotográficas

Se você comparar as duas capturas de tela abaixo, vai notar que não apenas o tema principal mudou de escuro sobre claro para claro sobre escuro, mas também que a imagem principal está um pouco diferente. Minha pesquisa com usuários mostrou que a maioria das pessoas entrevistadas prefere imagens um pouco menos vibrantes e brilhantes quando o modo escuro está ativo. Eu chamo isso de recoloração.

A mudança de cor pode ser feita com um filtro CSS nas minhas imagens. Uso um seletor de CSS que corresponde a todas as imagens que não têm .svg no URL. A ideia é dar aos gráficos vetoriais (ícones) um tratamento de recoloração diferente das minhas imagens (fotos). Saiba mais sobre isso no próximo parágrafo. Observe como uso novamente uma variável CSS para poder mudar meu filtro de forma flexível mais tarde.

Como a recolorização só é necessária no modo escuro, ou seja, quando dark.css está ativo, não há regras correspondentes em light.css.

/* dark.css */
--image-filter: grayscale(50%);

img:not([src*='.svg']) {
  filter: var(--image-filter);
}

Personalizar as intensidades de recoloração do modo escuro com JavaScript

Nem todo mundo é igual, e as pessoas têm necessidades diferentes de modo escuro. Ao seguir o método de recolorização descrito acima, posso facilmente tornar a intensidade de escala de cinza uma preferência do usuário que posso mudar via JavaScript. Ao definir um valor de 0%, também posso desativar completamente a recolorização. document.documentElement fornece uma referência ao elemento raiz do documento, ou seja, o mesmo elemento que posso referenciar com a pseudoclasse :root do CSS.

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

Inverter gráficos vetoriais e ícones

Para gráficos vetoriais, que no meu caso são usados como ícones referenciados por elementos <img>, uso um método de recoloração diferente. Embora a pesquisa tenha mostrado que as pessoas não gostam da inversão em fotos, ela funciona muito bem para a maioria dos ícones. De novo, uso variáveis CSS para determinar a quantidade de inversão no estado regular e no estado :hover.

Observe como, novamente, só inverto os ícones em dark.css, mas não em light.css, e como :hover recebe uma intensidade de inversão diferente nos dois casos para fazer com que o ícone apareça um pouco mais escuro ou um pouco mais claro, dependendo do modo selecionado pelo usuário.

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);

img[src*='.svg'] {
  filter: var(--icon-filter);
}

/* light.css */
--icon-filter_hover: invert(60%);

/* style.css */
img[src*='.svg']:hover {
  filter: var(--icon-filter_hover);
}

Usar currentColor para SVGs inline

Para imagens SVG inline, em vez de usar filtros de inversão, aproveite a palavra-chave currentColor do CSS, que representa o valor da propriedade color de um elemento. Isso permite usar o valor color em propriedades que não o recebem por padrão. Se currentColor for usado como o valor dos atributos SVG fill ou stroke, ele vai receber o valor da propriedade de cor herdada. Melhor ainda: isso também funciona para <svg><use href="…"></svg>, assim você pode ter recursos separados e currentColor ainda será aplicado no contexto. Isso só funciona para SVGs in-line ou <use href="…">, mas não para SVGs referenciados como src de uma imagem ou de alguma forma via CSS. Confira isso aplicado na demonstração abaixo.

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

Transições suaves entre modos

A troca do modo escuro para o claro ou vice-versa pode ser feita de forma suave porque color e background-color são propriedades CSS animáveis. Criar a animação é tão fácil quanto declarar dois transitions para as duas propriedades. O exemplo abaixo ilustra a ideia geral. Você pode conferir ao vivo na demonstração.

body {
  --duration: 0.5s;
  --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition: color var(--duration) var(--timing), background-color var(
        --duration
      ) var(--timing);
}

Direção de arte com modo escuro

Embora, por motivos de desempenho de carregamento, eu recomende trabalhar exclusivamente com prefers-color-scheme no atributo media dos elementos <link> (em vez de inline em folhas de estilo), há situações em que você pode querer trabalhar com prefers-color-scheme diretamente inline no seu código HTML. A direção de arte é uma dessas situações. Na Web, a direção de arte lida com a aparência visual geral de uma página e como ela se comunica visualmente, estimula humores, contrasta recursos e atrai psicologicamente um público-alvo.

Com o modo escuro, cabe ao designer decidir qual é a melhor imagem em um determinado modo e se a recoloração de imagens talvez não seja boa o suficiente. Se usado com o elemento <picture>, o <source> da imagem a ser mostrada pode depender do atributo media. No exemplo abaixo, mostro o hemisfério ocidental para o modo escuro e o hemisfério oriental para o modo claro ou quando nenhuma preferência é dada, usando o hemisfério oriental em todos os outros casos. Isso é apenas para fins ilustrativos. Ative o modo escuro no dispositivo para ver a diferença.

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
  <img src="eastern.webp" />
</picture>

Modo escuro, mas adicione uma opção de desativação

Como mencionado na seção Por que usar o modo escuro? acima, o modo escuro é uma escolha estética para a maioria dos usuários. Como consequência, alguns usuários podem gostar de ter a interface do sistema operacional no modo escuro, mas ainda preferem ver as páginas da Web da maneira como estão acostumados. Um ótimo padrão é aderir inicialmente ao sinal que o navegador envia por prefers-color-scheme, mas permitir que os usuários substituam a configuração no nível do sistema.

O elemento personalizado <dark-mode-toggle>

É claro que você pode criar o código por conta própria, mas também pode usar um elemento personalizado pronto (componente da Web) que criei para essa finalidade. Ele se chama <dark-mode-toggle> e adiciona à sua página uma chave (modo escuro: ativado/desativado) ou um seletor de tema (tema: claro/escuro) que pode ser totalmente personalizado. A demonstração abaixo mostra o elemento em ação. Além disso, eu o 🤫 incluí silenciosamente em todos os outros exemplos acima.

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>

Clique ou toque nos controles do modo escuro no canto superior direito da demonstração a seguir. Se você marcar a caixa de seleção no terceiro e no quarto controle, veja como sua seleção de modo é lembrada mesmo quando você recarrega a página. Assim, os visitantes podem manter o sistema operacional no modo escuro, mas aproveitar seu site no modo claro ou vice-versa.

Conclusões

Trabalhar com o modo escuro e oferecer suporte a ele é divertido e abre novas possibilidades de design. Para alguns visitantes, pode ser a diferença entre não conseguir usar seu site e ser um usuário satisfeito. Há algumas armadilhas, e testes cuidadosos são necessários, mas o modo escuro é uma ótima oportunidade para mostrar que você se importa com todos os seus usuários. As práticas recomendadas mencionadas nesta postagem e os recursos auxiliares, como o elemento personalizado <dark-mode-toggle>, vão ajudar você a criar uma experiência incrível no modo escuro. Conte para mim no Twitter o que você criou e se esta postagem foi útil ou também sugestões para melhorar. Agradecemos por ler. 🌒

Links relacionados

Recursos para a consulta de mídia prefers-color-scheme:

• Página de status da plataforma Chrome
• Bug do Chromium
• Especificação de consultas de mídia nível 5 (em inglês)

Recursos para a metatag color-scheme e a propriedade CSS:

• A propriedade CSS color-scheme e a metatag
• Página de status da plataforma Chrome
• Bug do Chromium
• Especificação do módulo de ajuste de cor do CSS nível 1
• Problema do GitHub do grupo de trabalho do CSS para a metatag e a propriedade CSS
• Problema do GitHub WHATWG em HTML para a tag meta

Links gerais do modo escuro:

• Material Design: tema escuro
• Modo escuro no Web Inspector
• Suporte ao modo escuro no WebKit
• Diretrizes para interface humana da Apple: modo escuro

Artigos de pesquisa de contexto para esta postagem:

• O que o "supported-color-schemes" do modo escuro realmente faz? 🤔
• Que haja escuridão! 🌚 Talvez…
• Recolorização para o modo escuro

Agradecimentos

O recurso de mídia prefers-color-scheme, a propriedade CSS color-scheme e a metatag relacionada são o trabalho de implementação de 👏 Rune Lillesveen. Rune também é coeditor da especificação Módulo de ajuste de cor CSS Nível 1. Quero agradecer 🙏 a Lukasz Zbylut, Rowan Merewood, Chirag Desai e Rob Dodson pelas revisões detalhadas deste artigo. A estratégia de carregamento foi criada por Jake Archibald. Emilio Cobos Álvarez me indicou o método de detecção prefers-color-scheme correto. A dica com SVGs referenciados e currentColor foi enviada por Timothy Hatcher. Por fim, agradeço aos muitos participantes anônimos dos vários estudos com usuários que ajudaram a moldar as recomendações deste artigo.