Levando DarkMode ao seu site

Com as últimas atualizações dos sistemas operacionais mobile (iOS e Android), o Dark Mode (Modo Escuro), tem virado tendência tanto quanto nos sistemas operacionais, quando em aplicativos e sites e, com essa tendência crescente, você também pode querer adaptar o seu site para o dark mode de acordo com a escolha da máquina (ou dispositivo móvel) do usuário.

Para isso, podemos seguir por duas principais abordagens, via CSS ou via JavaScript, e neste artigo irei mostrar como fazer e você irá a escolher a opção que ficará melhor em sua aplicação ou site.

CSS

Seguindo esta abordagem iremos usar o prefers-color-scheme media query, que, atualmente tem sua compatibilidade nos principais navegadores (desktop e mobile), fazendo com seja muito simples sua aplicação e que alcance cerca de 77% dos potenciais usuários, como é possível ver na imagem abaixo:

Abaixo está um exemplo bem simples de como é a escrita do código, neste exemplo considerado que o seu site seja feito na versão light e passe a ter suporte ao dark mode:

body {
 background: #FFF;
 color: #000;
}
@media (prefers-color-scheme: dark) {
  body {
    background: #000;
    color: #FFF;
  }
}

O inverso também é possível, caso você construa a versão do seu site/aplicação em escuro e queira oferecer uma versão light, o código fica assim:

body {
 background: #000;
 color: #FFF;
}
@media (prefers-color-scheme: light) {
  body {
    background: #FFF;
    color: #000;
  }
}

Abaixo tem uma página exemplo simples que eu fiz para demonstrar a utilização do recurso, você pode testar e ver como se ele comporta quando carregado em dispositivos com as diferentes configurações:

https://codepen.io/caioc/pen/OJPqpyN

Uma maneira de simplificar a construção de temas inteiros é a utilização de variáveis, desta maneira, todos os lugares que você utilizar alguma cor, você coloca a variável que será alterada de acordo com as preferências do usuário, como mostrado em código abaixo:

:root {
  --color-background: #FFF;
  --color-text: #000;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-background: #000;
    --color-text: #FFF;
  }
}

body {
  background: var(--color-background);
  color: var(--color-text);
}

Assim você consegue construir folhas inteiras de CSS que irão alterar completamente o seu estilo de acordo com as variáveis que irão se alterar de acordo com o tema, simples e rápido 😁

JavaScript

Outra abordagem plausível é utilizando JavaScript, desta vez iremos utilizar o window.matchMedia, com essa abordagem temos dois principais ganhos:

1. Dar poder ao usuário de alternar entre tema escuro e claro, a qualquer momento, e independente das configurações selecionadas em seu sistema operacional;
2. Como mostrada na imagem abaixo, este recurso tem uma compatibilidade com um maior números de navegadores (desktop e mobiles), e atinge cerca de 93% de potenciais usuários, podendo chegar, dependendo de seu público, a 100% facilmente.

Abaixo estou colocando um simples exemplo de como iremos utilizar o window.matchMedia em seu código JavaScript:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // darkMode
}

Vale ressaltar que, dentro de sua condicional, é muito importante testar se o window.matchMedia exista de fato para que não ocorra um erro fatal em seu código que impossibilite o uso de quaisquer outro código JavaScript em sua página.

Abaixo segue uma página simples que eu criei para mostrar um exemplo utilizando essa abordagem. Ele funciona da seguinte maneira: quando identifica que o modo escuro está ativo, uma classe darkMode é adicionada ao body da página, permitindo que, qualquer elemento seja alterado utilizando essa classe e, também existe um botão para você alternar entre dark e light mode a qualquer momento:

https://codepen.io/caioc/pen/LYEaWGv

Você também pode utilizar esta opção para alterar algum elemento específico ao invés de uma classe mais geral, ai fica a critério do desenvolvedor no momento da construção.

Outra facilidade que podemos incluir é um eventListener para que, quando o usuário altere as configurações em seus dispositivo/máquina, automaticamente o seu site/aplicação reflita o tema alterado também.

Abaixo segue um código exemplo com eventListener que você pode adaptar para sua realidade:

const darkModeMatch = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
function updateDarkMode(callback) {
  if (!darkModeMatch) return;
  darkModeMatch.addListener(({ matches }) => callback(matches));
}
function changeDarkMode(isDarkModeActive) {
  if (isDarkModeActive) {
    document.querySelector('body').classList.add('darkMode')
  } else {
    document.querySelector('body').classList.remove('darkMode')
  }
}
updateDarkMode(changeDarkMode);

Finalizando

Para finalizar o artigo, este é um recurso que vem sendo amplamente principalmente em aplicativos em dispositivos móveis, sendo assim, você deve considerar antes de implementar em seu site ou aplicação.

Caso você tenha atividades que tenham um impacto nas funcionalidades para o seu usuário, talvez o modo escuro não deva ser priorizado por enquanto, sendo assim, procure implementar essa feature em algum momento que você esteja mais tranquilo no seu desenvolvimento.

E você, já implementou isso em algum site ou aplicação? Deixe nos comentários o que você acha sobre esse recurso e como foi o resultado caso você já tenha implementado 😃