Como usar tema Dark e Light com Styled-components

Hoje vou falar de uma coisa bem legal, que é a possibilidade de criar nossas aplicações com estilização Dark e Light. Para isso iremos utilizar a lib styled-components e você verá como é fácil.

Para este artigo, vou partir do pressuposto que você já tenha um projeto ReactJs recém criado, ok? Se não tiver, criei um antes de continuar.

Há, não se esqueça de instalar a lib styled-components.

yarn add styled-components

Criando os Temas

A primeira coisa que vamos fazer é criar os temas, neste caso eu criei dois, o tema escuro e o claro.

Para que tudo funcione bem, é importante que as variáveis de cor dos dois temas tenham os mesmos nomes.

Pare isso, usei uma pasta styles e o arquivo theme.js

// styles/theme.js
export const lightTheme = {
  background: '#EBF4F8',
  titles: '#2C2738',
  text: '#2C2738',
  accent: '#0880AE',
}

export const darkTheme = {
  background: '#1C2025',
  titles: '#D6E1DF',
  text: '#D6E1DF',
  accent: '#8A85FF',
}

Estilizando com o Tema

Após criar o tema é hora de estilizar nossa aplicação utilizando as cores dos temas. Dentro da mesma pasta styles eu criei o arquivo globalStyles.js.

// styles/globalStyles.js
import { createGlobalStyle } from 'styled-components'

export default  createGlobalStyle`
    * {
        box-sizing: border-box;
        margin: 0;
        outline: 0;
        transition: 0.1s;
    } 
    .container {
        margin: auto;
        width: 50%;        
        padding: 10px;
        text-align: center;        
    }
    body {
        background: ${(props) => props.theme.background};
        color: ${props => props.theme.text};        
    }
    h1 {
        color: ${props => props.theme.titles};        
    }
    .accent {
        background-color: ${props => props.theme.accent};
        color: ${props => props.theme.text};
        height: 30px;
    }
`

Para fins didáticos, toda a estilização da minha aplicação ficou no arquivo global. Mas você vai poder estilizar seus componentes criados com styled-components usando a propriedade theme. Veja o exemplo abaixo:

export const Text = styled.div`
  font-size: 14px;
  font-weight: 500;
  color: ${({ theme }) => theme.text};
`;

No exemplo acima foi criado uma div para exibir um texto e utilizado a cor vinda do tema atual da aplicação.

Configurando o tema na aplicação

Agora que já temos nossos dois temas criados e já estilizamos nossos componentes com ele é hora de aplicar o tema e descobrir como trocar de tema.

O grande protagonista aqui é ThemeProvider do styled-components. Esse cara é o responsável por fornecer a variável theme para toda nossa aplicação. E foi a partir dessa variável theme que utilizamos as cores.

Basta então passarmos para o ThemeProvider na propriedade theme um dos dois temas que criamos no arquivo theme.js. Eu coloquei um botão para gente fazer a troca de tema em tempo real e ver o efeito massa disso funcionando.

Então no nosso App.js ficou assim:

import React, { useState } from 'react'
import { ThemeProvider } from 'styled-components'
import { lightTheme, darkTheme } from './styles/theme'
import GlobalStyles from './styles/globalStyles'

function App (){
  const [isDarkTheme, setIsDarkTheme] = useState(false)

  return (
    <ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
      <div className="container">
        <GlobalStyles />
        <h1>Dark Theme</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
        <button className="accent" 
          onClick={() => setIsDarkTheme(!isDarkTheme)}>
          Trocar Tema
        </button>
      </div >
    </ThemeProvider>
  )
}

export default App;

E é isso! Você já tem uma aplicação tem React com tema escuro e claro. 😦

Se desejar, aqui está o repositório deste projeto lá no Github.

Concluindo

Neste artigo mostrei como criar uma aplicação com mais de um tema utilizando o ThemeProvider do styled-components.

Gostou? então compartilha...😎

Forte abraço e até o próximo post.