Dark Mode com React JS e Styled Components

Vou falar um pouco sobre como criar o tão amado Dark Mode no React JS de uma forma bem simples

3 min readJul 25, 2020

Fala devs, beleza? Hoje vou dar uma dica para vocês de um jeito bem simples para criar o Dark Mode na sua aplicação React JS utilizando apenas Styled Components!

Mas antes de começar o handson do código, por que utilizar Dark Mode na aplicação?

Passamos muito tempo olhando para os nossos celulares/computadores, principalmente quando utilizamos como ferramenta de trabalho, e o uso excessivo pode causar uma tensão ocular devido a quantidade de brilho emanado pela tela do dispositivo. Com isso, usar o Dark Mode proporcionará o descanso na vista do nosso usuário, o que consequentemente ocasionará em uma melhor noite de sono, menos dores de cabeça, e uma saúde mais estável.

Então vamos começar a desenvolver?!

Se você já tem conhecimento em React, Styled-Components e Hooks vai ser algo super simples, caso se sinta perdido, recomendo dar uma boa lida nas documentações antes de prosseguir.

Primeiro vamos criar um projeto usando a CLI do React rodando o comando: npx create-react-app dark-mode

Depois que o projeto for criado, vamos criar dois arquivos, um chamado theme.js e o outro styles.js, pode ser na raiz do projeto mesmo, hoje o nosso foco não é em estrutura de pastas do nosso projeto!

O primeiro arquivo que vamos trabalhar é o theme.js que vai ficar assim:

Basicamente estamos criando dois objetos, um lightTheme e o outro darkTheme, que contém nossa paleta de cores

Feito isso, vamos para o styles.js:

Nesse arquivo temos a estilização da nossa página, o que realmente importa para a gente é a propriedade theme que estamos passando nas cores do componente ${({theme}) => theme.background}

Mas pera, da onde vem esse “theme”?

Relaxa, vou te explicar! O parâmetro theme que estamos recebendo dentro do arquivo de styles.js está vindo de um Provider que vamos criar no arquivo App.js:

Não se preocupa se não está entendendo o código, vou te explicar as linhas mais importantes:

Linha 3 - Estamos importando o ThemeProvider da lib styled-components, ele que vai ser responsável por passar nosso tema para os filhos

Linha 4 - Estamos importando nossos temas que criamos no arquivo themes.js

Linha 9 - Estamos criando um estado para saber qual tema iremos utilizar

Linha 11 a 19 - Estamos criando uma função responsável por alterar o tema atual, e armazenando a opção selecionada no localStorage, para se caso o usuário atualizar a página, manter o tema selecionado

Linha 21 a 24 - Estamos criando um useEffect, que vai ser responsável por manter a opção que está no nosso localStorage selecionada

Linha 27 - É aqui que acontece a mágica, onde definimos qual tema nosso arquivo de estilo vai utilizar, o componente ThemeProvider recebe uma propriedade chamada theme onde vamos passar nossa paleta de cores (darkMode ou lightMode)

Linha 30 - Temos um botão que é responsável por chamar a função toggleTheme que é responsável pela troca do tema

Pronto! É só isso que precisamos para criar nosso tema Dark Mode

Espero que tenha gostado do tutorial, como eu disse é bem simples de fazer, se não ficou algo claro para você pergunte aqui nos comentários que irei te responder!

Resultado: