{{announcement.body}}
{{announcement.title}}

How to Customize Dark Mode in iOS Apps With iOS 13

DZone 's Guide to

How to Customize Dark Mode in iOS Apps With iOS 13

Create more visually dynamic applications.

· Web Dev Zone ·
Free Resource

What You Will Learn in This Tutorial

  1. What is iOS Dark Mode and what it does.
  2. Benefits of using Dark Mode in iOS.
  3. Key considerations while implementing Dark Mode in an iPhone app.

Before we step ahead with the tutorial, let's check some basic information about the dark mode in iOS 13.

Dark Mode

Dark Mode is a dark system-wide appearance that uses a darker color palette for all screens, menus, and controls. Similar to Android Dark Mode, it changes a bright theme to a darker one. It also maintains vibrancy and contrast to make foreground content stand out against the darker background.

Benefits of Dark Mode

  • Dark Mode is very helpful when the surrounding is dark; it puts less strain on eyes compared to Light Mode.
  • You can choose the Dark Mode as the default interface style.
  • You can also use Settings to make your device select the Dark Mode automatically when the ambient light is low.
  • Dark Mode supports all accessibility features.

As announced by Apple during the 2019 developers' conference, Apple’s preinstalled apps like Notes, News, TV, Music, Reminders, Mail, and others will already have it.

However, iPhone developers will be able to use Apple’s new tools to add dark mode to their apps. Being an iPhone app development company, we had a lot of our clients looking to integrate the dark mode feature to their iOS apps.

Our experienced iPhone app developers decided to help other developers by describing the dark mode feature with a simple iOS example. Before we see how to integrate the Dark Mode feature, let us understand some considerations that one should keep in mind during feature integration.

Important Considerations 

Put the focus on content: Make sure that your content stands out and the surrounding UI recedes into the background. The purpose of the Dark Mode is to put the focus on the content in the interface.

Test for light and dark appearances: Check how the interface looks in both appearances. You may need to adjust designs to accommodate each one, as designs might work well in one appearance but not the other.

Test with changes in contrast and transparency: You need to test the content when Increase Contrast and Reduce Transparency are turned on. Ensure that your content is distinct in Dark Mode when you adjust contrast and transparency settings.

Now that you are clear about considerations, let’s customize the color scheme for your iOS application for different themes.

For that, we need to create a demo project in Xcode.

Step 1: Create a new project in Xcode.

Creating a demo in Xcode

Creating a demo in Xcode


Step 2: Add a new color set in assets.xcassets folder as shown in the images.

Accessing assets.xcassets

Accessing assets.xcassets


Adding a new color set

Adding a new color set


Adding a new color set

Adding a new color set


New color set

New color set


Step 3: Go to Storyboard and drag and drop controls that you would like to add to your project.

Adding controls to the project

Adding controls to the project


Step 4: Go to the view controller and create outlet(s) for UI Controls.

@IBOutlet weak var lblDarkMode: UILabel!
    @IBOutlet weak var tblEmployeeDetails : UITableView!
    @IBOutlet weak var swDarkMode : UISwitch!
    @IBOutlet weak var lblTableHeader : UILabel!
    @IBOutlet weak var btnDarkImage : UIButton!


Step 5: Create an employee struct and create an array of employee struct.

struct Employee {
    var employeeName : String?
    var employeeID : Int?

    init(empName : String, empID : Int) {
        self.employeeName = empName
        self.employeeID = empID
    }
}


Step 6: Append the data in arrEmployee to bind with UITableView

var arrEmployee = [Employee]()



Step 7: Assign data source for the table view.

// appending employee details to employee array to bind with table view
        arrEmployee.append(Employee(empName: "John", empID: 101))
        arrEmployee.append(Employee(empName: "Mable", empID: 102))
        arrEmployee.append(Employee(empName: "Korney", empID: 103))
        arrEmployee.append(Employee(empName: "Lilas", empID: 104))
        arrEmployee.append(Employee(empName: "Rycca", empID: 105))
        arrEmployee.append(Employee(empName: "Gasper", empID: 106))


Step 8: Create a UITableViewCell class for employee

tblEmployeeDetails.dataSource = self


Step 9: Implement the UITableView data source method.

class employeeTableViewCell: UITableViewCell {

    @IBOutlet weak var lblEmployeeName : UILabel!
    @IBOutlet weak var lblEmployeeCode : UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
    }
}


Step 10: Create a switch event to set theme (light or dark ) for UILable.

extension ViewController : UITableViewDataSource {

    //the method returning size of the list
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return arrEmployee.count
    }


    //the method returning each cell of the list
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! employeeTableViewCell
        let employee = arrEmployee[indexPath.row]
        cell.lblEmployeeName.text = "Emp Name : \(employee.employeeName ?? "NA")"
        cell.lblEmployeeCode.text = "Emp Code : \(employee.employeeID ?? 000)"
        return cell
    }
}


Step 11:
Set default behavior for controls in viewdidload.

@IBAction func swDarkMode(_ sender: UISwitch) {
        if sender.isOn {
            lblDarkMode.textColor = UIColor(named: "colorDemo")
            lblTableHeader.textColor = UIColor(named: "colorDemo")
        }
        else {
            lblDarkMode.textColor = .red
            lblTableHeader.textColor = .red
        }
    }



Step 12: Compare the assets folder with the below images.

Image title
Image title

Comparing assets folder with images


And done!

Conclusion

We hope that this iPhone tutorial will be useful to you and your concepts about iPhone Dark Mode are clear. You can download the source code of this iOS 13 Dark Mode example on github.

Here, in this iPhone app tutorial, we covered about customizing the iOS app theme for both ios dark mode and light mode. If you have any suggestions or queries in this tutorial or any questions regarding iPhone app development, we would be happy to answer you.

Topics:
ios ,iphone app developers ,web dev ,tutorial ,dark mode

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}