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:
- Clique no menu de três pontos.
- Selecione Mais ferramentas e Renderização.
- 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:
- 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. 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:
- Por meio da pesquisa para desenvolvedores.
- Registrar um bug no projeto do Chromium.
- Por meio do formulário de feedback do teste de origem.
Foto de Félix Besombes.