Alternar entre Modo Claro e Escuro

Introdução

Neste projeto, você aprenderá como criar uma aplicação React que permite aos usuários alternar entre o modo claro e o modo escuro. O projeto demonstrará o uso da React Context API e do hook useContext para gerenciar o estado global do tema.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como criar um ThemeContext usando a Context API do React
• Como usar o ThemeContext no componente App para alterar o estilo geral da aplicação com base no tema
• Como usar o ThemeContext no componente Card para alterar os estilos do cartão com base no tema
• Como envolver o componente App com o ThemeProvider para tornar o contexto do tema disponível em toda a aplicação

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Entender como usar a React Context API para gerenciar o estado global
• Aplicar o hook useContext para acessar os valores do contexto
• Implementar estilos diferentes com base no tema atual
• Alternar o tema e atualizar o estado global

Configurar o Projeto

Nesta etapa, você aprenderá como configurar o projeto e instalar as dependências necessárias.

Abra seu editor de código e navegue até o diretório do projeto.

├── components
│ └── Card.js
├── contexts
│ └── ThemeContext.js
├── App.css
├── App.js
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js

Descrições dos arquivos:

• O diretório components contém todos os arquivos de componentes.
• O diretório contexts contém o arquivo ThemeContext.js que precisa ser completado.

Como este é um projeto React, precisamos instalar as dependências executando o seguinte comando:

npm install

Após instalar as dependências, siga estas etapas para acessar o projeto:

1. Inicie um servidor local executando o seguinte comando no terminal:

npm start

2. Abra o servidor web no lado direito do ambiente de codificação. Você verá o efeito estático como mostrado abaixo. Atualmente, clicar no botão "Dark Mode" não causa nenhuma alteração.

Criar o ThemeContext

Nesta etapa, você aprenderá como criar o ThemeContext usando a Context API do React. Siga as etapas abaixo para concluir esta etapa:

1. Abra o arquivo ThemeContext.js localizado no diretório src/contexts.

2. Crie o ThemeContext usando React.createContext():

   export const ThemeContext = React.createContext();
   

3. Crie o componente ThemeProvider que irá envolver o componente App e fornecer o contexto do tema:

   export const ThemeProvider = (props) => {
     const [theme, setTheme] = React.useState("light");
     return (
       <ThemeContext.Provider value={{ theme, setTheme }}>
         {props.children}
       </ThemeContext.Provider>
     );
   };
   

   O componente ThemeProvider inicializa o estado theme para "light" e fornece os valores theme e setTheme ao contexto.

Usar o ThemeContext no componente App

Nesta etapa, você aprenderá como usar o ThemeContext no componente App para alterar o estilo geral do aplicativo com base no tema.

1. Abra o arquivo src/App.js.

2. Use o hook useContext para acessar o valor theme do ThemeContext:

   const { theme } = useContext(ThemeContext);
   

3. Atualize o JSX do componente App para aplicar estilos diferentes com base no valor theme:

   return (
     <div className={theme === "light" ? "app app-light" : "app app-dark"}>
       <Card></Card>
     </div>
   );
   

   As classes app-light e app-dark serão aplicadas ao elemento div principal com base no valor theme.

Usar o ThemeContext no componente Card

Nesta etapa, você aprenderá como usar o ThemeContext no componente Card para alterar os estilos do cartão com base no tema.

1. Abra o arquivo src/components/Card.js.

2. Use o hook useContext para acessar os valores theme e setTheme do ThemeContext:

   export const Card = () => {
     const { theme, setTheme } = useContext(ThemeContext);
     // ...
   };
   

3. Implemente a função handleThemeToggle para alternar o tema:

   const handleThemeToggle = (e) => {
     setTheme(theme === "light" ? "dark" : "light");
   };
   

   Esta função atualizará o valor theme no ThemeContext quando o botão for clicado.

Envolver o componente App com o ThemeProvider

Nesta etapa final, você aprenderá como envolver o componente App com o ThemeProvider para tornar o contexto do tema disponível em toda a aplicação.

1. Abra o arquivo src/index.js.

2. Importe o ThemeProvider do arquivo ThemeContext.js:

   import { ThemeProvider } from "./contexts/ThemeContext";
   

3. Envolva o componente App com o ThemeProvider na função ReactDOM.render:

   root.render(
     <React.StrictMode>
       <ThemeProvider>
         <App />
       </ThemeProvider>
     </React.StrictMode>
   );
   

Agora, o componente App e seus componentes filhos podem acessar os valores theme e setTheme do ThemeContext usando o hook useContext.

Após concluir o desafio, o efeito deve ser o seguinte:

Parabéns! Você concluiu o projeto. Agora você deve ser capaz de alternar entre o modo claro e escuro clicando no botão no componente do cartão.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.