Tema escuro automático

André Cipriani Bandarra

O Chrome 96 apresenta um teste de origem para os temas escuros automáticos no Android. Com esse recurso, o navegador aplica um tema escuro gerado automaticamente a sites com temas claros 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.

Inscrever-se no teste de origem

Também é possível ativar o algoritmo de escurecimento para seus usuários usando um teste de origem. Assim, você testa 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 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 Emula o modo escuro automático.

Em um smartphone Android

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

  1. Navegue até 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 e Tema e marque a caixa Aplicar temas escuros a sites, quando possível.

Agora, as páginas claras serão escurecidas no smartphone.

Personalização por elemento

Embora o objetivo seja que o tema escuro automático gere bons resultados em todos os casos, as primeiras conversas com os desenvolvedores sugeriram que eles gostariam de ajustar elementos específicos para se adaptar 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, personalizando os elementos desejados.

Como detectar o modo escuro automático

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

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: 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 dimensionar 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 desativar o recurso. Acompanhe a conversa neste 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 poderia causar um "flash de conteúdo escuro".

<head>
  <meta name="color-scheme" content="only light">
  ...
</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 de 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 procurando feedback em todas as áreas da implementação: desde os resultados do algoritmo de escurecimento até as APIs para desenvolvedores de personalização de elementos e de desativação.

Você pode enviar seu feedback por vários canais:

Foto de Félix Besombes.