Tema escuro automático

André Cipriani Bandarra

O Chrome 96 apresenta um teste de origem para temas escuros automáticos no Android. Com esse recurso, o navegador aplica um tema escuro gerado automaticamente a sites com tema claro quando o usuário ativa os temas escuros no sistema operacional. Os usuários podem desativar os temas escuros desativando a opção no nível do SO ou em uma configuração específica no Chrome.

Inscreva-se no teste de origem

Também é possível ativar o algoritmo de escurecimento para seus usuários por um teste de origem. Assim, você pode testar o desempenho do tema escuro automático em relação aos seus KPIs.

Acesse a documentação para saber como configurar um teste de origem e inscreva-se no teste de origem do AutoDarkMode para receber um token.

Testar o tema escuro automático no seu dispositivo

Com o DevTools

Para ativar o tema escuro automático no DevTools:

  1. Clique no menu de três pontos.
  2. Selecione Mais ferramentas e Renderização.
  3. Selecione Ativar na opção Emular o modo escuro automático.

Em um smartphone Android

Para testar o tema escuro automático no seu smartphone Android:

  1. Acesse chrome://flags e ative o experimento #darken-websites-checkbox-in-theme-setting.
  2. Em seguida, toque no menu de três pontos, selecione Configurações, depois Tema e marque a caixa Aplicar temas escuros aos sites, quando possível.

Agora, as páginas claras vão ficar escuras no smartphone.

Personalização por elemento

Embora o objetivo do Tema Escuro Automático seja gerar bons resultados em todos os casos, as primeiras conversas com os desenvolvedores sugeriram que eles gostariam de ajustar elementos específicos para se adaptarem melhor à aparência desejada.

Neste teste de origem, essas personalizações são possíveis usando JavaScript para detectar se o usuário está no Tema Escuro Automático e, em seguida, personalizar os elementos desejados.

Como detectar o tema escuro automático

Para detectar se o usuário está no Tema Escuro Automático, crie um elemento com background-color definido como canvas e o esquema de cores definido como claro. Se a cor calculada para o plano de fundo não for branca (rgb(255, 255, 255)), o tema escuro automático será aplicado à página.

<div id="detection"
     style="display: none; background-color: canvas; color>-<sche>me: light"
/div

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

Personalizar um grande número de elementos

A solução acima pode ser difícil de escalonar se você precisar personalizar um número maior de elementos. Uma alternativa é usar a detecção automática do tema escuro para adicionar uma classe de marcador ao corpo da página:

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

Em seguida, use CSS para personalizar os elementos conforme necessário:

.auto-dark-theme > #my-element {
  border-color: red;
}

A API de personalização por elemento ainda está em desenvolvimento inicial. Estamos trabalhando com as equipes de padrões para oferecer aos desenvolvedores uma API mais expressiva para desativação. Acompanhe a conversa sobre esse problema do GitHub.

Como desativar o tema escuro automático

Além de respeitar a escolha do usuário no dispositivo, os temas escuros oferecem benefícios como melhorias na duração da bateria e acessibilidade. Em vez de desativar o Tema Escuro Automático, recomendamos implementar seu próprio tema escuro personalizado para respeitar a preferência do usuário e manter esses benefícios.

No entanto, se não for viável implementar seu próprio tema escuro e o resultado gerado pelo Tema Escuro Automático não for satisfatório, é possível desativar o recurso,

Como usar uma metatag

A primeira alternativa para desativar o tema escuro automático é adicionar a seguinte metatag ao cabeçalho da página. A vantagem de usar a metatag é que ela impede que o Tema Escuro Automático seja aplicado, o que pode causar um "flash de conteúdo escurecido".

<head>
  <meta name="color-scheme" content=&q>uot;onl<y lig>ht"
  ...
/head

Desativação por elemento

Uma segunda alternativa para desativar é definir o valor da propriedade CSS color-scheme como only light. Embora a desativação por elemento possa ser usada para desativar o modo escuro automático em toda a página, uma vantagem dessa abordagem é que ela permite desativar apenas partes específicas da página:

#my-element {
  color-scheme: only light;
}

Ainda é possível usar essa abordagem para desativar o tema escuro automático em toda a página, definindo o esquema de cores no elemento :root:

:root {
  color-scheme: only light;
}

Envie seus comentários

O Tema Escuro Automático ainda está sendo especificado, e estamos buscando feedback em todas as áreas da implementação: desde os resultados do algoritmo de escurecimento até as APIs para desenvolvedores para personalização e desativação de elementos.

Há muitos canais para enviar seu feedback:

Foto de Félix Besombes.