Light Mode Development for Mobile Applications
Light mode is the basic theme of most mobile applications. But "light theme" doesn't mean "just white background with dark text." It's a thoughtful color system with semantic tokens that works correctly under different lighting, on OLED and LCD screens, and doesn't fall apart when adding future dark mode.
Color System: Tokens Instead of Values
A typical mistake at the beginning of a project is using concrete HEX values directly in components. Works at first, but with the first redesign or adding dark theme it becomes a nightmare: 200 places with #F5F5F5 that need to be found and replaced.
The correct approach is semantic tokens from the start:
-
background.primary— main screen background -
background.secondary— card background, sidebar -
surface.default— component surfaces -
text.primary,text.secondary,text.disabled -
accent.default,accent.pressed,accent.disabled -
border.default,border.focused
On iOS implemented via UIColor named colors in Asset Catalog (Color Set with one Light variant now, Dark later). In SwiftUI — via Color("backgroundPrimary") or custom extension Color. On Android — Material Design 3 ColorScheme via MaterialTheme. Flutter — ThemeData with full ColorScheme.
Typography and Spacing
Typographic scale is part of light theme. Not just "font size," but complete specification: font family, size, weight, line height, letter spacing for each text style. Minimum set:
- Display / Large Title
- Headline
- Body, Body Small
- Caption, Overline
On iOS, the font scale can be built on UIFont.preferredFont(forTextStyle:) — this is Dynamic Type, which automatically scales to user accessibility settings. Ignoring Dynamic Type means breaking the app for people with vision impairment and risking potential Apple rejection.
Contrast and Accessibility
WCAG AA: 4.5:1 for text up to 18pt, 3:1 for large text and UI elements. This is minimum. For products with wide audience, aim for AAA where possible without harming design.
Verification tools: Figma plugin A11y - Color Contrast Checker, Xcode Accessibility Inspector, Android Accessibility Scanner. Check not only main text, but placeholder text in fields (often has low contrast), disabled states.
Shadows and Elevation
In light mode, shadows are the main way to show layer hierarchy. Material Design 3 uses elevation plus shadowColor. iOS UIKit uses layer.shadowOffset, shadowRadius, shadowOpacity. Mistake: same shadow for all components. Rule: 3–4 shadow levels, from subtle (card in list) to prominent (modal, bottom sheet).
Timeline: 1–3 days depending on app volume and availability of ready design system. Cost is calculated individually.