Introdução

Você já se perguntou como os sites alternam perfeitamente entre os modos claro e escuro com base em suas preferências? Não é mágica – é um uso inteligente de tecnologias modernas da web. Nesta postagem, revelarei a técnica simples, mas poderosa, por trás de detectar se um usuário prefere o modo escuro e como você pode usar essas informações para melhorar a experiência do usuário em seu site.

Compreendendo a detecção do modo escuro

Com a popularidade do modo escuro, muitos sites e aplicativos agora oferecem temas que se alinham às preferências de sistema do usuário. Esse recurso é obtido usando a API matchMedia em JavaScript, que permite que aplicativos da web respondam a mudanças em consultas de mídia, como a preferência de esquema de cores do usuário.

Como funciona

A API matchMedia

O método window.matchMedia fornece uma maneira de avaliar consultas de mídia e adaptar a aparência do seu site com base nas preferências do usuário. Para verificar se o modo escuro está ativado, você pode usar a seguinte função JavaScript:

// Check if the user prefers dark mode
function isDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

Implementação Prática

index.html

    
    



    
Hello, World!

    
    

Função
• updateTheme: Esta função verifica a preferência do modo escuro e atualiza a classe de acordo. Atualizações em tempo real: adicionado um ouvinte de evento ao matchMedia para detectar alterações na preferência do esquema de cores e chamar o tema de atualização para ajustar a aparência em tempo real.

Quando você altera o esquema de cores do seu sistema, o site se adapta automaticamente para refletir sua preferência sem a necessidade de atualizar a página.

Siga-me no GitHub Avinash Tare