Modo escuro automático com JavaScript

Um dos recursos mais solicitados nos aplicativos é o modo escuro. Para muitos usuários, o modo escuro oferece uma interface mais amigável aos olhos com menos tons de branco que podem causar fadiga ocular. O modo escuro também é conhecido por economizar bateria em telas AMOLED.

Frequentemente, os web designers usam o prefers-color-schemerecurso de mídia CSS para fornecer um tema diferente quando o modo escuro está ativado. prefers-color-schemeobtém a preferência do usuário por meio da configuração do sistema operacional ou da configuração do agente do usuário. Aqui está um exemplo simples:

/* Style rules for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
/* Style rules for light mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

const darkMode = window.matchMedia("(prefers-color-scheme:dark)").matches;

O modo escuro é um recurso extremamente útil para a maioria dos usuários. Aproveite o matchMedia()método para proporcionar uma melhor experiência para seus usuários.

Se você gostou deste artigo, também pode gostar do livro de Faraz Kelhini, Modern Asynchronous JavaScript . Até 15 de maio de 2022, você pode usar o código promocional fkajs_medium_35 para economizar 35% na versão do e-book. Os códigos promocionais não são válidos em compras anteriores.

Artigos de Faraz Kelhini