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 ativou 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

Você também pode ativar o algoritmo de escurecimento para seus usuários com um teste de origem. Isso permite testar o desempenho do tema escuro automático em relação aos seus KPIs.

Consulte a documentação para saber como configurar um teste de origem, Depois, inscreva-se para o teste de origem do AutoDarkMode. para receber um token.

Testar o tema escuro automático no 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 Emular 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. Depois, marque a caixa com a opção Aplicar temas escuros aos sites, quando possível.

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

Personalização por elemento

Embora nosso objetivo seja usar o tema escuro automático para gerar bons resultados em todos os casos, conversas iniciais com 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 o JavaScript para detectar se o usuário está no tema escuro automático e, em seguida, personalizando os elementos desejados.

Detectar o tema escuro automático

Para detectar se o usuário está no tema escuro automático: Crie um elemento com a background-color definida 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 padrão para fornecer aos desenvolvedores uma API mais expressiva de 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 aos usuários, 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 selecionado. para respeitar a preferência do usuário e manter esses benefícios.

No entanto, caso não seja 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 sua página. A vantagem de usar a metatag é que ela impede a aplicação do tema escuro automático, 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 de 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 de 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 queremos receber feedback em todas as áreas da implementação: desde os resultados do algoritmo de escurecimento até as APIs do desenvolvedor para personalização e desativação de elementos.

Há vários canais para enviar seu feedback:

Foto de Félix Besombes.