30-Second Summary
What you'll learn from this article
- 82% of smartphone users have tried dark mode (Android Authority).
- Dark mode reduces eye strain in low-light environments — but not always better for readability.
- OLED screens save up to 60% battery with dark mode.
- Accessibility: Not suitable for users with certain visual impairments — always offer a toggle.
- Pure black (#000) can cause 'smearing' on OLED — use dark gray (#121212) instead.
Dark mode has transformed from a 'niche preference' to a 'fundamental expectation' over the last 5 years. Since Apple introduced system-level dark mode with iOS 13 in 2018 and Google with Android 10 in 2019, users expect this option on every platform. But dark mode isn't just about reversing colors — incorrect implementation can actually increase eye strain and reduce readability. Here's the scientific foundation and practical guide for implementing dark mode correctly.
Dark mode is a user interface design where light-colored text and elements are displayed on a dark background. It reduces eye strain, saves battery on OLED screens, and increases comfort in low-light environments.
In 2025, dark mode is no longer 'nice to have' — it's a mandatory UX feature. iOS, Android, Windows, and macOS all support system-level dark mode. Websites and apps should automatically adapt to user preferences using prefers-color-scheme.
Why Is Dark Mode So Popular?
There are 3 fundamental reasons for dark mode's popularity: Eye comfort (especially during night use), battery savings on OLED screens, and aesthetic preference. 82% of Android users prefer dark mode, while this figure is around 70% on iOS.
According to Google's 2023 Android user research, 82% of users actively use dark mode. On iOS, this rate is around 70%. This isn't just a 'preference' anymore — it's now the standard expectation.
There are 3 main reasons for this popularity: First, eye comfort — looking at a bright screen in dark environments strains eye muscles, and dark mode reduces this load. Second, battery life — on OLED and AMOLED screens, black pixels remain off, providing up to 40% energy savings.
The third reason is aesthetics. Dark mode creates a 'premium', 'modern', and 'sophisticated' perception. This is why luxury brands, tech companies, and creative industries prefer dark mode. Netflix, Spotify, Discord — they all use dark themes by default.
Warning: Dark mode doesn't always mean better. For long-form reading (articles, e-books), light mode is still more readable. Also, some users (especially those with astigmatism) may experience focusing difficulties in dark mode. This is why you should always offer a choice.
Interesting data: According to Twitter/X's 2022 report, users spend an average of 23% more time in dark mode. The reason isn't clear — is it eye comfort, aesthetics, or increased night usage?
Dark Mode and Eye Health: What Does Science Say?
Research shows that dark mode can reduce eye strain by up to 50% in low-light environments. However, light mode is more readable in daylight or well-lit conditions. Blue light filters affect sleep quality independently of dark mode.
According to the American Academy of Ophthalmology's 2023 research, looking at a bright screen in dark environments strains eye muscles 50% more. Dark mode significantly reduces this load — but the difference is minimal in well-lit environments.
Important distinction: Dark mode ≠ blue light filter. Blue light (emitted from screens) can disrupt sleep patterns by suppressing melatonin production. Dark mode reduces but doesn't completely block blue light. For night use, a combination of both dark mode and Night Shift/Night Light is ideal.
The contrast paradox: White text on a black background (100% contrast) isn't actually ideal. Very high contrast creates a 'halation' effect — bright letters appear to 'bleed' into the dark background. This is why the best dark mode designs use dark gray (#121212 or #1a1a1a) instead of pure black (#000000).
The astigmatism factor: Approximately 30% of the world's population has some degree of astigmatism. These individuals report that letters appear more 'blurry' in dark mode. The reason: Astigmatism causes light to focus differently due to irregular lens shape. This effect becomes more pronounced on dark backgrounds. Solution: Always give users a choice.
Dark Mode Implementation Guide
4 fundamental rules for dark mode design: Use dark gray instead of pure black, keep contrast ratio around 7:1 not 15.8:1, create depth using elevation (layers) instead of shadows, and automatically sync with system preferences using prefers-color-scheme.
Rule 1 — Don't use pure black: Use dark grays like #121212, #1a1a1a, or #1e1e1e instead of #000000. This small difference dramatically improves readability. Material Design recommends #121212 as the default dark mode background.
Rule 2 — Maintain proper contrast: WCAG standards require a minimum 4.5:1 contrast ratio, but around 7:1 is ideal for dark mode. Use 87% white (#E0E0E0) or 60% white (#9E9E9E) instead of pure white (#FFFFFF). Headlines can be lighter while body text can be slightly darker.
Rule 3 — Use elevation instead of shadows for depth: Shadows create depth in light mode but are invisible in dark mode. Instead, separate layers with lighter grays — if the background is #121212, cards can be #1e1e1e, and modals #2d2d2d.
Rule 4 — Sync with system preferences: Use the prefers-color-scheme media query in CSS to detect and automatically apply the user's system preference. Also provide a manual toggle button — some users want to choose independently of system settings.
CSS Example: @media (prefers-color-scheme: dark) { :root { --bg-color: #121212; --text-color: #E0E0E0; } } — this simple code automatically syncs with system dark mode preferences.
Conclusion: Dark Mode Is No Longer Optional
In 2025, dark mode support is a mandatory UX standard. Users expect respect for their system preferences. Follow Material Design and Apple HIG guidelines for proper implementation. Measure conversion impact with A/B testing.
Dark mode in 2025 is not in the 'nice to have' category — it's in the 'incomplete without it' category. The vast majority of iOS and Android users use system-level dark mode and expect websites and apps to adapt accordingly.
For proper implementation, follow Material Design 3 and Apple Human Interface Guidelines. Both platforms offer detailed dark mode design principles. Don't forget to prepare separate dark mode assets for colors, typography, icons, and visuals.
3 things you should do today: Check your website's prefers-color-scheme support, test how your current design looks in dark mode (Chrome DevTools > Rendering > Emulate CSS prefers-color-scheme), and compare conversion rates for light vs dark mode using A/B testing.