O que é prefers-color-scheme?

prefers-color-scheme é uma funcionalidade de mídia CSS que informa aos sites se você prefere um tema escuro ou claro. Os navegadores obtêm essa informação da configuração do modo escuro do seu sistema no Windows, macOS, Linux, Android ou iOS, e os sites alteram suas cores com @media (prefers-color-scheme: dark) em CSS ou window.matchMedia("(prefers-color-scheme: dark)") em JavaScript. Se um site continuar claro enquanto o seu sistema estiver no modo escuro, a primeira coisa a verificar é o que o navegador está informando.

Descrição da ferramenta

Esta ferramenta mostra o tema do seu sistema em um bloco grande: Escuro com uma lua ou Claro com um sol. Ela pergunta ao navegador se prefers-color-scheme: dark corresponde ao tema e monitora as alterações. Assim, quando você alterna entre o modo escuro e o claro nas configurações do dispositivo, o resultado é atualizado imediatamente, sem recarregar a página. Tudo o que não for informado como escuro aparece como Claro.

A resposta corresponde ao que o navegador informa aos sites, o que nem sempre coincide com a configuração do sistema. O Firefox, por exemplo, tem uma configuração de aparência dos sites que pode deixar todos os sites claros ou escuros, independentemente do tema do sistema.

Recursos

  • Mostra Escuro ou Claro rapidamente
  • Atualiza em tempo real quando você altera o tema do sistema
  • Funciona no navegador, sem precisar instalar nada