Appearance
Appearance settings control how your app looks in different system modes — light mode, dark mode, or following the user’s system preference.Accessing Appearance Settings
- Open your project
- Go to Settings → Appearance
Appearance Modes
Light Mode
Your app always uses light colors regardless of system setting.- Light backgrounds
- Dark text
- Consistent across all devices
Dark Mode
Your app always uses dark colors regardless of system setting.- Dark backgrounds
- Light text
- Good for media apps, reading apps
System (Automatic)
Your app follows the user’s iOS setting.- Switches when user changes system mode
- Most users expect this behavior
- Recommended for most apps
Setting Appearance Mode
In Nativeline
- Settings → Appearance
- Select: Light, Dark, or System
- Save
Via Chat
Designing for Both Modes
If you use System mode, your app needs to look good in both light and dark.System Colors
Use iOS system colors that adapt automatically:| Color | Light Mode | Dark Mode |
|---|---|---|
.background | White | Black |
.secondaryBackground | Light gray | Dark gray |
.label | Black | White |
.secondaryLabel | Gray | Light gray |
.accent | Your accent color | Same |
Ask the AI
Checking Both Modes
In the Simulator:- Open Settings app
- Display & Brightness
- Switch between Light and Dark
- See your app update
Accent Color
Your app’s primary color used for:- Buttons
- Links
- Selection highlights
- Tint color throughout
Setting Accent Color
- Settings → Appearance → Accent Color
- Choose color or enter hex value
- Save
Via Chat
Status Bar
The status bar shows time, battery, signal. You can control its style:Light Content
White text/icons — use with dark backgroundsDark Content
Black text/icons — use with light backgroundsDefault
Follows the appearance modeSetting Status Bar Style
Designing Dark Mode
Do
- ✅ Use pure black sparingly (can cause smearing on OLED)
- ✅ Use dark grays (#1C1C1E, #2C2C2E) for surfaces
- ✅ Reduce contrast for comfortable viewing
- ✅ Test in dark mode regularly
Don’t
- ❌ Use light colors that don’t adapt
- ❌ Forget about images (they may need variants)
- ❌ Ignore elevation (cards should be slightly lighter)
- ❌ Use pure white text (too harsh)
Images in Dark Mode
Some images need different versions:Problem Images
- Logos with light backgrounds
- Icons that assume light mode
- Screenshots of light UI
Solutions
Option 1: Transparent backgroundsTesting Appearance
Quick Toggle
In Simulator: Features → Toggle AppearanceSustained Testing
Live with your app in dark mode for a while. Issues become obvious through regular use.Common Issues
| Issue | Solution |
|---|---|
| Text invisible | Use system colors |
| Images look wrong | Add dark mode variants |
| Too bright in dark mode | Reduce whites, use dark grays |
| Too dim in light mode | Ensure sufficient contrast |
Appearance Best Practices
Use System colors
Use System colors
SwiftUI’s semantic colors (
.background, .label, etc.) adapt automatically. Use them instead of hard-coded colors.Test both modes equally
Test both modes equally
Don’t build in light mode and “check” dark mode later. Alternate regularly during development.
Consider your audience
Consider your audience
Some apps are better in fixed mode:
- Reading apps → User preference
- Photo apps → Dark mode (better for viewing)
- Business apps → Often light mode
Elevation matters in dark mode
Elevation matters in dark mode
In dark mode, “higher” surfaces should be slightly lighter. Cards on a background should be visible through subtle brightness differences, not borders.