¿Te gusta el modo oscuro pero no sabes cómo detectarlo con JavaScript? ¡No te preocupes! En este artículo te enseñaré el truco definitivo para saber si tu usuario prefiere el modo oscuro y cómo adaptar tu web a sus gustos. ¡Sigue leyendo y sorprende a tus visitantes! 🚀

🔍 ¿Por qué es importante detectar el modo oscuro?

El modo oscuro no solo es estéticamente genial, sino que también:
✅ Reduce la fatiga visual
✅ Ahorra batería en dispositivos OLED
✅ Mejora la experiencia de usuario

¡Y con JavaScript, puedes detectarlo en segundos!

💻 Código JavaScript para detectar el modo oscuro

Aquí tienes la forma más sencilla de comprobar si el usuario tiene activado el modo oscuro en su sistema:

// Verificar si el usuario prefiere el modo oscuro
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

if (isDarkMode) {
    console.log("🌙 El usuario está en modo oscuro");
    document.body.classList.add("dark-theme"); // Aplica tus estilos oscuros
} else {
    console.log("☀️ El usuario está en modo claro");
    document.body.classList.remove("dark-theme");
}

🎨 Bonus: Detectar cambios en tiempo real

Si el usuario cambia de modo oscuro a claro (o viceversa), puedes detectarlo así:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    if (e.matches) {
        console.log("🌙 ¡Cambió a modo oscuro!");
        document.body.classList.add("dark-theme");
    } else {
        console.log("☀️ ¡Cambió a modo claro!");
        document.body.classList.remove("dark-theme");
    }
});

🚀 ¿Cómo implementarlo en tu web?

1. Añade el código JavaScript antes del cierre de </body>.
2. Crea estilos CSS para .dark-theme (ejemplo: fondos oscuros, textos claros).
3. ¡Listo! Tu web se adaptará automáticamente al modo oscuro.

📢 ¡Tu turno!

¿Te ha gustado este truco? ¡Déjanos un comentario 💬 y cuéntanos si usas el modo oscuro en tus proyectos.

🔁 ¿Quieres ayudar a más desarrolladores? ¡Comparte este artículo en Twitter, LinkedIn o Instagram! #JavaScript #ModoOscuro #WebDev2025

🌟 ¿Quieres más tips de JavaScript?

👉Agréganos a tus favoritos para más tutoriales como este.

¡Hasta la próxima! 👨‍💻👩‍💻