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

Excesso de propaganda ou necessidade? Saiba tudo sobre o modo escuro e saiba como aproveitá-lo para beneficiar seus usuários.

Thomas Steiner

Introdução

Modo escuro antes do modo escuro

Fizemos o círculo completo com o modo escuro. No início da computação pessoal, o modo escuro não era uma questão de escolha, mas uma questão de fato: Monitores monocromáticos de computador CRT, que disparavam 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 resto da tela era preto, esses modelos eram frequentemente chamados telas verdes.

Os CRTs de cor introduzidos subsequentemente exibiram várias cores com o uso de fósforos vermelho, verde e azul. Eles criaram o branco ativando todos os três fósforos simultaneamente. Com o surgimento das tecnologias WYSIWYG mais sofisticadas publicação em computadores, a ideia de fazer o documento virtual parecer uma folha de papel física se tornou popular.

Foi aqui que começou a tendência de design dark-on-white, e essa tendência foi estendida Web baseada em documentos. O primeiro navegador do mundo, WorldWideWeb (lembre-se, O CSS ainda nem foi inventado páginas da Web exibidas dessa forma. Curiosidade: o segundo navegador, O Navegador de modo de linha, um navegador baseado em terminal, foi verde no escuro. Hoje em dia, páginas e apps da Web normalmente são projetados com texto escuro em um fundo claro, uma suposição de referência que também está codificada nas folhas de estilo do user agent, incluindo do Chrome.

Os dias das CRTs estão no passado. O consumo e a criação de conteúdo migraram para os dispositivos móveis que usam LCD com iluminação de fundo; ou telas 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 por diversão e jogos sofisticados costumam ocorrer após o horário comercial em ambientes com pouca iluminação. As pessoas até aproveitam os dispositivos na cama à noite. Quanto mais pessoas usam os dispositivos no escuro, mais popular se torna a ideia de voltar às raízes do luz sobre escuro.

Por que usar o modo escuro?

Modo escuro por motivos estéticos

Quando as pessoas são perguntadas por que gostam ou querem o modo escuro, a resposta mais popular é que "é mais agradável para os olhos" seguido por "é elegante e bonito". Apple na Documentação do desenvolvedor do modo escuro escreveu explicitamente: "A escolha de ativar uma aparência clara ou escura é estético para a maioria dos usuários e pode não estar relacionado às condições de iluminação do ambiente."

Modo escuro como uma ferramenta de acessibilidade

Outras pessoas 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 de uma ferramenta de acessibilidade que eu poderia encontrar é O recurso CloseView do System 7, que tinha uma opção para Preto sobre branco e Branco sobre preto. Embora o Sistema 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 seus pontos fracos quando as cores foram introduzidas. Pesquisa de usuário feita por Szpiro e outros em como pessoas com baixa visão acessam dispositivos de computação mostrou que todos os usuários entrevistados não gostaram de imagens invertidas, mas que muitos preferem texto claro em um fundo escuro. A Apple atende a essa preferência do usuário com um recurso chamado Inverter inteligente, que inverte as cores na tela, exceto para imagens, mídia, e alguns que usam estilos de cores escuras.

Uma forma especial de baixa visão é a síndrome da visão computacional, também conhecida como cansaço digital do olho, que é definido como "a combinação de problemas oculares e visuais associado ao uso de computadores (incluindo computadores, laptops e tablets) e outros monitores eletrônicos (por exemplo, smartphones e dispositivos de leitura eletrônica)." Foi proposta o uso de dispositivos eletrônicos por adolescentes, especialmente à noite, resulta em um risco maior de uma duração de sono mais curta, latência maior no início do sono e aumento da deficiência de sono. Além disso, a exposição à luz azul foi amplamente informado estar envolvido na regulamentação ritmo circadiano e do ciclo do sono, ambientes de luz irregulares podem levar à privação de sono, possivelmente afetando o humor e o desempenho das tarefas, de acordo com pesquisa da Rosenfield. Para limitar esses efeitos negativos, reduza a luz azul ajustando a temperatura da cor da tela por meio de recursos como o iOS Night Shift ou do Android O Modo noturno pode ajudar, bem como evitar luzes brilhantes ou luzes irregulares em geral com temas escuros ou modos escuros.

Economia de energia no modo escuro em telas AMOLED

Por fim, o modo escuro economiza muita energia Telas AMOLED. Estudos de caso do Android com foco em apps conhecidos do Google como o YouTube, mostraram que a economia de energia pode ser de até 60%. O vídeo abaixo mostra mais detalhes sobre esses estudos de caso e a economia de energia por app.

Como ativar o modo escuro no sistema operacional

Agora que expliquei por que o modo escuro é tão importante para muitos usuários, vamos analisar como apoiá-la.

Sistemas operacionais compatíveis com o modo escuro geralmente têm a opção de ativá-lo nas configurações. No macOS X, ele está na seção Geral da preferência do sistema com o nome Aparência (captura de tela). No Windows 10, ela está na seção Cores com o nome Choose your color (captura de tela). No Android Q, esse recurso está disponível em Tela como um botão ativar do tema escuro (captura de tela). No iOS 13, é possível alterar a Aparência no menu 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. Consultas de mídia permitem que os autores testem e consultem valores ou recursos do user agent ou do dispositivo de exibição independentemente do documento ser renderizado. Eles são usados na regra CSS @media para aplicar estilos a um documento condicionalmente. e em vários outros contextos e linguagens, como HTML e JavaScript. Consultas de mídia nível 5 introduziu os chamados recursos de mídia de preferência do usuário, ou seja, uma maneira de os sites detectarem a maneira preferida do usuário de exibir conteúdo.

O prefers-color-scheme de mídia digital é usado para detectar se o usuário solicitou que a página usasse um tema de cor clara ou escura. Ela funciona com os seguintes valores:

• light: Indica que o usuário notificou o sistema de que prefere uma página com tema claro (texto escuro em fundo claro).
• dark: Indica que o usuário notificou o sistema de que prefere uma página com tema escuro (texto claro em 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, você pode verificar facilmente se o navegador atual oferece suporte ao modo escuro, verificando se a consulta de mídia prefers-color-scheme corresponde a ela. Observe como não incluo nenhum valor, mas somente 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 em que este artigo foi escrito, prefers-color-scheme podia ser usado em computadores e dispositivos móveis (quando disponível). no Chrome e no Edge a partir da versão 76, Firefox a partir da versão 67, e 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 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; permitir que os servidores insiram inline no CSS correto e, portanto, evitem um flash de tema de cor incorreto.

Modo escuro na prática

Vamos ver como funciona o suporte para o modo escuro na prática. Assim como no Highlander, No modo escuro, só pode haver uma opção: clara ou escura, mas nunca as duas. Por que eu digo isso? 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 ele não usa atualmente. Para otimizar a velocidade de carregamento, dividi o CSS do app de exemplo. que mostra na prática as seguintes recomendações em três partes para adiar CSS não essenciais:

• 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.

Carregando estratégia

Os dois últimos, light.css e dark.css, são carregados condicionalmente com uma consulta <link media>. Inicialmente, nem todos os navegadores oferecem suporte ao prefers-color-scheme (detectável usando o padrão acima), com o qual lidar 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. Também poderia ter tornado escura a experiência de substituição padrão. Para evitar uma tempestade de conteúdo sem estilo, Escondi o conteúdo da página até que o 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

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

No meu style.css, uso essas variáveis na regra body { … }. Conforme são definidos Pseudoclasse :root CSS: uma seletor que, em HTML, representa o elemento <html> e é idêntico ao seletor html, exceto por sua especificidade ser mais altos, eles descem em cascata, 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 pelo valor separado por espaços light dark.

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

O resto é apenas uma questão de definir variáveis CSS para as coisas importantes no meu site. A organização semântica dos estilos é muito útil ao trabalhar com o modo escuro. Por exemplo, em vez de -⁠-⁠highlight-yellow, considere chamar a variável -⁠-⁠accent-color, como "amarelo" pode não ser amarelo no modo escuro ou vice-versa. Abaixo está um exemplo com mais algumas variáveis que uso em 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 abaixo, veja o exemplo completo que coloca os conceitos acima em prática. Tente ativar o modo escuro nas configurações do seu sistema operacional e ver como a página reage.

Carregando impacto

Ao testar esse exemplo, é possível notar por que carrego meus dark.css e light.css usando consultas de mídia. Tente ativar o modo escuro e atualizar a página: as folhas de estilo não correspondentes específicas ainda são carregadas, mas com a menor prioridade, para que eles nunca concorram com os recursos que o site precisa no momento.

Como reagir em mudanças no modo escuro

Como qualquer outra alteração da consulta de mídia, as mudanças do modo escuro podem ser inscritas via JavaScript. Você pode usar isso para, por exemplo, alterar dinamicamente o favicon de uma página ou alterar <meta name="theme-color"> que determina a cor da barra de URL no Chrome. O exemplo completo acima mostra isso em ação. para ver a cor do tema e as alterações do favicon, abra o em outra guia.

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

A partir do Chromium 93 e do 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 será selecionado o primeiro que corresponder. Por exemplo, você pode ter uma cor para modo claro e outra para o modo escuro. No momento em que este artigo foi escrito, não é possível defini-los no manifesto. Consulte w3c/manifest#975 no GitHub problema.

<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

Emulando prefers-color-scheme no DevTools

Mudar o esquema de cores de todo o sistema operacional pode ser irritante bem rápido, Por isso, o Chrome DevTools agora permite emular o esquema de cores preferido do usuário de forma a afetar somente 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 prefers-color-scheme.

Fazendo captura de tela de prefers-color-scheme com o Puppeteer

O Puppeteer é uma biblioteca do Node.js. que fornece uma API de alto nível para controlar o Chrome ou o Chromium pela Protocolo DevTools. Com o dark-mode-screenshot, fornecemos um script do Puppeteer que permite criar capturas de tela das páginas nos modos claro e escuro. É possível executar esse script como um único ou, como alternativa, torná-lo parte de sua 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

Evitar o branco total

Um pequeno detalhe que você deve ter notado é que eu não uso branco puro. Em vez disso, para evitar brilho e sangramento no conteúdo escuro ao redor, Escolho um branco um pouco 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 perceber que não apenas o tema principal mudou. de escuro sobre luz para claro sobre escuro, mas a imagem principal também é um pouco diferente. Minha pesquisa de usuário mostrou que a maioria das pessoas entrevistadas preferem imagens um pouco menos vibrantes quando o modo escuro está ativo. Eu chamo isso de recolorização.

.

A nova coloração 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 é que posso dar a gráficos vetoriais (ícones) um tratamento de recolorização diferente do que minhas imagens (fotos), falaremos mais sobre isso no próximo parágrafo. Como uso novamente uma variável CSS, para que eu possa alterar meu filtro com flexibilidade.

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

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

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

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

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

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

Inverter gráficos vetoriais e ícones

Em gráficos vetoriais que, no meu caso, são usados como ícones referenciados por meio de elementos <img>, usar um método de recolorização diferente. Embora a pesquisa tenha mostrado que as pessoas não gostam de inversão para fotos, funciona muito bem para a maioria dos ícones. Novamente, uso variáveis CSS para determinar o valor da inversão no estado normal e :hover.

.

Observe como eu só inverto ícones em dark.css, mas não em light.css, e como :hover tem uma intensidade de inversão diferente nos dois casos para fazer o ícone aparecer ligeiramente mais escura ou ligeiramente mais clara, dependendo do modo que o usuário selecionou.

/* 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, você pode usar o currentColor Palavra-chave CSS 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 do SVG Atributos fill ou stroke em vez disso, ela toma seu valor do valor herdado da propriedade de cor. Melhor ainda: isso também funciona para <svg><use href="…"></svg>, Assim, é possível ter recursos separados e currentColor ainda serão aplicadas no contexto. Isso só funciona para SVGs inline ou <use href="…">. mas não SVGs referenciados como o src de uma imagem ou usando CSS. É possível conferir como isso é aplicado 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 facilitada que color e background-color sejam propriedades CSS animadas. Criar a animação é tão fácil quanto declarar duas transitions para as duas propriedades. O exemplo abaixo ilustra a ideia geral. Você pode experimentá-la no 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 o modo escuro

No entanto, por motivos gerais de desempenho de carregamento, recomendamos trabalhar exclusivamente com prefers-color-scheme. no atributo media dos elementos <link> (em vez de inline nas folhas de estilo), há situações em que convém trabalhar com prefers-color-scheme diretamente in-line no código HTML. A direção de arte é uma dessas situações. 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, contrasta características e atrai psicologicamente um público-alvo.

Com o modo escuro, cabe ao julgamento do designer decidir qual é a melhor imagem em um modo específico e se a renovação de cores das imagens talvez não seja boa o suficiente. Se usado com o elemento <picture>, o <source> da imagem a ser mostrada pode ser dependente 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, o padrão é o hemisfério oriental em todos os outros casos. Obviamente, isso serve apenas para fins ilustrativos. 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 adicionar uma desativação

Como mencionado na seção Por que usar o modo escuro acima, o modo escuro é uma opção estética para a maioria dos usuários. Como consequência, talvez alguns usuários queiram ter a interface do sistema operacional no escuro, mas preferem ver as páginas da Web da mesma forma que estão acostumados a vê-las. Um ótimo padrão é aderir inicialmente ao sinal enviado pelo navegador prefers-color-scheme, mas permitir que os usuários modifiquem a configuração no sistema.

O elemento personalizado <dark-mode-toggle>

É claro que você pode criar o código para isso por conta própria, 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 (modo escuro: ativado/desativado) ou um seletor de tema (tema claro/escuro) para personalizar totalmente a página. A demonstração abaixo mostra o elemento em ação (Ah, e eu também 🤫 coloquei em silêncio em todas outro 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 abaixo. Se você marcar a caixa de seleção no terceiro e no quarto controle, verá como a seleção do modo é lembrado mesmo quando a página é atualizada. Assim, os visitantes podem manter o sistema operacional no modo escuro, mas aproveitem o site no modo claro ou vice-versa.

Conclusões

Trabalhar e oferecer suporte ao modo escuro é divertido e abre novas possibilidades de design. Para alguns visitantes, isso pode ser a diferença entre não conseguir gerenciar seu site e ser um usuário feliz. Há algumas armadilhas, e testes cuidadosos são importantes, mas o modo escuro é uma ótima oportunidade para mostrar que se importa com todos os usuários. As práticas recomendadas mencionadas nesta postagem e pessoas como a Elemento personalizado <dark-mode-toggle> vai ajudar você a criar uma experiência incrível com o modo escuro. Conte no Twitter o que você criou e se esta postagem foi útil. ou sugestões para melhorá-lo. 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 das consultas de mídia de nível 5

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

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

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 contexto para esta postagem:

• O que os "supported-color-schemes" do modo escuro Realmente faz? 🤔
• Que haja escuridão! 🌚 Talvez...
• Recolorir 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 CSS Color Adjustment Module Level 1 (módulo de ajuste de cores CSS nível 1). Eu gostaria de 🙏 agradeço a Lukasz Zbylut, Rowan Merewood, Chirag Desai, e Rob Dodson por suas análises completas deste artigo. A estratégia de carregamento é a ideia 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 indicados veio de Timothy Hatcher. Por fim, sou grato aos muitos participantes anônimos dos vários estudos de usuários que ajudaram a moldar as recomendações deste artigo. Imagem principal de Nathan Anderson.