Detectar el dark mode en JavaScript: snippet con matchMedia

Este snippet de JavaScript detecta si el usuario ha configurado su equipo en dark mode, o modo oscuro en español. Si es así, devuelve true. Es un trozo de código que puede ayudarte a mejorar tu sitio web o tu aplicación haciéndolos más accesibles para quienes prefieren el modo oscuro.

Dark mode en JavaScript

const isDarkMode = () =>
	globalThis.matchMedia?.("(prefers-color-scheme:dark)").matches ?? false;

// Uso
isDarkMode();

¿Qué es el dark mode o modo oscuro?

El dark mode es una función que permite cambiar la paleta de colores del dispositivo por una tonalidad más oscura. Mucha gente prefiere el modo oscuro porque reduce la fatiga visual y facilita la lectura del texto en pantalla. El modo oscuro está disponible en muchos dispositivos: smartphones, portátiles y tabletas, entre otros.

Si trabajas en aplicaciones con JavaScript, poder ofrecer un modo oscuro mejora la comodidad de tus usuarios mientras usan tu aplicación.

¿Cómo activar o desactivar el modo oscuro?

Así puedes activar los temas oscuros en los dispositivos y aplicaciones más habituales, con Windows, Android, Mac e iOS:

Windows

1. En el menú Inicio, selecciona Configuración y Personalización.
2. Selecciona la opción Fondo en la parte izquierda de la pantalla. Puedes descargar tu propio tema oscuro o elegir uno de los que ofrece Windows.
3. Selecciona la opción Colores en la parte izquierda de la pantalla. Puedes elegir un color más agradable a la vista, como el gris, el tostado o un amarillo o un azul apagados (a tu gusto).
4. Prueba el color elegido en el tema oscuro haciendo clic en Oscuro dentro de la opción Elige tu modo de aplicación predeterminado. Si no te convencen los colores que has escogido, prueba con otros.

Android

1. Ve a Ajustes, después a Accesibilidad y por último a Pantalla.
2. Pulsa sobre el tema Oscuro para aplicarlo, o sobre Usar la inversión de colores para aplicarla.

MacOS

1. Ve a Preferencias del Sistema.
2. Haz clic en General.
3. Elige la opción de apariencia que más te convenga. Hay una opción clara, una oscura y una automática, que cambia según la hora del día.

iOS

1. Ve a Ajustes.
2. Selecciona Pantalla y brillo.
3. Activa o desactiva el modo oscuro.

Conclusión

El modo oscuro aporta comodidad a tus usuarios: añadir esta función a tus aplicaciones es un plus nada despreciable.

Si buscas más artículos sobre JavaScript y más trucos, puedes consultar mis artículos de JavaScript.