Modo oscuro

El modo oscuro es una configuración de visualización que pone el fondo de la pantalla en negro o gris oscuro, y el texto y los iconos en blanco o en colores claros. Con el fin de reducir la fatiga visual, disminuir el consumo de batería (en pantallas OLED) y mejorar la visibilidad en lugares oscuros, iOS, Android, Windows y macOS lo admiten de serie, sin excepción.

Hay puntos a los que prestar atención en la relación entre el código QR y el modo oscuro. El código QR expresa la información mediante "el contraste entre los módulos oscuros (normalmente negros) y los módulos claros (normalmente blancos)". Al mostrar un código QR en una página web en modo oscuro, el fondo más oscuro de la página puede difuminar el límite con las partes blancas del código QR (la zona silenciosa y los módulos claros), lo que puede reducir la precisión del escaneo.

Como medida, es importante reservar un margen blanco suficiente (zona silenciosa) alrededor del código QR y especificar de forma explícita un fondo blanco en el CSS del modo oscuro para que el color de fondo de la imagen del código QR no se invierta. Como en background-color: white; padding: 16px;, se diseña de modo que solo el área donde se muestra el código QR no se vea afectada por el modo oscuro.

Por el contrario, también hay técnicas que aprovechan el modo oscuro en los códigos QR de diseño. Un "código QR inverso", con módulos claros sobre fondo oscuro en lugar de módulos negros sobre fondo blanco, se integra de forma natural en una página en modo oscuro. Sin embargo, como algunos escáneres antiguos pueden no leer los códigos QR inversos, es necesario tener en cuenta el entorno de dispositivos de los usuarios a los que te diriges.