¿Cómo detecto el modo oscuro usando JavaScript?

Hola usuario de nuestra página web, hallamos la respuesta a lo que buscabas, continúa leyendo y la encontrarás más abajo.

Solución:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) 
    // dark mode

Para estar atento a los cambios:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => 
    const newColorScheme = e.matches ? "dark" : "light";
);

Según MediaQueryList – Web APIs | mdn, addListener es la forma correcta de escuchar el cambio. addEventListener no me funciona en iOS 13.4.

window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) 
  console.log(`changed to $e.matches ? "dark" : "light" mode`)
);

Puede consultar las consultas de medios CSS directamente con Javascript

El método window.matchMedia() devuelve un objeto MediaQueryList que representa los resultados de la consulta de medios CSS especificada string. El valor del método matchMedia() puede ser cualquiera de las funciones multimedia de la regla CSS @media, como altura mínima, anchura mínima, orientación, etc.

Para comprobar si Media-Query es true el matches se puede usar la propiedad

// Check to see if Media-Queries are supported
if (window.matchMedia) 
  // Check if the dark-mode Media-Query matches
  if(window.matchMedia('(prefers-color-scheme: dark)').matches)
    // Dark
   else 
    // Light
  
 else 
  // Default (when Media-Queries are not supported)

Para actualizar el esquema de color dinámicamente si el usuario cambiara su preferencia, se puede usar lo siguiente:

function setColorScheme(scheme) 
  switch(scheme)
    case 'dark':
      // Dark
      break;
    case 'light':
      // Light
      break;
    default:
      // Default
      break;
  


function getPreferredColorScheme() 
  if (window.matchMedia) 
    if(window.matchMedia('(prefers-color-scheme: dark)').matches)
      return 'dark';
     else 
      return 'light';
    
  
  return 'light';


if(window.matchMedia)
  var colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
  colorSchemeQuery.addEventListener('change', setColorScheme(getPreferedColorScheme()));

Al final de todo puedes encontrar las referencias de otros sys admins, tú aún tienes la libertad de dejar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador