Why display settings matter
People change how their phones look for many reasons. Some like a dark theme because bright screens feel harsh in a dim room. Others increase the text size because small type is tiring to read. Some turn off animation because it makes them uncomfortable. These are not quirks to be tolerated. They are settings people chose on purpose, and an app that ignores them feels out of step with the rest of the phone.
The most reliable approach is to respond to the system settings by default and to offer an in-app override only when it adds something useful.
What dark mode actually is
A dark theme uses dark surfaces with light text instead of the reverse. It is popular for night use, and some people simply find it more comfortable. It is worth being modest about the claims, though. Dark themes are often described as easier on the eyes or as battery savers, but the real effect depends on the person, the screen type and the ambient light. Treat dark mode as a preference to support, not as a health feature.
Whatever the benefits, a dark theme does not replace good habits. If your eyes feel tired after long sessions, breaks and sensible brightness matter more than the theme, which is a topic covered under eye strain.
Designing a dark theme properly
A dark theme is a second design, not a filter. Simply inverting colors usually produces problems. Here are the points to work through.
Avoid pure black and pure white
Pure white text on pure black can feel glaring, and some people notice a smearing or halo effect around bright text. Many designers use a very dark gray for surfaces and an off-white for body text. This is a common guideline rather than a rule, so judge the result on real screens.
Keep contrast adequate, not extreme
Text still needs enough difference from its background to be readable. Secondary text, hints and disabled states often become too faint in a dark theme. Check every text and background pair, as described in the guidance on color contrast, rather than assuming the light theme’s values carry over.
Rethink saturated colors
Strong, saturated colors that look fine on white can appear to vibrate against dark backgrounds. Slightly softer or lighter versions of your accent colors usually work better. Also remember that color should never be the only way to convey meaning, because some people cannot distinguish certain hues; colorblind modes and clear labels help here.
Use elevation carefully
On light themes, shadows suggest that one layer sits above another. Shadows are hard to see on dark surfaces, so designers often make higher layers slightly lighter instead. Keep the differences subtle and consistent.
Check images and icons
Photos, logos with white backgrounds, and thin dark icons can look wrong in a dark theme. Test every image and provide alternate versions where needed.
Following the system, with a choice
Phones typically let people pick light, dark, or automatic switching based on time of day. A sensible default is to follow that choice. Adding an in-app setting is fine, but if you do, offer three options: light, dark, and “same as system.” People should not have to change a setting twice.
Apply the theme everywhere, including loading screens, dialogs, keyboards and any web content shown inside the app. A single bright screen appearing in the middle of a dark session is jarring, especially at night. It is also worth thinking about late night screen time more broadly: a dim, calm interface is welcome, but it does not mean the app should encourage people to stay up.
Other display preferences to respect
Dark mode is only one of several settings.
- Text size. Many people enlarge system text. Build layouts that grow gracefully instead of cutting off words or overlapping. Avoid fixed heights for text containers.
- Bold text and display zoom. These system options also change how your layout looks, so test with them on.
- Reduced motion. If the system asks to reduce motion, replace large movements and parallax effects with simple fades or no animation at all. The thinking behind this is explained further in the discussion of motion and haptics.
- Reduced transparency and high contrast. Some people turn these on for clarity. Make sure text remains legible when backgrounds change.
- Orientation and brightness. Do not assume a particular orientation or screen brightness.
These options overlap with the broader range of accessibility features that phones already include. Designing for them benefits many people, including those who never think of themselves as having an accessibility need.
Testing your themes
Test both themes on actual devices, in realistic conditions: a dim bedroom, bright daylight, and a few different screens. Look at every screen, not only the main ones. Settings pages, empty states and error messages are often forgotten and end up with unreadable text.
A short checklist helps:
- Switch themes while the app is open and confirm nothing flashes or stays in the wrong theme.
- Set the system text to its largest size and scan every screen.
- Turn on reduced motion and make sure the app still communicates changes.
- Review every color pair for readable contrast.
- Check icons, images and charts.
Keep it simple
You do not need an elaborate theme engine to start. Define a small set of named colors, such as background, surface, primary text, secondary text and accent, and give each a light and a dark value. Use those names throughout the app instead of hard-coded colors. This keeps the design consistent and makes later changes much easier.
Treat display settings as part of respecting the person using the app. When an app adapts quietly to their choices, it feels comfortable without calling attention to itself.