Detectar alterações nas preferências de tema do sistema usando JavaScript

JavaScript e CSS permitem que os usuários detectem a preferência de tema do usuário com o CSS’ prefers-color-scheme media query. Atualmente, é padrão usar essa preferência para mostrar o tema claro ou escuro em um determinado site. Mas e se o usuário alterar sua preferência enquanto estiver usando o aplicativo?

Para detectar uma alteração de preferência de tema do sistema usando JavaScript, o senhor precisa combinar matchMedia, prefers-color-schemee um ouvinte de eventos:

window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change',({ matches }) => {
  if (matches) {
    console.log("change to dark mode!")
  } else {
    console.log("change to light mode!")
  }
})

O change evento do matchMedia API notifica o senhor quando a preferência do sistema é alterada. O senhor pode usar esse evento para atualizar automaticamente a exibição do site em tempo real.

Adoro o fato de essa API permitir detectar a preferência do usuário no nível do sistema. Atender às necessidades do usuário é uma parte importante da criação de uma ótima experiência na Web!