Ei! Então, se você é como eu e adora toda a vibração do modo escuro, pode ter pensado em adicioná-lo ao seu site. É muito fácil de configurar com apenas um pouco de CSS e JavaScript. Veja como eu fiz isso.

Etapa 1: configurando o HTML

Primeiro, você precisa de um botão ou interruptor no qual os usuários possam clicar para alternar entre os modos claro e escuro. Eu escolhi um botão simples para este exemplo (você pode usar um ícone se quiser):

Toggle Dark Mode

Este botão será o gatilho para alternar os modos.

Etapa 2: adicionar CSS para modos claro e escuro

Em seguida, você precisa definir como serão o modo claro e o modo escuro. Em seu CSS, você configurará os estilos padrão (que será seu modo claro) e, em seguida, adicionará uma classe de modo escuro que substituirá esses estilos.

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

Aqui está o que está acontecendo:

• Modo claro (padrão): O corpo tem fundo branco e texto preto. Adicionei uma transição para tornar a mudança mais suave ao alternar entre os modos.
• Modo Escuro: A classe .dark-mode altera o fundo para cinza escuro e o texto para branco.

Etapa 3: alternar entre modos com JavaScript

Agora vem a parte em que fazemos o botão realmente fazer alguma coisa. Este pedaço de JavaScript alternará a classe .dark-mode no corpo sempre que o botão for clicado.

const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save the user's preference in local storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

Aqui está um detalhamento:

• Alternar a classe: Quando o botão é clicado, alternamos a classe .dark-mode no corpo. Isso altera os estilos entre os modos claro e escuro.
• Salvando preferência: Adicionei um pouco mais salvando a preferência do usuário no localStorage. Isso significa que se eles escolherem o modo escuro, ele permanecerá assim mesmo se eles saírem e voltarem ao site.

Etapa 4: Carregando a preferência do usuário no carregamento da página

Para garantir que o site carregue no modo preferido do usuário, você precisa verificar localStorage quando a página carregar e definir o modo de acordo.

window.addEventListener('load', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark-mode');
    }
});

Se você estiver usando React, o processo é bem semelhante, mas você lidará com as coisas dentro de seus componentes. Veja como fazer isso:

1. Configurar estado e classe CSS para modo escuro:

Use useState do React para gerenciar o estado do modo escuro e aplique a classe apropriada ao seu elemento raiz:

   import React, { useState } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(false);

       const toggleDarkMode = () => {
           setDarkMode(!darkMode);
       };

       return (
           

               
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

Neste exemplo:

• O estado darkMode determina se o modo escuro está ativo.
• A função toggleDarkMode ativa e desativa o modo escuro.

1. CSS para modo escuro:

Adicione a classe .dark-mode ao seu CSS, como antes:

   body {
       background-color: white;
       color: black;
       transition: background-color 0.3s, color 0.3s;
   }

   .dark-mode {
       background-color: #121212;
       color: #ffffff;
   }

1. Armazenamento local:

Se quiser que a preferência do tema persista, você pode adicionar este pequeno ajuste:

   import React, { useState, useEffect } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(() => {
           const savedTheme = localStorage.getItem('theme');
           return savedTheme === 'dark';
       });

       useEffect(() => {
           localStorage.setItem('theme', darkMode ? 'dark' : 'light');
       }, [darkMode]);

       return (
           

                setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

Aqui está o que está acontecendo:

• Estado inicial: O estado inicial de darkMode é definido com base no valor armazenado em localStorage.
• Effect Hook: O gancho useEffect salva a preferência do tema atual sempre que darkMode muda.

E é isso! Esta é uma maneira mais simples de adicionar o modo escuro ao seu aplicativo React sem complicar as coisas.