Criando seu próprio tema com styled-components

O que é tema

Tema são as cores, tamanhos de fontes, espaçamento entre elementos da aplicação e o que mais você quiser.

Porquê perder tempo com isso, não posso só aplicar tudo isso pelo css?

Pode sim, o problema é que pode virar uma bola de neve. A cada componente novo você usa medidas diferentes para margins e paddings, cores mais claras ou escuras e tamanhos de fontes divergentes, fazendo com que a aplicação não tenha nenhum padrão de estilização.

Quais os pontos positivos ao usar um tema?

• A aplicação seguirá um padrão de cores, tamanhos e medidas.
• Menos CSS redundante, mantendo um código mais limpo.
• Alterações como cores, tamanho de fontes e etc são triviais, já que toda aplicação busca informações do tema.

Certo, então como crio um Tema?

Bom, vamos lá então. Nesse artigo estamos usando styled-components e irei supor que você está usando Typescript (por favor, esteja :D) para ter o type-checking do nosso tema.

Criação do tema em si

Podemos criar um arquivo chamado theme.ts para definir nosso tema:

export const theme = {
  colors: {
    primary: '#000000',
    secondary: '#FFFFFF',
  }
}

No mesmo arquivo exportaremos também um type do nosso tema para ter o type-checking:

export type ITheme = typeof theme;

Type-checking do tema para o styled-components

De acordo com a documentação do styled-components, devemos extender a interface de Tema original com o nosso type, para isso precisaremos de um arquivo .d.ts, no qual irá se chamar styled.d.ts

import 'styled-components';
import { ITheme } from './theme';

declare module 'styled-components' {
  export interface DefaultTheme extends ITheme {}
}

ThemeProvider, a parte mais fácil!

Agora que já temos nosso tema criado e com typechecking, só precisamos fazer nossa aplicação inteira conhecer ele. o styled-components faz isso através do componente <ThemeProvider /> utilizando Context API por debaixo dos panos.
No nosso App.tsx:

import { ThemeProvider} from 'styled-components';
import { theme } from '../theme.ts';

export default function App() {
 <ThemeProvider theme={theme}>
  ...resto da aplicação
 </ThemeProvider>
}

Utilizando o tema

Com o nosso tema configurado, conseguimos usá-lo em qualquer componente styled-components, exemplo:

 import styled from 'styled-components';

export const Container = styled.main`
  background: ${({ theme }) => theme.colors.primary} // aqui vai ter typechecking!!
`;