Key Highlights
- 82% of users prefer apps that offer a dark mode option (Android 2023 data).
- Dark mode can reduce eye strain by up to 50% — especially in low-light environments.
- On OLED screens, dark mode saves up to 40% battery.
- Poorly implemented dark mode degrades readability — a black background + white text is not ideal.
- prefers-color-scheme CSS for automatic system preference adaptation has become mandatory.
Dark mode has transformed from a 'niche preference' to a 'core expectation' over the past 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 inverting colors — poor implementation can actually increase eye fatigue and reduce readability. Here are the scientific foundations and practical guide to 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 improves 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?
Three fundamental reasons for dark mode's popularity: Eye comfort (especially during nighttime use), battery savings on OLED screens, and aesthetic preference. 82% of Android users prefer dark mode, while the rate is 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 is no longer just a 'preference' — it's a standard expectation.
There are 3 fundamental reasons for this popularity: First, eye comfort — looking at a bright screen in dark environments strains the eye muscles, and dark mode reduces this burden. Second, battery life — on OLED and AMOLED screens, black pixels stay completely off, saving up to 40% energy.
The third reason is aesthetic. Dark mode creates a 'premium,' 'modern,' and 'sophisticated' perception. That's why luxury brands, tech companies, and creative industries favor dark mode. Netflix, Spotify, Discord — they all use a dark theme by default.
Note: Dark mode isn't always better. For long-form text reading (articles, e-books), light mode is still more readable. Also, some users (especially those with astigmatism) may have difficulty focusing in dark mode. That's why you should always offer the option.
Interesting Data According to Twitter/X's 2022 report, users spend an average of 23% more time in dark mode. The exact reason is unclear — is it eye comfort, aesthetics, or the increase in nighttime usage?
Dark Mode and Eye Health: What Does Science Say?
Research shows dark mode reduces eye fatigue by up to 50% in low-light environments. However, light mode is more readable during daytime or in well-lit environments. Blue light filters affect sleep quality independently of dark mode.
According to the American Academy of Ophthalmology's 2023 study, looking at a bright screen in dark environments fatigues eye muscles 50% more. Dark mode significantly reduces this burden — but in well-lit environments, the difference is minimal.
An important distinction: Dark mode is not the same as a blue light filter. Blue light (emitted from screens) can disrupt sleep patterns by suppressing melatonin production. Dark mode reduces blue light output but doesn't completely block it. For nighttime 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. Excessive contrast creates a 'halation' effect — bright characters appear to 'bleed' into the dark background. That's 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 text appears 'blurrier' in dark mode. The reason: Astigmatism causes light to focus differently due to the irregular shape of the eye lens. This effect becomes more pronounced on dark backgrounds. Solution: Always offer the user a choice.
On the left, incorrect implementation (#000 + #FFF); on the right, correct implementation (#121212 + #E0E0E0).
A Guide to Implementing Dark Mode Correctly
Four fundamental rules for dark mode design: Use dark gray instead of pure black, keep the contrast ratio around 7:1 rather than 15.8:1, create depth with elevation (layers) instead of shadows, and automatically adapt to system preferences with prefers-color-scheme.
Rule 1 — Don't use pure black: Instead of #000000, use dark grays like #121212, #1a1a1a, or #1e1e1e. This small difference dramatically improves readability. Material Design recommends #121212 as the default dark mode background.
Rule 2 — Maintain contrast balance: WCAG standards require a minimum 4.5:1 contrast ratio, but around 7:1 is ideal for dark mode. Instead of pure white (#FFFFFF), use 87% white (#E0E0E0) or 60% white (#9E9E9E). Headings can be lighter, body text slightly darker.
Rule 3 — Use elevation instead of shadows for depth: In light mode, shadows create depth, but in dark mode, shadows are invisible. Instead, separate layers with lighter grays — if the background is #121212, cards can be #1e1e1e, modals #2d2d2d.
Rule 4 — Sync with system preference: Use the prefers-color-scheme CSS media query to detect and automatically apply the user's system preference. Also provide a manual toggle button — some users want to make choices independently of their system settings.
CSS Example @media (prefers-color-scheme: dark) { :root { --bg-color: #121212; --text-color: #E0E0E0; } } — This simple code automatically adapts to the system's dark mode preference.
Conclusion: Dark Mode Is No Longer Optional
In 2025, dark mode support is a mandatory UX standard. Users expect respect for their system preferences. For correct implementation, follow Material Design and Apple HIG guidelines. Measure conversion impact with A/B testing.
In 2025, dark mode falls into the 'incomplete without it' category, not 'nice to have.' The vast majority of iOS and Android users use system-level dark mode and expect websites/apps to adapt accordingly.
For correct 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 images.
Three things you need to 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 with A/B testing.
Frequently Asked Questions
Is dark mode really good for eye health?
Partially yes. Looking at a bright screen in dark environments strains the eye muscles, and dark mode reduces this burden. However, in daytime or well-lit environments, light mode is more readable. For long-form text reading (articles, e-books), light mode is still preferred. The best approach: Offer the user a choice and automatically adapt to system preferences.
Does dark mode extend battery life?
On OLED and AMOLED screens, yes — significantly. On these screens, black pixels stay completely off and consume no energy. According to Google's tests, dark mode on OLED screens can save up to 40% battery. However, on LCD screens the difference is minimal — the backlight continues to illuminate the entire screen.
How do I add dark mode to my website?
Use the prefers-color-scheme CSS media query: @media (prefers-color-scheme: dark) { /* dark mode styles */ }. Manage colors with CSS variables (custom properties). Add a manual toggle button with JavaScript and store the preference in localStorage. If you're using Tailwind CSS, you can easily define dark mode styles with the 'dark:' prefix.
Which colors should I use in dark mode?
Use dark gray (#121212 or #1a1a1a) instead of pure black (#000000) for backgrounds. Prefer 87% white (#E0E0E0) instead of pure white (#FFFFFF) for text. For accent colors, reduce saturation by 10-20% — bright colors on dark backgrounds can 'burn the eyes.' Material Design 3 color palettes are a good starting point.
How do I remember the user's light/dark preference?
Set up a two-layer system: 1) Detect the system preference with prefers-color-scheme (default), 2) If the user makes a manual selection, store it in localStorage and use that preference on subsequent visits. JavaScript example: localStorage.setItem('theme', 'dark'); On page load, check localStorage first — if empty, fall back to the system preference.
