VAGAS DE EMPREGO

balta.io balta.io
  • Cursos
  • Carreiras
  • Para sua Empresa
  • Livros
    • Background Services
    • Blazor com .NET 8
    • Segurança em APIs
    • Futuro do C# 12
    • Nullable Types
    • Clean Code
  • Blog

Seja Premium
balta.io

  • Cursos
  • Carreiras
  • Para sua Empresa
  • Agenda
  • Livros
    • Background Services
    • Blazor com .NET 8
    • Segurança em APIs
    • Futuro do C# 12
    • Nullable Types
    • Clean Code
  • Blog
  • Player
Seja Premium

Entre ou Cadastre-se

  • Home
  • Artigos
  • Alterando a cor do tema no React Native


👉 Temos uma versão mais atualizada deste artigo no nosso novo Blog

Alterando a cor do tema no React Native

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 da aplicação do Discord.

Alterar o tema da aplicação do Discord

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

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.

Light Theme

const light: DefaultTheme = {
    colors: {
        background: '#F6F6F6',
        text: '#121212',
    }
};

Dark Theme

const light: DefaultTheme = {
    colors: {
        background: '#121212',
        text: '#F6F6F6',
    }
};

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.

Exemplo da estrutura do tema.

Estrutura do tema apresentada no projeto.

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

const Wrapper = styled.View`
  background-color: ${({theme}) => theme.colors.background};
  flex: 1;
  justify-content: center;
  align-items: center;
`;

const Label = styled.Text`
  color: ${({theme}) => theme.colors.text};
  font-size: 24px;
`;

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

return (
    <ThemeProvider theme={theme}>
        <Wrapper>
            <Label>{deviceColorScheme}</Label>
        </Wrapper>
    </ThemeProvider>
);

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.

const App = () => {
  const deviceColorScheme = useColorScheme();
  const theme = themes[deviceColorScheme || 'dark'];

  return (
    <ThemeProvider theme={theme}>
      <Wrapper>
        <Label>{deviceColorScheme}</Label>
      </Wrapper>
    </ThemeProvider>
  );
};

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

iOS Light.

Apresentação do aplicativo com tema light.

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

iOS Preferences.

Ajustes do simulador iOS.

Change iOS Preferences.

Alterando as preferências do usuário.

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

iOS Dark.

Apresentação do aplicativo com tema dark.

Código da aplicação

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

Populares

Priority Queue

Priority Queue ou fila prioritária é um tipo de lista inclusa no C# 10 que permite que seus itens...


Implicit Operators no C#

Implicit Operators permitem adicionar comportamentos de conversão a objetos Built In ou complexos...


ASP.NET 5 – Autenticação e Autorização com Bearer e JWT

Este artigo atualmente utiliza a versão 5.0.0-rc.1 do ASP.NET/.NET, o que significa que ainda não...


Clean Code - Guia e Exemplos

Saiba como manter seu código limpo (Clean Code) seguindo algumas práticas sugeridas pelo Robert C...


Git e GitHub - Instalação, Configuração e Primeiros Passos

Git é um sistema de controle de versões distribuídas, enquanto GitHub é uma plataforma que tem o ...


Compartilhe este artigo



Conheça o autor

Helena Strada

Helena Strada

Engenheira de Software

Atuo como engenheira de software e sou apaixonada por livros e tecnologia - principalmente, os dois juntos. Principais interesses em arquitetura de software, código limpo e sempre estou buscando algo para aprimorar e/ou aprender.Acredito que a dedicação seja transformação.





3.133

Aulas disponíveis

292

horas de conteúdo

76.401

Alunos matriculados

52.960

Certificados emitidos





Comece de graça agora mesmo!

Temos mais de 21 cursos totalmente de graça e todos com certificado de conclusão.

Começar


Prefere algo mais Premium?

Conheça nossos planos



Premium anual

Compra única, parcelada em até
12x no cartão de crédito


12x R$

99

,79

=R$ 1.197,44
  • 1 ano de acesso
  • Acesso à todo conteúdo
  • Emissão de Certificado
  • Tira Dúvidas Online
  • 67 cursos disponíveis
  • 10 carreiras disponíveis
  • 161 temas de tecnologia
  • Conteúdo novo todo mês
  • Encontros Premium

Começar agora

Política de privacidade



Precisa de ajuda?

Dúvidas frequentes



  • Posso começar de graça?

    Sim! Basta criar sua conta gratuita no balta.io e começar seus estudos. Nós contamos com diversos cursos TOTALMENTE gratuitos e com certificado de conclusão.

  • Vou ter que pagar algo?

    Nós temos cursos gratuitos e pagos, porém você não precisa informar nenhum dado de pagamento para começar seus estudos gratuitamente conosco. Os cursos gratuitos são completos e com certificado de conclusão, você não paga nada por eles.

    Porém, caso queira algo mais Premium , você terá acesso à diversos benefícios que vão te ajudar ainda mais em sua carreira.

  • Por onde devo começar?

    Siga SEMPRE as nossas Carreiras , elas vão te orientar em todos os sentidos. Os cursos já estão organizados em categorias e carreiras para facilitar seu aprendizado.
    Nossa sugestão para aprendizado é começar pelo Backend e seguindo para Frontend e Mobile.

    • Backend
    • Frontend
    • Mobile

  • Os cursos ensinam tudo que preciso?

    Nenhum curso no mundo vai te ensinar tudo, desculpa ser sincero! Os cursos são uma base, eles fornecem por volta de 30% do que você precisa aprender, o resto é com você, com dedicação e MUITA prática.

  • O que eu devo estudar?

    Java ou .NET? Angular ou React? Xamarin ou Flutter? A resposta é simples e direta: "Você já sabe o básico?"

    Se você ainda não sabe BEM o básico, ou seja, os fundamentos, OOP, SOLID, Clean Code, está perdendo tempo estudando Frameworks ou até coisas mais avançadas como Docker. Foque nos seus objetivos primeiro.
    Agora se você está indeciso sobre qual Framework estudar, a boa notícia é que o mercado neste momento está bem aquecido e você tem várias oportunidade. Desta forma o que levaríamos em conta para tomar esta decisão seria:

    • Já sei o básico
    • O Framework/Tecnologia tem mercado onde eu estou (região)
    • O Framework/Tecnologia é utilizado em uma empresa onde quero atual
    • O Framework/Tecnologia resolve meu problema
    • Eu gosto de utilizar o Framework/Tecnologia

  • Estou pronto para estudar no balta.io?

    Com certeza! O primeiro passo é começar e você pode fazer isto agora mesmo!

    Começar de graça

Ainda tem dúvidas?





Assine nosso Newsletter

Receba em primeira mão todas as nossas novidades.

Cadastrar


balta.io

Sobre

  • Como funciona?
  • Seja Premium
  • Agenda
  • Blog
  • Todos os cursos

Cursos

  • Frontend
  • Backend
  • Mobile
  • Fullstack

Suporte

  • Termos de uso
  • Privacidade
  • Cancelamento
  • Central de ajuda

Redes Sociais

  • Telegram
  • Facebook
  • Instagram
  • YouTube
  • Twitch
  • LinkedIn
  • Discord