Introducción

¿Alguna vez te has preguntado cómo los sitios web cambian sin problemas entre los modos claro y oscuro según tus preferencias? No es magia, es un uso inteligente de las tecnologías web modernas. En esta publicación, revelaré la técnica simple pero poderosa detrás de detectar si un usuario prefiere el modo oscuro y cómo puedes usar esta información para mejorar la experiencia del usuario en tu sitio web.

Comprender la detección del modo oscuro

Con la popularidad del modo oscuro, muchos sitios web y aplicaciones ahora ofrecen temas que se alinean con las preferencias del sistema del usuario. Esta característica se logra utilizando la API matchMedia en JavaScript, que permite que las aplicaciones web respondan a cambios en las consultas de medios, como la preferencia de combinación de colores del usuario.

como funciona

La API matchMedia

El método window.matchMedia proporciona una forma de evaluar consultas de medios y adaptar la apariencia de su sitio según las preferencias del usuario. Para verificar si el modo oscuro está habilitado, puede usar la siguiente función de JavaScript:

// Check if the user prefers dark mode
function isDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

Implementación práctica

índice.html

    
Hello, World!

    
    

• Función updateTheme: esta función verifica la preferencia del modo oscuro y actualiza la clase en consecuencia. Actualizaciones en tiempo real: se agregó un detector de eventos a matchMedia para detectar cambios en la preferencia de combinación de colores y llamar al tema de actualización para ajustar la apariencia en tiempo real.

Cuando cambias la combinación de colores de tu sistema, el sitio web se adaptará automáticamente para reflejar tus preferencias sin necesidad de actualizar la página.

Sígueme en GitHub Avinash Tare