Dark mode isn’t an inverted light theme. It’s a second visual system with its own rules for color, depth and contrast. Users expect it: both iOS and Android support it system-wide, and an app that ignores it is the bright rectangle that blinds someone in bed at midnight.
We’ve designed dark, data-heavy interfaces at OSAM, including a trading card scanner where market prices, charts and card details all live on a dark background. Here’s what we’ve learned about designing dark mode properly and avoiding the classic mistakes.
The core principles
- Use dark grey, not pure black, as your base. A very dark grey background (Material Design’s guidance famously uses #121212) reduces the harsh contrast of bright text on pure black, shows depth better and avoids the "smearing" some OLED screens produce when scrolling pure black. Pure black still has its place, for example in media viewers or when saving battery is the point, but it’s rarely the best default.
- Show depth with lightness, not shadows. Shadows barely show on dark backgrounds. Instead, raised surfaces get slightly lighter: the background is darkest, cards a step lighter, sheets and dialogs lighter still. A clear set of three or four surface levels keeps the hierarchy readable.
- Soften the text. Pure white text on dark grey can feel like it’s vibrating. Use an off-white for primary text and dimmer greys for secondary text, while keeping enough contrast to stay readable.
- Keep contrast accessible. The same rules apply as in light mode: WCAG asks for at least 4.5:1 contrast for normal text and 3:1 for large text and key interface elements. Dark themes often fail with mid-grey secondary text, so check it.
- Desaturate your colors. Bright, saturated brand colors that look great on white can glow uncomfortably on dark backgrounds and fail contrast. Lighter, slightly less saturated versions of your palette usually work better, so plan a dark variant of each color rather than reusing the light ones.
Typical mistakes
- Simply inverting colors. Automatic inversion flips photos, ruins brand colors and creates odd greys. Every color needs a deliberate dark counterpart.
- Pure white on pure black. Maximum contrast sounds good, but it causes glare and eye strain over long reading.
- Relying on shadows. Cards and modals that were defined by shadows in light mode lose their edges completely in dark mode.
- Forgetting images and illustrations. Logos with black text disappear. Illustrations with white backgrounds become glowing boxes. Provide dark variants or transparent versions.
- Neon brand colors. That electric blue button can look radioactive on a dark background and still fail contrast with white text on top of it.
- Low-contrast secondary text. Mid-grey on dark grey looks elegant in a mockup and becomes unreadable on a real phone outdoors.
- Too many surface levels. Eight slightly different greys make the interface muddy. Fewer, clearly distinct levels work better.
- Status colors that don’t adapt. Error red, success green and warning yellow need dark-mode versions so they stay readable and calm.
- Treating it as an afterthought. Dark mode designed in the last week before launch always shows. Plan it from the design system up.
Build it as a system, not a second design
The teams that handle dark mode well don’t design every screen twice. They design one set of screens with a color system that switches underneath.
- Use semantic color tokens. Name colors by role, not by look: "background", "surface", "text-primary", "text-secondary", "accent", "error". Each token gets a light and a dark value.
- Set it up with Figma variables. Variables with light and dark modes let you switch a whole screen between themes in one click, and check both as you design.
- Lean on the platform. iOS provides semantic system colors that adapt automatically to light and dark appearance, and Android’s Material theming does the same with dynamic color. Using them keeps your app consistent with the rest of the phone, especially next to system elements like Liquid Glass controls on iOS.
- Respect the user’s choice. Follow the system setting by default. Offer an in-app override only if your audience really needs it, like reading or media apps.
- Hand off tokens, not hex codes. Developers should implement the same token names, so switching themes is automatic and future color changes happen in one place.
On our trading card scanner project, consistent components and strong contrast were what kept a dark interface full of prices and charts easy to read. The system did the heavy lifting, not screen-by-screen tweaking.
How to test it
- Check contrast with a tool. Run your text and key UI colors through a contrast checker or a Figma plugin. Don’t trust your eyes on a calibrated monitor.
- Look at it on real phones. Different screens render dark greys very differently. Test on at least one OLED phone and one LCD screen if you can.
- Test in real conditions. In a dark room at night, where dark mode is most used, and outside in sunlight, where low contrast fails first.
- Go through every state. Errors, empty screens, loading skeletons, disabled buttons, pop-ups, onboarding. These are the screens most often forgotten in dark mode.
- Check all the images. Logos, illustrations, charts, maps and user avatars. Look for glowing white boxes and invisible black lines.
- Switch themes live. Toggle the system setting while the app is open and make sure everything updates without glitches or leftover light elements.
- Ask real users. Especially people who use dark mode every day. They’ll spot what feels off within seconds.