Tema escuro automático

André Cipriani Bandarra

O Chrome 96 introduz um teste de origem dos 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 esse recurso 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

Você também pode ativar o algoritmo de escurecimento para os usuários por um teste de origem. Isso permite 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 se inscreva no teste de origem do AutoDarkMode para receber um token.

Testar o tema escuro automático no dispositivo

Com o DevTools

Para ativar o tema escuro automático no DevTools:

  1. Clique no menu de três pontos.
  2. Selecione More Tools e Rendering.
  3. Selecione Ativar na opção Emular 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. Em seguida, marque a caixa com a opção Aplicar temas escuros a sites, quando possível.

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

Personalização por elemento

Embora nosso objetivo seja que o tema escuro automático gere bons resultados em todos os casos, as conversas iniciais com os desenvolvedores sugeriram que eles gostariam de ajustar elementos específicos para se adaptar melhor à aparência desejada.

Nesse 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 um tema escuro automático

Para detectar se o usuário está usando o 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 segundo plano 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');
}

Personalização de 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 de 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á no início do desenvolvimento. Estamos trabalhando com as equipes de padrões para fornecer aos desenvolvedores uma API mais expressiva para recusa. Acompanhe a conversa neste problema do GitHub (link em inglês).

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 de duração da bateria e acessibilidade. Em vez de desativar o tema escuro automático, recomendamos implementar seu próprio tema escuro selecionado, para respeitar a preferência do usuário e manter esses benefícios.

No entanto, se não for viável implementar um 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 sua 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="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 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 seu feedback.

O tema escuro automático ainda está sendo especificado, e queremos receber feedback em todas as áreas da implementação: desde os resultados do algoritmo de escurecimento até as APIs de desenvolvedor para personalização e desativação de elementos.

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

Foto de Félix Besombes.