“`html

Introdução

Nos últimos anos, o dark mode se tornou uma tendência popular em design de interfaces, proporcionando uma experiência visual mais agradável em ambientes com pouca luz. Além de melhorar a legibilidade, o modo escuro pode ajudar na economia de bateria em dispositivos com telas OLED. Este artigo aborda a implementação do dark mode em um site usando CSS e JavaScript, permitindo que desenvolvedores iniciantes e intermediários apliquem essa funcionalidade em seus projetos.

Contexto ou Teoria

O dark mode é uma configuração de interface que altera o esquema de cores de uma aplicação ou site, trocando cores claras por escuras. Essa abordagem não só é esteticamente agradável, mas também contribui para a redução do cansaço visual. A implementação pode ser feita utilizando apenas CSS, mas a adição de JavaScript permite que os usuários alternem entre os modos de forma dinâmica. Usar classes CSS para definir os estilos e manipular o DOM com JavaScript são práticas comuns nessa implementação.

Demonstrações Práticas

A seguir, vamos implementar um exemplo simples de um site com suporte a dark mode. Este exemplo incluirá os estilos CSS para ambos os modos e um script JavaScript para alternar entre eles.

/* Estilos padrão (modo claro) */
body {
    background-color: #ffffff;
    color: #000000;
    font-family: Arial, sans-serif;
}

h1, h2 {
    color: #333333;
}

.button {
    background-color: #007bff;
    color: #ffffff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Estilos para o modo escuro */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

body.dark-mode h1, body.dark-mode h2 {
    color: #ffffff;
}

body.dark-mode .button {
    background-color: #1e90ff;
}

Agora vamos adicionar o JavaScript para permitir que os usuários alternem entre os modos claro e escuro.

// Obtém o botão e o elemento body
const toggleButton = document.getElementById('toggle-dark-mode');
const body = document.body;

// Verifica o estado salvo no Local Storage e aplica o modo escuro se estiver ativo
if (localStorage.getItem('dark-mode') === 'enabled') {
    body.classList.add('dark-mode');
}

// Adiciona um evento de clique ao botão
toggleButton.addEventListener('click', () => {
    // Alterna a classe dark-mode no body
    body.classList.toggle('dark-mode');

    // Salva o estado atual no Local Storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('dark-mode', 'enabled');
    } else {
        localStorage.setItem('dark-mode', 'disabled');
    }
});

Por fim, precisamos adicionar o botão em nosso HTML para ativar a funcionalidade:

    
    
    
    


    
Bem-vindo ao Dark Mode!
    
Experimente alternar entre os modos
    Alternar Dark Mode
    

Dicas ou Boas Práticas

• Utilize variáveis CSS para gerenciar cores em vez de valores fixos. Isso facilita a manutenção e a atualização do tema.
• Considere a acessibilidade ao escolher cores para o modo escuro; certifique-se de que haja contraste suficiente entre o texto e o fundo.
• Teste a funcionalidade em diferentes dispositivos e navegadores para garantir uma experiência consistente.
• Adicione uma transição suave ao alternar entre os modos, utilizando a propriedade CSS transition para melhorar a experiência do usuário.
• Armazene a preferência do usuário usando o Local Storage, como demonstrado, para que a escolha persista entre as sessões.

Conclusão com Incentivo à Aplicação

A implementação do dark mode em um site é uma maneira eficaz de melhorar a experiência do usuário e tornar a interface mais moderna. Ao aplicar os conceitos e código apresentados, você pode facilmente integrar essa funcionalidade em seus próprios projetos. Explore diferentes estilos, personalize a aparência e ofereça aos seus usuários uma opção que eles certamente apreciarão.

Está desenvolvendo um projeto digital e precisa de um site moderno, performático e bem estruturado?
Eu posso te ajudar a transformar essa ideia em uma solução completa — com foco em performance, design e funcionalidade.
Acesse yurideveloper.com.br ou chame no WhatsApp: (37) 99670-7290. Vamos criar algo incrível juntos!

“`