Quick Tips To Support Dark Mode In Your iOS App | iOS 13

All you need to know about Dark Mode on iOS 13

Overview? With iOS 13 and above people can adopt a dark appearance where Apple docs says user can use settings to make their devices automatically switch to dark mode when ambient is low and this will help you to put focus on your content.

Development Environment? As as iOS developer you’ve to use Xcode 11 with iOS 13 SDK and above, iOS will automatically update system controls such as switches, collection-views etc. If you are migrating your existing app to dark in that case you will have to adapt the colours. 

How to define colours for each mode?

System Colours? iOS 13 SDK includes new system colours so if you adapt these system colours your app will automatically support dark and light mode, You can use it via Storyboard as well as programmatically (Some example below)

Custom Colors? Yes it’s strongly recommended by Apple that use system colours to provide better UX and also to make sure the consistency across apps but using the asset you can define you colour choices. Once you define iOS will take care everything for you.

How to define Image for each mode?

Using the Assets you can specify which image you want to use for dark VS any other mode and just define the image and let iOS take care for you. 

How to detect dark mode programmatically?

On Load Detection? We can use overrideUserInterfaceStyle to check which mode is currently running on user device (Just make sure, this property only available on iOS 13 and above)

Runtime Detection? Can use traitCollectionDidChange to observe the changes, It is important to remember that trait-collection may be called for other trait changes (such as device rotation)

Set Dark Mode for Specific Screen? Yes you can, this property overrideUserInterfaceStyle is available for you to use (only iOS 13 and above)

How to support WKWebView?
Just need to create variable for the color and need to handle this in CSS.

:root {
    color-scheme: light dark;
        --h1-color: #333;
        --header-bg-clr: #FFF1FF;
        --header-txt-clr: white;
    }
    @media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light dark;
        --h1-color: #333;
        --header-bg-clr: #FFF1FF;
        --header-txt-clr: white;
        }
    }

body { }
h1 { color: var(--h1-color); }
.header {
    background-color: var (--header-bg-clr);
    color: var(--header-txt-clr);
}

After Integrating this change you can use Safari to test (First you need to enable the developer menu option in Sarafi, Preferences, Advanced). Open wen inspector (using Command + Options + I) and you will see this screen with the option to toggle light/dark mode.