Crear un Interruptor de Modo Claro/Oscuro con Variables CSS

Darles a los usuarios la posibilidad de personalizar la apariencia de la interfaz es un gran paso para mejorar la experiencia de usuario. En este artículo, vamos a construir un interruptor simple para alternar entre modo claro y modo oscuro usando variables CSS. Además, guardaremos la preferencia del usuario para futuras visitas, de modo que si el usuario vuelve al sitio, pueda ver su configuración de modo preferida.

Comencemos

Si no tienes un sitio web propio en el que desees agregar esta funcionalidad, puedes usar esta demo de CodePen para seguir los pasos.

Paso 1: Añadir CSS

Comenzaremos añadiendo propiedades personalizadas en CSS, también conocidas como variables CSS, las cuales podemos referenciar y modificar en todo el documento.

Nota rápida: Las propiedades personalizadas son entidades definidas en CSS que contienen valores específicos que pueden reutilizarse a lo largo de un documento. Se establecen con la notación --nombre-variable (por ejemplo, --primary-color: #000;) y se acceden usando la función var() (por ejemplo, color: var(--primary-color);).

Primero, vamos a definir nuestras variables para el modo claro en la pseudo-clase :root, la cual coincide con el elemento raíz de nuestro árbol de documentos (generalmente el <html>). Al utilizar :root, nuestras variables estarán disponibles globalmente.

:root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
}

A continuación, definimos nuestras variables para el modo oscuro. Para esto, usaremos un atributo de datos llamado data-theme con el valor “dark”.

[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #161625;
    --heading-color: #818cab;
}

¿Qué significa [data-theme="dark"]? Esto significa que estamos referenciando un atributo de datos llamado data-theme con el valor “dark”. Veremos cómo utilizarlo en el código JavaScript.

Luego, podemos referenciar estas variables en nuestros estilos CSS:

body {
    background-color: var(--bg-color);
    color: var(--font-color);
    /* Otros estilos */
}

h1 {
    color: var(--secondary-color);
    /* Otros estilos */
}

a {
    color: var(--primary-color);
    /* Otros estilos */
}

Paso 2: Agregar el HTML del Interruptor de Modo

El interruptor es esencialmente un checkbox (casilla de verificación), pero lo estilizaremos para que luzca como un interruptor. Aquí tienes el código HTML básico:

<div class="theme-switch-wrapper">
    <label class="theme-switch" for="checkbox">
        <input type="checkbox" id="checkbox" />
        <div class="slider round"></div>
    </label>
    <em>Activar modo oscuro</em>
</div>

Ahora, agreguemos algo de CSS para estilizarlo como un interruptor:

.theme-switch-wrapper {
    display: flex;
    align-items: center;
}

.theme-switch em {
    margin-left: 10px;
    font-size: 1rem;
}

.theme-switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}

.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
}

input:checked + .slider {
    background-color: #66bb6a;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

Paso 3: Añadir el JavaScript

El último paso es agregar un poco de JavaScript para que todo funcione. Tenemos tres tareas:

Agregar controladores de eventos para manejar el evento de cambio (check/uncheck) del interruptor.
Guardar la preferencia del usuario para futuras visitas.
Comprobar si existe una preferencia guardada y, si es así, aplicarla al cargar el sitio web.

Agregar los controladores de eventos

Primero, seleccionamos el checkbox del interruptor y le añadimos un evento change:

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
    } else {
        document.documentElement.setAttribute('data-theme', 'light');
    }
}

toggleSwitch.addEventListener('change', switchTheme, false);

Recuerda, el atributo data-theme que usamos en CSS es aquí donde se agrega al elemento raíz (<html>), permitiendo que el CSS detecte si está en modo claro u oscuro.

Guardar la preferencia del usuario

Para almacenar la preferencia, usaremos localStorage del navegador. Modificamos la función switchTheme para que guarde la selección del usuario:

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark'); // Guardamos la preferencia
    } else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light'); // Guardamos la preferencia
    }
}

Comprobar la preferencia guardada al cargar la página

Al cargar el sitio web, verificaremos si existe una preferencia guardada y, de ser así, la aplicaremos:

const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);

    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

Con esto, el sitio recordará la elección del usuario y aplicará el tema correspondiente cada vez que vuelva a visitarlo.

Conclusión

¡Y eso es todo! Has creado un interruptor de modo claro/oscuro completamente funcional usando variables CSS y JavaScript. Esta funcionalidad no solo mejora la experiencia de usuario al permitirles personalizar la interfaz según su preferencia, sino que también le da un toque moderno a tu sitio web.

Consejo profesional: Para elegir una paleta de colores, intenta utilizar el mismo espectro de tu color principal o de marca y genera una paleta. Utiliza el tono más oscuro como color de fondo en modo oscuro y los tonos más claros como colores de fuente.

Esta implementación es ligera y eficiente, y con unas pocas líneas de código puedes ofrecer una interfaz más amigable y accesible. ¡Prueba a agregar este interruptor a tus proyectos y mejora la experiencia de usuario de tus sitios!

Este artículo está basado en la guía original publicada en dev.to por Ananya Neogi, donde se explica cómo implementar un interruptor de modo claro/oscuro utilizando variables CSS y JavaScript. Agradecemos la fuente original por su contribución a la comunidad de desarrolladores.