Introducción

El modo oscuro es una configuración de visualización que utiliza un fondo oscuro con texto y elementos claros. Ha ganado popularidad porque luce bien y ofrece varios beneficios prácticos.

Los beneficios del modo oscuro incluyen:

1. Reducción de la fatiga visual: El modo oscuro puede ser más agradable para la vista, especialmente en entornos con poca luz, ya que reduce la cantidad de luz brillante emitida por las pantallas.
2. Duración de la batería mejorada en pantallas OLED: En las pantallas OLED (diodo emisor de luz orgánico), el modo oscuro puede ahorrar batería porque los píxeles negros están esencialmente apagados, consumiendo menos energía en comparación con la visualización de colores brillantes.

En este tutorial, cubriremos cómo cambiar su sitio web al modo oscuro usando CSS y JavaScript. Comenzaremos con una plantilla de página web sencilla con un tema claro y la transformaremos en un sitio web con un modo claro/oscuro alternable, lo que permitirá a los usuarios cambiar entre temas claros y oscuros sin problemas.

Configurando el proyecto

Comencemos con una plantilla de página web sencilla con un tema ligero. Luego, lo transformaremos en un sitio web con un modo claro/oscuro alternable, lo que permitirá a los usuarios cambiar entre temas claros y oscuros.

Implementación de estilos de modo oscuro

Elegir los colores

El primer paso es enumerar todos los colores que estamos usando y elegir una versión de tema oscuro para cada uno. En la siguiente tabla, he enumerado todos los colores de la página y sus correspondientes versiones oscuras.

Variables personalizadas

Luego usamos variables CSS para crear una clase oscura y clara en el cuerpo con esas variables.

body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}

Puede leer sobre las variables CSS en Uso de propiedades personalizadas de CSS. Básicamente, son entidades definidas mediante dos guiones (--) que almacenan valores para su reutilización en un documento. Las variables CSS facilitan el mantenimiento al permitir que los cambios se actualicen automáticamente.

Colores de elementos dinámicos

Usamos la función CSS var() para insertar los valores de las variables CSS. De esta manera, podemos cambiar dinámicamente el color y actualizar una variable para reflejar los cambios en todo el documento, en lugar de cambiar cada uno manualmente.

Aquí hay un ejemplo del elemento de navegación y sus hijos:

body {
  background-color: var(--body-bg);
  color: var(--primary-text);
}

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}

Alternar modo claro/oscuro con JavaScript

Ahora podemos cambiar la clase del cuerpo a oscuro o claro para cambiar el tema. Primero, agregue un botón al encabezado y configure la función changeTheme() para su evento de clic:

Defina la función changeTheme() que alterna la clase del cuerpo:

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }
}

Y ahora los usuarios pueden cambiar el tema del sitio web haciendo clic en el botón.

Puedes ver el código del tutorial en el CodePen a continuación

Próximos pasos

Además, puede almacenar la preferencia de tema del usuario en el almacenamiento local. Actualizar la función changeTheme() para guardar el tema seleccionado y verificarlo cuando se carga la página garantizará que la elección del usuario se recuerde y se aplique automáticamente en su próxima visita.

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});

Añadiendo la combinación de colores: oscuro; La propiedad cuando se está en el tema oscuro también puede garantizar que el navegador cambie el estilo de algunos elementos, que de otro modo serían difíciles de diseñar.

body.dark {
  color-scheme: dark;
}

Conclusión

En conclusión, agregar el modo oscuro a su sitio web puede mejorar la experiencia del usuario al reducir la fatiga visual y extender la duración de la batería en las pantallas OLED. Siguiendo esta guía, puede configurar fácilmente un modo claro/oscuro para alternar usando CSS y JavaScript. Personaliza el modo oscuro para que se ajuste a tu diseño.

Comparta sus implementaciones o haga preguntas en los comentarios a continuación.