Los conmutadores de modo oscuro y claro se han vuelto cada vez más populares y ofrecen a los usuarios la flexibilidad de elegir su experiencia visual preferida. Ya sea para reducir la fatiga visual, ahorrar batería o simplemente seguir preferencias personales, implementar un conmutador de modo oscuro/claro puede mejorar significativamente la experiencia del usuario. En este artículo, lo guiaremos en la creación de un conmutador de modo claro/oscuro simple pero efectivo usando HTML, CSS y JavaScript.

¿Por qué implementar el modo oscuro/claro?

1. Preferencia del usuario: Algunos usuarios prefieren el modo oscuro por motivos estéticos o para reducir la fatiga visual, especialmente en entornos con poca luz.

2. Accesibilidad: Mejorar la accesibilidad ofreciendo un tema que pueda ayudar a los usuarios con discapacidad visual.

3. Ahorro de batería: En las pantallas OLED, el modo oscuro puede ahorrar batería.

Configurar la estructura HTML

Comience creando una estructura HTML simple. Necesitaremos un botón para alternar entre los modos oscuro y claro.

    

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

Estilo con CSS

A continuación, definiremos nuestros estilos para los modos oscuro y claro. Usaremos variables CSS para facilitar el cambio 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;
}

Agregar funcionalidad de JavaScript

Ahora agregaremos JavaScript para manejar el cambio de tema. También guardaremos las preferencias del usuario en localStorage para que su elección persista en todas las sesiones.

// 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);
    });
});

Explicación

1. Variables CSS: Usamos variables CSS para definir los colores para ambos modos, lo que facilita el cambio entre ellos.

2. JavaScript: Agregamos un detector de eventos al botón para alternar la clase de modo oscuro en el elemento del cuerpo. También actualizamos el texto del botón según el modo actual y guardamos el modo en localStorage.

3. Tema persistente: Cuando se carga la página, verificamos el almacenamiento local para conocer las preferencias del usuario y aplicamos el tema apropiado.

Conclusión

La implementación de un conmutador de modo oscuro/claro mejora la experiencia del usuario al proporcionar opciones visuales que se adaptan a diferentes preferencias y condiciones. Con solo unas pocas líneas de HTML, CSS y JavaScript, puedes agregar esta valiosa característica a tus proyectos web.

Siéntete libre de experimentar con funciones más avanzadas, como transiciones suaves o temas adicionales. Las posibilidades son infinitas y sus usuarios apreciarán la flexibilidad adicional.

¡Feliz codificación!