Alternar entre Modo Claro e Escuro

Iniciante

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.

reactjavascriptweb-development

💡 Este tutorial foi traduzido do inglês com assistência de IA. Para ver o original, você pode mudar para a versão em inglês

Curso Anterior

Introdução
Programa

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

Professor

Labby

Labby is the LabEx teacher.