QR Codes โหมดมืดสำหรับจอแสดงผลดิจิทัล
Dark interfaces put the conventional black-on-white symbol at odds with the page around it, and three approaches resolve the conflict. Inverting the colours gives white modules on a dark field, which iOS 14 and most Android 10 cameras read but older devices and dedicated scanners may not. Placing a standard dark-on-light symbol inside a light container, a card or panel carrying its own quiet zone, keeps universal scanner compatibility and signals visually that the graphic is scannable. Detecting the colour-scheme preference and serving the matching variant covers both cases, at the cost of maintaining two assets instead of one.
Dark Mode QR Codes for Digital Displays
Displaying QR codes on dark-mode websites, apps, and OLED screens requires adapting the traditional black-on-white design for dark backgrounds while maintaining scannability.
The Dark Mode Challenge
Standard QR codes (black modules on white background) look jarring on dark-mode UIs. Simply inverting the colours (white modules on dark background) creates an inverted QR code that most modern scanners can handle — but not all.
Approaches
1. Inverted colours (white on dark) The simplest approach. White modules on a dark background works on most modern scanners.
- Compatible with iOS 14+ and most Android 10+ cameras
- May fail on older devices or dedicated scanners
- Ensure sufficient contrast between white modules and dark background
2. Light container on dark background Place a standard black-on-white QR code inside a light-coloured container (card, panel) on the dark page.
- Universal scanner compatibility
- Visually clear that it is a scannable code
- The container should include the quiet zone
3. Dynamic theme switching Detect the user's colour scheme preference and display the appropriate QR code variant:
- Light mode: standard black-on-white
- Dark mode: inverted or container approach
- Use CSS
prefers-color-schememedia query
OLED Considerations
OLED screens turn off pixels for true black, making white-on-black QR codes highly visible and power-efficient. However:
- Pure white on pure black can cause halation (blooming) on some OLED panels
- Slightly off-white (#F0F0F0) on black can reduce this effect
- PWM dimming at low brightness can cause flickering that affects scanning
Screen Display Best Practices
- Set the QR code to a fixed size (not responsive scaling) for consistent module resolution
- Avoid animating or transitioning the QR code
- Disable auto-brightness changes that might reduce contrast during scanning
- Set the screen brightness to maximum when displaying a QR code for scanning
- Account for Moire patterns between the screen pixel grid and QR module grid
Key Takeaways
- Inverted QR codes work on most modern scanners but not all
- A light container on a dark background provides universal compatibility
- Dynamic theme switching offers the best of both worlds
- OLED screens benefit from white-on-black for power efficiency
- Fix the QR code size and maximise brightness during scanning
คำถามที่พบบ่อย
Can a standard QR code sit on a dark background?
Yes, provided it keeps its own light quiet zone. The usual implementation places the conventional dark-on-light symbol inside a light card or panel, which preserves universal scanner compatibility and reads clearly as a scannable element on an otherwise dark page.
Is inverting the colours safe on a dark interface?
Largely. iOS 14 and most Android 10 cameras read inverted symbols, but older devices and dedicated scanners may not, so inversion trades a slice of compatibility for visual consistency. Where the audience's devices are unknown, the light container is the safer of the two.
How does theme switching serve both colour schemes?
By detecting the colour-scheme preference and returning the matching variant, so a light interface receives the conventional symbol and a dark interface the adapted one. The cost is two assets to generate and keep synchronised instead of one.