Nos últimos tempos o tema escuro, ou dark mode se transformou em uma febre, tanto que muitas empresas anunciam o suporte ao tema escuro como uma grande feature, pode?

Sendo ou não uma grande feature, vamos entender como implementar facilmente no nosso site hoje mesmo.

Bora?

O que é o Dark mode?

iPhone Dark mode iPhone Dark mode

O “Dark mode”, “Modo escuro” ou “Modo noturno” , é um tema para sites, aplicativos e sistemas que inverte a paleta de cores da tela, deixando o fundo na cor preta/cinza com as letras claras.

Existem vários motivos diferentes para gostar ou não do tema escuro, alguns gostam por que fica mais agradável aos olhos, outros porque simplesmente gostam do estilo.

Também tem o fato de que o dark mode ajuda na economia de bateria, principalmente se sua tela for OLED/AMOLED.

Implementando o dark mode

Antes de sairmos implementando, devemos entender que existem várias formas de implementar e a que vou mostrar aqui é apenas uma dessas formas, então vamos lá!

Qual abordagem vamos usar?

A abordagem mais comum é implementarmos alterando uma classe CSS no body ou html da página, mas essa você encontra fácil “pelas internet”.

Vamos usar uma abordagem menos comum, vamos implementar com javascript usando as variáveis do CSS.

Definindo as variáveis CSS do tema

No nosso CSS, vamos definir as variáveis CSS que vamos usar no tema:

html{
  --background: white;
  --text: black;
}

para este exemplo, vamos definir apenas uma variável para a cor de fundo –background e outra para a cor do texto –text.

Implementando a troca do tema

No nosso javascript, vamos definir um objeto com as variáveis dos nossos temas, neste caso teremos apenas dois temas, o tema claro e o tema escuro:

const themes = {
  light: {
    background: 'white',
    text: 'black',
  },
  dark: {
    background: 'black',
    text: 'white',
  }
};

Então implementamos nosso método que vai fazer a alteração entre os temas, ela vai receber uma string com o nome do tema “light” ou “dark” e vai alterar dinamicamente as variáveis que definimos no nosso CSS.

function setTheme(newTheme) {
  const themeColors = themes[newTheme]; // Seleciona o tema para aplicar

  Object.keys(themeColors).map(function(key) {
    html.style.setProperty(`--${key}`, themeColors[key]); // Altera as variáveis no css
  });
}

Falta agora, criarmos alguma maneira de habilitarmos e desabilitarmos o dark mode e, para isso, vamos criar um checkbox para facilitar o processo.

<input name="theme" type="checkbox" class="toggle-dark-mode" />

Quando ele estiver marcado, :checked, o dark mode está habilitado, e quando ele estiver desmarcado, o light mode está habilitado.

Vamos adicionar um evento para escutar quando ele for marcado, para então chamarmos nosso método setTheme():

const darkModeToggle = document.querySelector('input[name=theme]');
darkModeToggle.addEventListener('change', function({ target }) {
  setTheme(target.checked ? 'dark' : 'light');
});

E pronto, já temos a nossa troca de temas funcional. Fácil né?

Bônus

Para incrementar ainda mais nosso projeto, vamos implementar uma forma de guardar o tema escolhido pelo usuário, e deixar ele ativo até que o usuário altere novamente.

Conseguimos fazer isso facilmente com poucas alterações no nosso código. Para isso, vamos alterar nosso método setTheme() para que ele salve o novo tema escolhido no localStorage.

function setTheme(newTheme) {
  const themeColors = themes[newTheme]; // Seleciona o tema para aplicar

  Object.keys(themeColors).map(function(key) {
    html.style.setProperty(`--${key}`, themeColors[key]); // Altera as variáveis no css
  });

  localStorage.setItem('theme', newTheme); //Salva o tema escolhido no localStorage
}

E também, ao carregar a página vamos verificar no localStorage se existe algum tema já salvo, e caso exista, chamamos nosso método setTheme() para alterar o tema:

const theme = localStorage.getItem('theme');
if( theme ) {
  setTheme(theme)
}

E com isso temos nosso dark mode funcionando e guardando a preferência do usuário.

Bem legal né?

Conclusão

O dark mode pode ter gerado um buzz desnecessário, mas tudo que pode agregar para o usuário, eu acho válido. Então, dark mode all the things! \o/

Você pode habilitar o dark mode aqui no site! Foi implementado exatamente como descrevi aqui. :)

Algumas referências sobre o impacto na autonomia da bateria:

Até mais e obrigado pelos peixes.