NEW: Join my free 100 Days of SwiftUI challenge today! >>

How to use semantic colors to help your iOS app adapt to dark mode

Swift version: 5.1

Paul Hudson    @twostraws   

When specifying colors for objects in your views, it’s often easier to use the built-in semantic colors of UIColor rather than specifying our own custom colors that might not look good in both light and dark mode.

For example, when you are coloring a label, use UIColor.label, .secondaryLabel, or similar so that UIKit will automatically make sure it stands out.

For backgrounds you should use UIColor.systemBackground, .secondarySystemBackground, or similar so that when you layer one view over another they don’t appear to become merged.

And when you’re using fixed colors like .red or .blue you should instead use .systemRed or .systemBlue to get a color that will adapt to the user’s trait environment – it will be a lighter red when in dark mode, and a darker red in light mode, rather than the fixed pure red of .red.

LEARN SWIFTUI FOR FREE I have a massive, free SwiftUI video collection on YouTube teaching you how to build complete apps with SwiftUI – check it out!

Available from iOS 13.0

Similar solutions…

About the Swift Knowledge Base

This is part of the Swift Knowledge Base, a free, searchable collection of solutions for common iOS questions.

BUY OUR BOOKS
Buy Pro Swift Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift (Vapor Edition) Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Server-Side Swift (Kitura Edition) Buy Beyond Code

Was this page useful? Let us know!

Average rating: 4.4/5