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

Excesso de informação ou necessidade? Saiba tudo sobre o modo escuro e como oferecer suporte a ele para beneficiar os usuários.

Introdução

Modo escuro antes do modo escuro

O modo escuro foi concluído. Na origem da computação pessoal, o modo escuro não era uma questão de escolha, mas na verdade: monitores de computador CRT monocromáticos funcionavam disparando feixes de elétron 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 estava preto, esses modelos eram frequentemente chamados de telas verdes.

Os CRTs de cores apresentados posteriormente exibiram várias cores por meio do uso de fósforos vermelhos, verdes e azuis. Eles criaram o branco ativando os três fósforos simultaneamente. Com o advento da publicação em computadores WYSIWYG mais sofisticada, a ideia de fazer o documento virtual se parecer com uma folha de papel se tornou popular.

Foi aí que começou a tendência de design dark-on-white, e ela foi transmitida para a Web pioneira baseada em documentos. O primeiro navegador, o WorldWideWeb (lembre-se, o CSS ainda nem foi inventado), mostrava páginas da Web dessa forma. Curiosidade: o segundo navegador, o Line Mode Browser, um navegador baseado em terminal, estava verde em um escuro. Atualmente, as páginas e apps da Web costumam ser projetados com texto escuro em um plano de fundo claro, uma suposição de valor de referência que também está codificada nas folhas de estilo do user agent, incluindo as do Chrome.

Os dias das CRTs acabaram. O consumo e a criação de conteúdo mudaram para dispositivos móveis que usam telas LCD com retroiluminação ou AMOLED, que economizam energia. Computadores, tablets e smartphones menores e mais portáteis levaram a novos padrões de uso. Tarefas de lazer, como navegação na Web, programação para diversão e jogos sofisticados, costumam acontecer após o horário em ambientes escuros. As pessoas até aproveitam seus dispositivos em suas camas à noite. Quanto mais as pessoas usam os dispositivos no escuro, mais a ideia de retornar às raízes do lugar no escuro se torna popular.

Por que usar o modo escuro

Modo escuro por motivos estéticos

Quando as pessoas perguntam por que gostam ou querem o modo escuro, a resposta mais popular é "é mais confortável para os olhos" seguida de "é elegante e bonito". A Apple, na documentação do desenvolvedor 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 do ambiente.

Modo escuro como ferramenta de acessibilidade

Também há pessoas que precisam do modo escuro e o usam como outra ferramenta de acessibilidade, por exemplo, usuários com baixa visão. A ocorrência mais antiga dessa ferramenta de acessibilidade que encontrei foi o recurso CloseView do System 7, que tinha um botão de alternância para Preto sobre branco e Branco sobre preto. Embora o System 7 fosse compatível com cores, a interface do usuário padrão ainda era em preto e branco.

Essas implementações baseadas em inversão demonstraram seus pontos fracos quando as cores foram introduzidas. Uma pesquisa de usuário realizada por Szpiro etc. sobre como pessoas com dispositivos de computação com acesso de baixa visão (link em inglês) mostrou que todos os usuários entrevistados não gostaram de imagens invertidas, mas que muitos preferiram texto claro em um fundo escuro. A Apple acomoda essa preferência do usuário com um recurso chamado Inverter Inteligente, que inverte as cores na tela, exceto imagens, mídia e alguns apps que usam estilos de cor escura.

Uma forma especial de baixa visão é a síndrome da visão computacional, também conhecida como fadiga ocular digital, que é definida como "a combinação de problemas oculares e visuais associados ao uso de computadores (incluindo computadores, laptops e tablets) e outros monitores eletrônicos (por exemplo, smartphones e dispositivos de leitura eletrônica"). Tem sido proposto que o uso de dispositivos eletrônicos por adolescentes, principalmente à noite, aumenta o risco de sono mais curto, maior latência no início e maior deficiência de sono. Além disso, a exposição à luz azul foi amplamente relatada de estar envolvida na regulação do ritmo circadiano e do ciclo de sono, e ambientes com iluminação irregular podem levar à privação do sono, possivelmente afetando o desempenho do humor e da tarefa, de acordo com a pesquisa de Rosenfield. Para limitar esses efeitos negativos, reduza a luz azul ajustando a temperatura da cor da tela usando recursos como o modo noturno do iOS ou o Modo noturno do Android, e também evitar luzes brilhantes ou irregulares em geral usando temas escuros ou modos escuros.

Economia de energia no modo escuro em telas AMOLED

Por fim, o modo escuro é conhecido por economizar muito de energia em telas AMOLED. Estudos de caso do Android focados em apps do Google conhecidos, como o YouTube, mostraram que a economia de energia pode ser de até 60%. O vídeo abaixo tem mais detalhes sobre esses estudos de caso e a economia de energia por app.

Como ativar o modo escuro no sistema operacional

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

Os sistemas operacionais com suporte a um modo escuro ou tema escuro geralmente têm a opção de ativá-los nas configurações. No macOS X, ele está na seção General da preferência do sistema e chamada Appearance (captura de tela). No Windows 10, ele está na seção Colors com o nome Choose your color (captura de tela). No Android Q, ela pode ser encontrada em Tela, como uma chave 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

Só mais um pouquinho de 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 que está sendo renderizado. Eles são usados na regra @media do CSS para aplicar condicionalmente estilos a um documento e em vários outros contextos e linguagens, como HTML e JavaScript. O nível 5 das consultas de mídia apresenta os chamados recursos de mídia de preferência do usuário, ou seja, uma maneira de os sites detectarem a maneira preferencial de exibir conteúdo.

O recurso de mídia prefers-color-scheme é usado para detectar se o usuário solicitou que a página usasse um tema de cores claras ou escuras. Funciona com os seguintes valores:

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

Compatibilidade com o modo escuro

Como descobrir se o navegador oferece suporte ao modo escuro

Como o modo escuro é informado por uma consulta de mídia, é possível verificar facilmente se o navegador atual oferece suporte ao modo escuro conferindo se a consulta de mídia prefers-color-scheme corresponde. Não incluo nenhum valor, mas apenas verifique se a consulta de mídia é correspondente.

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

No momento, 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 a partir da versão 13 no iOS. Para todos os outros navegadores, consulte a seção Posso usar tabelas de suporte?.

Saber 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 acessem as preferências de esquema de cores do usuário no momento da solicitação, permitindo que os servidores alinhem o CSS correto e evitem um flash de tema de cor incorreto.

Modo escuro na prática

Agora vamos conferir, na prática, como é o suporte ao modo escuro. Assim como no Highlander, no modo escuro, só pode haver um: escuro ou claro, mas nunca ambos. Por que estou falando disso? Porque esse fato deve afetar a estratégia de carregamento. Não force os usuários a fazer o download do CSS no caminho crítico de renderização para um modo que eles não usam no momento. Para otimizar a velocidade de carregamento, dividimos meu CSS do app de exemplo que mostra as recomendações a seguir na prática em três partes para adiar CSS não essencial:

• style.css que contém regras genéricas que são 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.

Carregando estratégia

Os dois últimos tipos, light.css e dark.css, são carregados condicionalmente com uma consulta <link media>. Inicialmente, nem todos os navegadores oferecem suporte a prefers-color-scheme (detectável usando o padrão acima), que eu processo dinamicamente carregando o arquivo light.css padrão por um elemento <link rel="stylesheet"> inserido condicionalmente em um script inline minúsculo. A luz é uma escolha arbitrária, mas eu também poderia ter tornado 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 da folha de estilo

Uso ao máximo as variáveis CSS, isso permite que minha style.css genérica seja genérica, e toda a personalização do modo claro ou escuro acontece nos outros dois arquivos dark.css e light.css. Abaixo há um trecho dos estilos reais, mas isso deve ser suficiente para transmitir a ideia geral. Declaro duas variáveis, -⁠-⁠color e -⁠-⁠background-color, que basicamente criam um tema de referência escuro sobre a luz e claro sobre 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);
}

Em style.css, uso essas variáveis na regra body { … }. Como elas são definidas na pseudoclasse CSS :root, um seletor que, em HTML, representa o elemento <html> e é idêntico ao html, exceto pelo fato de ter especificidade maior, eles são propagados, o que serve para declarar variáveis CSS globais.

/* 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 separado por espaço light dark.

Isso informa ao navegador a quais temas de cor meu app é compatível e permite que ele ative variantes especiais da folha de estilo do user agent. Isso é útil para, por exemplo, permitir que o navegador renderize campos de formulário com plano de fundo escuro e texto claro, ajuste as barras de rolagem ou ative uma cor de destaque com reconhecimento de 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 as variáveis CSS para as coisas importantes no meu site. A organização semântica dos estilos ajuda muito no 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. Abaixo há mais algumas variáveis que uso no 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, é possível 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 conferir como a página reage.

Carregando impacto

Ao usar esse exemplo, você pode ver por que carrego dark.css e light.css usando consultas de mídia. Tente alternar o modo escuro e atualizar a página: as folhas de estilo não correspondentes ainda são carregadas, mas com a menor prioridade, para que nunca concorram com os recursos necessários para o site no momento.

Como reagir em mudanças no modo escuro

Como qualquer outra mudança de consulta de mídia, as alterações do modo escuro podem ser inscritas via JavaScript. É possível usar isso para, por exemplo, mudar dinamicamente o favicon de uma página ou o <meta name="theme-color"> que determina a cor da barra de URL no Chrome. O exemplo completo acima mostra isso na prática. 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, você pode 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á selecionada. Por exemplo, é possível ter uma cor para o modo claro e outra para o modo escuro. No momento, não era possível defini-las no manifesto. Consulte o problema do w3c/manifest#975 no GitHub.

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

Como depurar e testar o modo escuro

Emular prefers-color-scheme no DevTools

Mudar o esquema de cores de todo o sistema operacional pode ser muito irritante. 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 comando, comece a digitar Rendering, execute o comando Show Rendering e mude a opção Emulate CSS media feature preferidos-color-scheme.

Captura de tela de prefers-color-scheme com Puppeteer

O Puppeteer é uma biblioteca do Node.js que fornece uma API de alto nível para controlar o Chrome ou o Chromium pelo protocolo DevTools. Com o dark-mode-screenshot, fornecemos um script Puppeteer que permite criar capturas de tela das páginas nos modos claro e escuro. É possível executar esse script como um script único ou, como alternativa, torná-lo parte do 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ê deve 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 um pouco mais escuro. Por exemplo, rgb(250, 250, 250) funciona bem.

Recolorir e escurecer imagens fotográficas

Se você comparar as duas capturas de tela abaixo, vai perceber que não apenas o tema principal mudou de escuro sobre luz para claro sobre escuro, mas também 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 me refiro a isso como recolorização.

É possível mudar a cor usando um filtro CSS nas minhas imagens. Uso um seletor de CSS que faz a correspondência de todas as imagens sem .svg no URL. A ideia é que posso dar aos gráficos vetoriais (ícones) um tratamento de recoloração diferente das imagens (fotos). Saiba mais sobre isso no próximo parágrafo. Observe como uso novamente uma variável CSS para que eu possa alterar meu filtro de forma flexível.

Como a nova cor 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);
}

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

Nem todos são iguais e cada pessoa tem necessidades diferentes no modo escuro. Ao usar o método de recoloração descrito acima, posso facilmente tornar a intensidade da 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 recoloração. Observe que document.documentElement fornece uma referência ao elemento raiz do documento, ou seja, o mesmo elemento que posso referenciar com a pseudoclasse CSS :root.

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 pesquisas tenham mostrado que as pessoas não gostam de inversão de fotos, ela funciona muito bem para a maioria dos ícones. Novamente, uso variáveis CSS para determinar o valor da inversão nos estados regular e :hover.

Observe como eu inverto os ícones apenas em dark.css, mas não em light.css, e como :hover recebe uma intensidade de inversão diferente nos dois casos para fazer o ícone parecer 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 in-line, em vez de usar filtros de inversão, é possível aproveitar a palavra-chave CSS currentColor que representa o valor da propriedade color de um elemento. Isso permite que você use o valor color em propriedades que não o recebem por padrão. Convenientemente, se currentColor for usado como o valor dos atributos fill ou stroke de SVG, ele receberá o valor herdado da propriedade de cor. Melhor ainda: isso também funciona para <svg><use href="…"></svg>, então 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 o src de uma imagem ou de alguma forma via CSS. Confira essa aplicação na demonstração abaixo.

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

Transições suaves entre os modos

A mudança do modo escuro para o modo claro ou vice-versa pode ser suavizado graças ao fato de que color e background-color são propriedades CSS animados. Para criar a animação, basta declarar dois transitions para as duas propriedades. O exemplo abaixo ilustra a ideia geral. Você pode experimentá-la 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, em geral, recomendamos trabalhar exclusivamente com prefers-color-scheme no atributo media dos elementos <link> (e não inline nas folhas de estilo), mas há situações em que é recomendável trabalhar com prefers-color-scheme diretamente no código HTML. A direção de arte é uma situação assim. Na Web, a direção de arte lida com a aparência geral de uma página e como ela se comunica visualmente, estimula humores, contrastes de recursos e apelos psicológicos a um público-alvo.

No modo escuro, cabe ao designer decidir qual é a melhor imagem em um modo específico e se a recolorização das 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, definindo o hemisfério oriental como padrão em todos os outros casos. Obviamente, isso é meramente ilustrativo. Ative o modo escuro no dispositivo para conferir 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. Por isso, alguns usuários podem preferir que a interface do sistema operacional fique escura, mas ainda preferem ver as páginas da Web como estão acostumados a vê-las. Um ótimo padrão é aderir inicialmente ao sinal enviado pelo navegador usando prefers-color-scheme e, opcionalmente, permitir que os usuários modifiquem a configuração no nível do sistema.

O elemento personalizado <dark-mode-toggle>

É claro que você pode criar o código para isso, mas também pode usar um elemento personalizado pronto (componente da Web) que eu criei para essa finalidade. Ele se chama <dark-mode-toggle> e adiciona um botão de alternância (modo escuro: ativar/desativar) ou um seletor de tema (tema: claro/escuro) à página que pode ser totalmente personalizado. A demonstração abaixo mostra o elemento em ação. Ah, e eu também 🤫 introduzi-o 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 na demonstração abaixo. Se você marcar a caixa de seleção no terceiro e no quarto controle, veja como a seleção de modo é lembrada mesmo quando você atualiza a página. Isso permite que os visitantes mantenham o sistema operacional no modo escuro, mas aproveitem o site no modo claro ou vice-versa.

Conclusões

Trabalhar com o modo escuro e oferecer suporte a ele é divertido e abre novos caminhos de design. Para alguns visitantes, pode ser a diferença entre não conseguir gerenciar o site e ser um usuário feliz. Há algumas armadilhas, e um teste cuidadoso é definitivamente necessário, mas o modo escuro é definitivamente uma ótima oportunidade para mostrar que você se importa com todos os usuários. As práticas recomendadas mencionadas nesta postagem e recursos auxiliares, como o elemento personalizado <dark-mode-toggle>, inspiram confiança na sua capacidade de criar uma experiência incrível no modo escuro. Conte-me no Twitter o que você criou e se esta postagem foi útil ou também sugestões para melhorá-la. Agradecemos por ler. 🌒

Links relacionados

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

• Página de status da plataforma do Chrome
• Bug do Chromium
• Especificação de nível 5 de consultas de mídia

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

• A propriedade CSS e a metatag color-scheme
• Página de status da plataforma do Chrome
• Bug do Chromium
• Especificação de nível 1 do módulo de ajuste de cor CSS
• Problema do CSS WG no GitHub com a metatag e a propriedade do CSS
• Problema do HTML WhatWG no GitHub com a metatag (link em inglês)

Links gerais do modo escuro:

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

Artigos de pesquisa de histórico para esta postagem:

• O que os "supported-color-schemes" do modo escuro realmente fazem? 🤔
• Que haja a escuridão! 🌚 Talvez...
• Nova cor 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 é coeditora da especificação do Módulo de ajuste de cor CSS Nível 1. Gostaria de 🙏 agradecendo a Lukasz Zbylut, Rowan Merewood, Chirag Desai e Rob Dodson pelas análises completas deste artigo. A estratégia de carregamento é a criação de Jake Archibald. Emilio Cobos Álvarez me indicou o método de detecção de prefers-color-scheme correto. A dica com SVGs e currentColor referenciados foi de Timothy Hatcher (link em inglês). 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. Imagem principal de Nathan Anderson.