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 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 do Chrome.
Inscrição 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 o DevTools
Para ativar o tema escuro automático no DevTools:
- Clique no menu de três pontos.
- Selecione Mais ferramentas e Renderização.
- 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:
- Navegue até
chrome://flags
e ative o experimento#darken-websites-checkbox-in-theme-setting
. - 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.
Detectar o tema 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 o 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 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 personalizado 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 seja 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 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 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.
Há vários canais para enviar seu feedback:
- Na pesquisa para desenvolvedores.
- Registrar um bug no projeto Chromium.
- Preencha o formulário de feedback sobre o teste do Origin.
Foto de Félix Besombes.