Neste artigo você vai aprender a como detectar dark theme com JavaScript, de uma forma simples e eficaz!
Fala programador(a), beleza? Bora aprender mais sobre JavaScript!
Detectar dark theme com JavaScript é uma funcionalidade cada vez mais comum em sites e aplicativos modernos.
Com a popularização do modo escuro em dispositivos e sistemas operacionais, é importante garantir que seu site ou aplicativo possa se adaptar a essas preferências do usuário.
Neste artigo, exploraremos diferentes maneiras de detectar o dark theme com JavaScript.
O que é dark theme?
O dark theme, também conhecido como modo noturno ou modo escuro, é uma interface de usuário com um fundo escuro e texto claro.
Em contraste com o tema claro tradicional, o dark theme é considerado mais fácil para os olhos em ambientes com pouca luz ou para pessoas com sensibilidade à luz.
Além disso, o dark theme pode economizar a bateria em dispositivos móveis com tela OLED, já que o preto absoluto não requer energia para ser exibido.
Detectar dark theme com JavaScript
A detecção de dark theme com JavaScript pode ser feita de várias maneiras. Aqui estão algumas opções:
window.matchMedia()
Uma maneira de detectar o dark theme com JavaScript é usando a API window.matchMedia().
Esta API permite que você verifique a correspondência de uma consulta de mídia, incluindo se o usuário está usando um tema escuro.
const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
A consulta de mídia “(prefers-color-scheme: dark)” retorna true se o usuário estiver usando um tema escuro.
Com a variável isDarkTheme, é possível ajustar o estilo do seu site ou aplicativo de acordo com a preferência do usuário.
window.getComputedStyle()
Outra maneira de detectar o dark theme com JavaScript é usando o método window.getComputedStyle().
Este método retorna o estilo calculado de um elemento e pode ser usado para verificar a cor de fundo do corpo da página.
const bodyBgColor = window.getComputedStyle(document.body).getPropertyValue('background-color');
const isDarkTheme = bodyBgColor === 'rgb(0, 0, 0)';
Neste exemplo, a variável bodyBgColor contém a cor de fundo do corpo da página. Se a cor for preta (rgb(0, 0, 0)), a variável isDarkTheme é definida como true.
matchMedia + CSS personalizado
Uma terceira maneira de detectar o dark theme com JavaScript é usar a API window.matchMedia() em conjunto com CSS personalizado.
É possível definir um estilo diferente para o tema escuro usando CSS personalizado e, em seguida, usar a API matchMedia para verificar se o usuário está usando um tema escuro.
body {
background-color: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
Neste exemplo, o CSS personalizado define a cor de fundo do corpo da página como branco e a cor do texto como preto.
O media query especifica um estilo diferente para o tema escuro, com fundo preto e texto branco.
Com o CSS personalizado, a detecção de dark theme pode ser feita usando a API matchMedia, da mesma maneira que na primeira opção.
Quer aprender mais sobre React? Confira o vídeo abaixo:
Conclusão
Neste artigo, exploramos algumas maneiras de detectar dark theme com JavaScript.
A detecção de dark theme pode ser feita usando a API window.matchMedia(), o método window.getComputedStyle(), ou a combinação da API matchMedia com CSS personalizado.
Com essas opções, é possível garantir que seu site ou aplicativo se adapte à preferência de cor do usuário, proporcionando uma melhor experiência de usuário e, possivelmente, economizando energia em dispositivos móveis com tela OLED.
É importante lembrar que a detecção de dark theme com JavaScript não é uma funcionalidade nativa em todos os navegadores e dispositivos, portanto, é importante ter um fallback para garantir a funcionalidade básica do seu site ou aplicativo.
Além disso, é importante manter uma boa acessibilidade em todos os modos de cor, garantindo que o texto seja legível e os elementos visuais sejam claros e distintos.
Em resumo, a detecção de dark theme com JavaScript é uma funcionalidade cada vez mais importante em sites e aplicativos modernos.
Com essas opções, é possível garantir uma melhor experiência de usuário e maior adaptabilidade ao seu público-alvo.
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!