Os alternadores de modo claro e escuro tornaram-se cada vez mais populares, oferecendo aos usuários a flexibilidade de escolher sua experiência visual preferida. Seja para reduzir o cansaço visual, economizar bateria ou simplesmente seguir a preferência pessoal, a implementação de um alternador de modo claro/escuro pode melhorar significativamente a experiência do usuário. Neste artigo, orientaremos você na criação de um alternador de modo claro/escuro simples, mas eficaz, usando HTML, CSS e JavaScript.

Por que implementar o modo claro/escuro?

1. Preferência do usuário: Alguns usuários preferem o modo escuro por questões estéticas ou redução do cansaço visual, especialmente em ambientes com pouca luz.

2. Acessibilidade: Melhorar a acessibilidade oferecendo um tema que pode ajudar usuários com deficiência visual.

3. Economia de bateria: Em telas OLED, o modo escuro pode economizar bateria.

Configurando a estrutura HTML

Comece criando uma estrutura HTML simples. Precisaremos de um botão para alternar entre os modos claro e escuro.

    
    
    
    


    

        
Dark/Light Mode Switcher
        Switch to Dark Mode
        
Toggle the button to switch between dark and light modes.
    
    

Estilizando com CSS

A seguir, definiremos nossos estilos para os modos claro e escuro. Usaremos variáveis ​​CSS para facilitar a troca de temas.

/* styles.css */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --button-bg-color: #000000;
    --button-text-color: #ffffff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    text-align: center;
    margin-top: 50px;
}

button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
    opacity: 0.8;
}

body.dark-mode {
    --bg-color: #333333;
    --text-color: #ffffff;
    --button-bg-color: #ffffff;
    --button-text-color: #000000;
}

Adicionando funcionalidade JavaScript

Agora, adicionaremos o JavaScript para lidar com a mudança de tema. Também salvaremos a preferência do usuário em localStorage para que sua escolha persista durante as sessões.

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const switcher = document.getElementById('modeSwitcher');
    const currentMode = localStorage.getItem('theme') || 'light';

    if (currentMode === 'dark') {
        document.body.classList.add('dark-mode');
        switcher.textContent = 'Switch to Light Mode';
    }

    switcher.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        const mode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
        switcher.textContent = mode === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode';
        localStorage.setItem('theme', mode);
    });
});

Explicação

1. Variáveis ​​CSS: Usamos variáveis ​​CSS para definir as cores de ambos os modos, facilitando a alternância entre eles.

2. JavaScript: Adicionamos um ouvinte de evento ao botão para alternar a classe de modo escuro no elemento body. Também atualizamos o texto do botão com base no modo atual e salvamos o modo em localStorage.

3. Tema persistente: Quando a página carrega, verificamos localStorage para a preferência do usuário e aplicamos o tema apropriado.

Conclusão

A implementação de um alternador de modo claro/escuro aprimora a experiência do usuário, fornecendo opções visuais que atendem a diferentes preferências e condições. Com apenas algumas linhas de HTML, CSS e JavaScript, você pode adicionar esse recurso valioso aos seus projetos da web.

Sinta-se à vontade para experimentar recursos mais avançados, como transições suaves ou temas adicionais. As possibilidades são infinitas e seus usuários apreciarão a flexibilidade adicional.

Boa codificação!