Alterando a cor do tema de seu aplicativo em React Native conforme a configuração padrão do celular

4 min readMar 30, 2021

Em alguns aplicativos mobile ou desktop é usualmente comum você encontrar a opção para alterar o tema da sua aplicação (light e dark) ou sincronizá-lo com o tema escolhido no seu dispositivo.

Alterar o tema do Slack baseado na escolha do sistema operacional.

Nessa postagem, iremos alterar as cores de um aplicativo React Native, baseadas no tema escolhido pelas preferências do usuário.

Nesse contexto apresentado, você pode utilizar o hook useColorScheme() para retornar o valor escolhido a partir da escolha do tema do dispositivo. Ele pode retornar três valores:

light, dark ou null

Boilerplate — contextualização do projeto

Este projeto foi construído na versão 0.64.0 do React Native (a mais recente até a data da publicação) e também pode ser utilizado em outras versões. Opcionalmente você pode especificar a versão que desejar e optar pela utilização de TypeScript.

Vamos criar um projeto na versão mais recente do RN e utilizar o TypeScript. O nome do projeto será Colourse. Você pode encontrar toda a configuração de ambiente aqui.

npx react-native init Colourse --template react-native-template-typescript

Ferramentas

Para a montagem do exemplo, eu estou utilizando o styled-components, mas você pode utilizar o que melhor se estruturar ao seu cenário. Para a instalação do styled-components e configuração no projeto, você pode encontrar o guia aqui.

Escolha do tema

Vamos criar dois temas para coincidir com as possíveis opções que o usuário poderá escolher seguindo as cores de seu dispositivo.

dark theme contendo as cores de background e texto, com #F6F6F6 e #121212 respectivamente. — Definição do tema light

dark theme contendo as cores de background e texto, com #121212 e #F6F6F6 respectivamente. — Definição do tema dark

Estrutura do projeto

App.tsx
src
|
|-theme
|---dark
|---light

A estrutura padrão do React Native foi mantida conforme a criação do projeto. Fora adicionado uma pasta src com as referências dos temas.

Estrutura dos componentes

Para apresentar a estrutura criada e dar visibilidade as alterações que serão feitas pela escolha da configuração do dispositivo do usuário, um wrapper e uma label foram criados. Eles atendem respectivamente a view para o conteúdo da tela e o texto representado pelo tema.

https://github.com/hstrada/react-native-color-scheme/blob/master/Colourse/App.tsx#L8

Após a criação, a estrutura do App.tsx foi alterado para atender o nosso cenário proposto.

Alterando o tema baseado na aparência

Como comentamos, com o hook mencionado, podemos ter a seleção das preferências do usuário. Baseado nessa preferência, podemos definir a cor de estilo para a nossa aplicação.

Com o tema escolhido, podemos utilizar a preferência, ou caso venha nula, podemos definir uma padrão.

No meu simulador, a configuração inicial se mantém como light. Na primeira inicialização do projeto, você encontrará o tema light configurado conforme fizemos.

Para realizar a alteração da configuração do simulador iOS, você encontrará a configuração e poderá realizar a alteração em:

Settings > Developer > Appearance > Dark Appearance

Acesse as configurações do dispositivo e clique em **Developer**.

No primeiro item Appearence, ative o toggle para alterar a cor.

Reabra o aplicativo para visualizar as modificações feitas.

Código da aplicação

Você pode encontrar o código completo da aplicação no GitHub.

Curtiu?

Sintam-se super a vontade para enviar feedbacks e melhorias. E se preferir, mande sua sugestão de como você já precisou resolver um cenário parecido. Vocês podem me encontrar aqui no linkedin.

E se você curtiu esse post, que tal 5 palminhas? 👏🏻

Maaaaas se ajudou, que tal 10? 😬