Introducción: Modo Oscuro en JavaScript

Como desarrollador frontend, me he encontrado con proyectos que requieren ajustar estilos según el modo de visualización del dispositivo, ya sea claro u oscuro. Para lograrlo, además de contar con dos hojas de estilo CSS, JavaScript desempeña un papel crucial.

Código de Detección:

Para saber si el modo oscuro está activado, puedes utilizar el siguiente código:

window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

Este código devolverá un valor booleano (true o false) según la configuración del sistema del dispositivo. Puedes utilizar este valor dentro de una declaración condicional (IF) para realizar las configuraciones correspondientes.

modo oscuro en javascript

Uso de localStorage:

En muchos casos, suelo utilizar una variable localStorage para almacenar las preferencias del usuario:

  1. Verificar si la variable localStorage está previamente declarada.
  2. Detectar si el modo oscuro está activado.
  3. Cambiar el estilo de la página según el resultado.

Personalización de Preferencias:

Si deseas brindar al usuario la opción de activar o desactivar el modo oscuro en la aplicación, es crucial utilizar la variable localStorage para almacenar estas preferencias. De esta manera, el usuario puede personalizar su experiencia según sus necesidades y preferencias.

DRAFT DE EJEMPLO:

function isDarkActive() {
    const isDarkModeActivated = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    let darkSwitch = null;
    let savedDarkMode = localStorage["savedDarkMode"];
    if (savedDarkMode == null) {
        if (isDarkModeActivated) {
            document.getElementById("stylesheetDoc").href = "css/styles-dark.css";
            darkSwitch = 1;
        } else {
            document.getElementById("stylesheetDoc").href = "css/styles.css";
            darkSwitch = 0;
        }
    } else {
        darkSwitch = savedDarkMode;
        if (darkSwitch == 1) {
            document.getElementById("stylesheetDoc").href = "css/styles-dark.css";
            document.getElementById("home-loader-logo").src = "img/home/logo-black.png";
        } else {
            document.getElementById("stylesheetDoc").href = "css/styles.css";
            document.getElementById("home-loader-logo").src = "img/home/logo-color.png";
        }
    }
    localStorage["savedDarkMode"] = darkSwitch;
}
//End Dark Mode

document.getElementsByTagName("HEADER")[0].addEventListener("click", event => {

    if (event.target.classList.contains("darkModeBtn")) {
        let darkSwitch = localStorage["savedDarkMode"];
        if (darkSwitch == 1) {
            themeACE = "ace/theme/chrome"
            document.getElementById("stylesheetDoc").href = "css/styles.css";
            document.getElementById("home-loader-logo").src = "img/home/logo-color.png";
            darkSwitch = 0;
        } else {
            themeACE =  "ace/theme/vibrant_ink";
            document.getElementById("stylesheetDoc").href = "css/styles-dark.css";
            document.getElementById("home-loader-logo").src = "img/home/logo-black.png";
            darkSwitch = 1;
        }
        
        localStorage["savedDarkMode"] = darkSwitch;
    }

});

Integrar la detección del modo oscuro en tus proyectos no solo mejora la experiencia del usuario, sino que también demuestra tu atención al detalle y tu compromiso con la accesibilidad y la usabilidad. ¡Asegúrate de considerarlo en tus futuros desarrollos frontend!