Detetar o dark mode em JavaScript: snippet com matchMedia

Este snippet de javascript deteta se o utilizador tem o computador em dark mode ou modo escuro! Se for o caso, devolve true. É um pedaço de código que ajuda a melhorar o teu site ou a tua aplicação, tornando-a mais acessível a quem prefere o modo escuro.

JavaScript Dark Mode

const isDarkMode = () =>
	globalThis.matchMedia?.("(prefers-color-scheme:dark)").matches ?? false;

// Utilização
isDarkMode();

O que é o dark mode ou modo escuro?

O dark mode é uma funcionalidade que muda a paleta de cores do aparelho para um tom mais escuro. Muita gente prefere o modo escuro porque reduz o cansaço visual e torna o texto mais fácil de ler no ecrã. O modo escuro está disponível em muitos aparelhos, nomeadamente smartphones, portáteis e tablets.

Se trabalhas em aplicações JavaScript, poder oferecer um modo escuro melhora o conforto dos teus utilizadores enquanto usam a aplicação.

Como ativar/desativar o modo escuro?

Aqui fica como ativar os temas escuros nos aparelhos e nas aplicações mais correntes, em Windows, Android, Mac e iOS:

Windows

1. No menu Iniciar, escolhe Definições e Personalização.
2. Escolhe a opção Fundo, do lado esquerdo do ecrã. Podes carregar o teu próprio tema escuro ou escolher um dos que o Windows traz.
3. Escolhe a opção Cores, do lado esquerdo do ecrã. Podes optar por uma cor mais agradável à vista, como o cinzento, o bege ou um amarelo ou azul esbatido (à tua escolha).
4. Testa a cor escolhida no tema escuro clicando em Escuro na opção Escolher o modo de aplicação predefinido. Se não gostares das cores que escolheste, tenta outra vez com outras!

Android

1. Vai a Definições, depois a Acessibilidade e por fim a Ecrã.
2. Ativa o tema Escuro para o aplicar, ou usa a inversão de cores.

MacOS

1. Vai às Preferências do Sistema.
2. Clica em Geral.
3. Escolhe a opção de aspeto que te convier melhor. Há as opções claro, escuro e automático, que muda consoante a hora do dia.

iOS

1. Vai a Definições.
2. Escolhe Ecrã e Brilho.
3. Ativa ou desativa o modo escuro.

Conclusão

O modo escuro traz conforto aos teus utilizadores, acrescentar uma funcionalidade de modo escuro às tuas aplicações é uma mais-valia nada despicienda.

Se procuras outros artigos sobre JavaScript e mais dicas, podes consultar os meus artigos de javascript.