Dark Mode

Dark mode is a display setting that makes the screen background black or dark gray and the text and icons white or a light color. With the aims of reducing eye strain, cutting battery consumption (on OLED displays), and improving visibility in dark places, all of iOS, Android, Windows, and macOS support it as standard.

There are points to watch in the relationship between QR codes and dark mode. A QR code expresses information through "the contrast between dark modules (usually black) and light modules (usually white)". When a QR code is displayed on a dark mode web page, the darker page background can blur the boundary with the white parts of the QR code (the quiet zone and the light modules), which may lower scanning accuracy.

As a countermeasure, it is important to secure enough white margin (quiet zone) around the QR code and to explicitly specify a white background in the dark mode CSS so that the background color of the QR code image is not inverted. As in background-color: white; padding: 16px;, design it so that only the area where the QR code is displayed is unaffected by dark mode.

Conversely, there are also techniques that make use of dark mode in design QR codes. An "inverse QR code," with light modules on a dark background instead of black modules on a white background, blends naturally into a dark mode page. However, because inverse QR codes may not be readable by some older scanners, you need to take into account the device environment of your target users.