Não há dúvida de que o modo escuro está na moda hoje em dia. Mais e mais aplicativos estão oferecendo a capacidade de alternar para um tema escuro e por boas razões. Se você deseja adicionar o modo escuro ao seu aplicativo React, há algumas coisas que você precisa fazer. Neste artigo, você aprenderá como adicionar o modo escuro a um aplicativo React usando os ganchos useState e useEffect.

O que é o modo escuro?

O modo escuro é um tema que alterna a paleta de cores de um aplicativo de claro para escuro. Atualmente, a maioria dos aplicativos tem a capacidade de alternar entre os modos claro e escuro. Isso pode ser útil para quem prefere trabalhar em um ambiente escuro ou para quem tem mais facilidade para os olhos.

Por que usar o modo escuro?

Existem vários motivos pelos quais você pode querer usar o modo escuro em seu aplicativo React. Vamos dar uma olhada em alguns dos mais populares.

1. Melhore a vida útil da bateria

Um dos benefícios do modo escuro é que ele pode ajudar a melhorar a vida útil da bateria em dispositivos com telas OLED ou AMOLED. Isso ocorre porque pixels mais escuros exigem menos energia para serem exibidos.

2. Reduzir a fadiga ocular

Se você estiver navegando na Web ou usando aplicativos à noite, o modo escuro pode ajudar a reduzir o cansaço visual. Isso ocorre porque diminui a quantidade de luz branca ou azul brilhante que é emitida pela tela.

3. Crie uma experiência mais imersiva

Algumas pessoas acham que o modo escuro cria uma experiência mais imersiva. Isso pode ser especialmente verdadeiro ao usar aplicativos ou sites com muito conteúdo, como aplicativos de notícias ou mídias sociais.

Como adicionar o modo escuro a um aplicativo React

Adicionar o modo escuro a um aplicativo React é relativamente simples. As etapas necessárias para adicionar o modo escuro ao seu aplicativo React estão listadas abaixo.

Antes de começarmos, você precisa ter certeza de que tem um Configuração do aplicativo React.

1. Use o gancho useState

A primeira coisa que você precisa fazer é criar uma variável de estado para rastrear o tema atual do seu aplicativo. Isso pode ser feito usando o gancho useState. Para isso, você deve ter um conhecimento básico de como trabalhar com o gancho useState.

importar Reagir, { useState } a partir de 'reagir';
funçãoAplicativo() {
 const [tema, setTema] = useState('leve');
Retorna (
`Aplicativo ${tema}`}>
<h1>Olá Mundo!</h1>
</div>
 );
}
exportarpredefinição Aplicativo;

O trecho de código importa o hook useState do React e cria uma variável de estado chamada theme. A variável theme rastreia o tema atual do aplicativo, que o código define como 'light' por padrão.

2. Adicionar um botão de alternância

Em seguida, adicione um botão de alternância ao aplicativo para que os usuários possam alternar entre o modo claro e escuro. Isso pode ser feito com o seguinte código:

importar Reagir, { useState } a partir de 'reagir';
funçãoAplicativo() {
 const [tema, setTema] = useState('leve');
const alternarTema = () => {
 se (tema 'leve') {
 setTheme('Sombrio');
 } senão {
 setTheme('leve');
 }
 };
Retorna (
`Aplicativo ${tema}`}>
<botão onClick={toggleTheme}>Alternar tema</button>
<h1>Olá Mundo!</h1>
</div>
 );
}
exportarpredefinição Aplicativo;

O trecho de código acima inclui uma função toggleTheme para alterar a variável de estado do tema entre 'light' e 'dark', bem como um botão para chamar a função toggleTheme quando clicado.

3. Use o gancho useEffect

Em seguida, use o gancho useEffect para atualizar dinamicamente o tema do aplicativo com base na variável de estado do tema.

importar Reagir, { useState, useEffect } a partir de 'reagir';
funçãoAplicativo() {
 const [tema, setTema] = useState('leve');
const alternarTema = () => {
 se (tema 'leve') {
 setTheme('Sombrio');
 } senão {
 setTheme('leve');
 }
 };
 useEfeito(() => {
documento.body.className = tema;
 }, [tema]);
Retorna (
`Aplicativo ${tema}`}>
<botão onClick={toggleTheme}>Alternar tema</button>
<h1>Olá Mundo!</h1>
</div>
 );
}
exportarpredefinição Aplicativo;

O trecho de código acima usa o gancho useEffect para atualizar o className do elemento document.body com base na variável de estado do tema. Isso permite que você atualize dinamicamente o CSS do aplicativo com base no tema.

4. Adicionando o CSS para os modos escuro e claro

Em seguida, adicione o CSS para os modos escuro e claro. Você pode fazer isso criando um arquivo chamado 'darkMode.css' e adicionando o seguinte CSS:

.Sombrio {
 cor de fundo: #333;
 cor: #ff;
}
.leve {
 cor de fundo: #ff;
 cor: #333;
}

Depois disso, você precisará importar o arquivo CSS para seu aplicativo. Isso pode ser feito com o seguinte código:

importar Reagir, { useState, useEffect } a partir de 'reagir';
importar './darkMode.css';
funçãoAplicativo() {
 const [tema, setTema] = useState('leve');
const alternarTema = () => {
 se (tema 'leve') {
 setTheme('Sombrio');
 } senão {
 setTheme('leve');
 }
 };
 useEfeito(() => {
documento.body.className = tema;
 }, [tema]);
Retorna (
`Aplicativo ${tema}`}>
<botão onClick={toggleTheme}>Alternar tema</button>
<h1>Olá Mundo!</h1>
</div>
 );
}
exportarpredefinição Aplicativo;

5. Mudar para modos diferentes

Agora que você adicionou o CSS para os modos escuro e claro, você pode alternar entre eles clicando no botão de alternância. Para fazer isso, primeiro você precisa iniciar o servidor de desenvolvimento. Você pode fazer isso executando o seguinte comando de terminal:

npm começar

Depois disso, você pode abrir o aplicativo no navegador e clicar no botão de alternância para alternar entre os modos escuro e claro.

Opções adicionais para o modo escuro no React

Se você quiser que o tema persista nas atualizações de página, você pode use a API localStorage para armazenar os dados. Para fazer isso, primeiro você precisará adicionar o seguinte código ao seu aplicativo:

importar Reagir, { useState, useEffect } a partir de 'reagir';
importar './darkMode.css';
funçãoAplicativo() {
const [tema, setTema] = useState(
 localStorage.getItem('tema') || 'leve'
 );
const alternarTema = () => {
 se (tema 'leve') {
 setTheme('Sombrio');
 } senão {
 setTheme('leve');
 }
 };
 useEfeito(() => {
 localStorage.setItem('tema', tema);
documento.body.className = tema;
 }, [tema]);
Retorna (
`Aplicativo ${tema}`}>
<botão onClick={toggleTheme}>Alternar tema</button>
<h1>Olá Mundo!</h1>
</div>
 );
}
exportarpredefinição Aplicativo;

O trecho de código acima inclui a capacidade de manter o tema após a atualização da página. Isso é feito usando a API localStorage. Primeiro, ele verifica se há um tema armazenado em localStorage.

Se houver um tema, esse tema será usado. Se não, o tema 'light' é usado. Em seguida, o código é adicionado ao gancho useEffect para armazenar o tema em localStorage. Isso garante que o tema seja persistente nas atualizações de página.

O modo escuro não termina em React

Existem muitas maneiras de adicionar o modo escuro ao seu aplicativo React. Neste artigo, é mostrada uma maneira de fazer isso usando os ganchos useState e useEffect. No entanto, existem muitas outras maneiras de fazer isso também.

Por exemplo, você pode usar a API React Context para criar um provedor de temas. Isso permitiria que você envolvesse todo o seu aplicativo em um componente de provedor de tema e acessasse o tema em qualquer lugar do seu aplicativo.

Você também pode ativar o modo escuro em seu navegador e usar consultas de mídia CSS para aplicar estilos diferentes, dependendo do tema do navegador.