Tema oscuro usando CSS

En los últimos años, el modo oscuro se ha convertido en una parte integral del diseño web moderno. No solo reduce la fatiga visual al trabajar en condiciones de poca luz, sino que también ahorra batería en dispositivos con pantallas OLED. Implementar un tema oscuro en un sitio web usando CSS es bastante simple, pero es importante hacerlo correctamente para que los usuarios puedan cambiar fácilmente entre las versiones clara y oscura.

Principios Básicos del Trabajo con Temas

Los temas oscuros y claros son dos conjuntos de estilos que se pueden aplicar dinámicamente a los elementos del sitio web. Idealmente, se debe dar a los usuarios la opción de elegir qué tema usar, pero también se pueden tener en cuenta las preferencias del sistema operativo.

Hay dos formas principales de implementar un tema oscuro:

Usar variables CSS y cambiar estilos mediante JavaScript
Aplicar automáticamente el tema según la configuración del sistema usando prefers-color-scheme

Ambos enfoques se pueden combinar para hacer que el manejo de temas sea más flexible.

Uso de Variables CSS para Temas

Una de las formas más convenientes de implementar un tema oscuro es usando variables CSS (custom properties). Esto facilita la gestión de colores y otros parámetros de estilo.

Primero, creemos variables raíz en :root que se usarán en todo el documento:

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

.dark-theme {
    --bg-color: #121212;
    --text-color: #ffffff;
}

Luego, aplicamos estas variables a los elementos de la página:

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

Ahora, simplemente agregue la clase .dark-theme a <html> o <body> para cambiar los colores.

Cambiar Temas con JavaScript

Para permitir que los usuarios cambien entre temas claros y oscuros, puede usar JavaScript:

const toggleThemeBtn = document.getElementById('theme-toggle');

toggleThemeBtn.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark-theme');

    // Guardar la elección del usuario en localStorage
    if (document.documentElement.classList.contains('dark-theme')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

// Verificar la configuración guardada cuando se carga la página
if (localStorage.getItem('theme') === 'dark') {
    document.documentElement.classList.add('dark-theme');
}

De esta manera, la elección del usuario se conserva después de recargar la página.

Detección Automática del Tema del Sistema

Si desea respetar la configuración del sistema del usuario, puede usar prefers-color-scheme. Esta media query aplica automáticamente el tema apropiado:

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #ffffff;
    }
}

Este método es conveniente porque adapta inmediatamente el sitio web a las preferencias del sistema. Sin embargo, si el usuario desea seleccionar manualmente un tema, deberá combinar este enfoque con JavaScript.

Combinando Detección Automática y Selección Manual

Para tener en cuenta ambos métodos, primero puede verificar si hay una elección de tema guardada en localStorage. Si no, aplique la configuración del sistema:

const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

if (userTheme) {
    document.documentElement.classList.toggle('dark-theme', userTheme === 'dark');
} else {
    document.documentElement.classList.toggle('dark-theme', systemTheme === 'dark');
}

Creando un Interruptor Fácil de Usar

Ahora, agreguemos un botón de cambio de tema en HTML:

<button id="theme-toggle">Cambiar Tema</button>

El botón permite que el usuario cambie manualmente el tema, y la lógica para guardar la elección hace que la interacción sea conveniente.

Mejorando las Animaciones de Transición

Para hacer que el cambio de tema se vea suave, puede agregar una animación:

* {
    transition: background-color 0.3s, color 0.3s;
}

Esto crea un efecto suave de atenuación o iluminación al cambiar temas.

Ejemplo de Cambio de Tema Claro y Oscuro

Pruebe el código en una página separada

Conclusión

Implementar un tema oscuro en un sitio web usando CSS y JavaScript es una tarea relativamente simple pero importante. El uso de variables CSS hace que el código sea conveniente y escalable, mientras que la combinación de prefers-color-scheme y localStorage brinda flexibilidad a los usuarios en sus elecciones. Como resultado, el sitio web será adaptable y cómodo de usar en cualquier condición de iluminación.