Mengatur tema gelap di iOS 13

Sejak iOS 13 diperkenalkan, tema gelap mulai ada dan banyak disukai pengguna iOS. Lalu sebagai pengembang iOS, bagaimana mengatur tema terang dan gelap dengan bahasa Swift?

Membuat aturan main

Yang pertama, kita perlu menulis sebuah protocol yang berisi aturan warna yang akan digunakan di dalam aplikasi. Sebagai contoh, saya hanya akan membuat 3 aturan saja.

protocol Themed {
   var background: UIColor {get}
   var main: UIColor {get}
   var mainText: UIColor {get}
}

Aturan di atas hanya membutuhkan getter di tiap variabel. Jadi siapapun yang mengimplementasi protocol di atas, harus mengembalikan warna pada tiap variabel yang sudah ditentukan.

Selanjutnya, kita perlu membuat struct untuk tiap tema. Di tulisan ini saya hanya akan membuat 2 buah tema, gelap dan terang. Berikut struct DarkTheme dan LightTheme yang mengimplementasikan seluruh variabel warna pada protocol Themed.

struct DarkTheme: Themed {
    var main: UIColor {
        return UIColor(hex: 0xFF0000)
    }
    var mainText: UIColor {
        return UIColor(hex: 0xEFEFEF)
    }
    var background: UIColor {
        return UIColor(hex: 0x353535)
    }   
}

struct LightTheme: Themed {
    var main: UIColor {
        return UIColor(hex: 0x00FF00)
    }
    var mainText: UIColor {
        return UIColor(hex: 0x353535)
    }
    var background: UIColor {
        return UIColor(hex: 0xFFFFFF)
    }
}

Untuk mengecek tema yang saat ini digunakan, kita bisa membuat method di UIApplication sebagai extension.

extension UIApplication {
    static func isDark() -> Bool {
        if #available(iOS 13.0, *) {
            return (UIScreen.main.traitCollection.userInterfaceStyle == .dark)
        }
        return false
    }
}

Dan kita perlu membuat satu buat struct lagi untuk digunakan di banyak tempat.

struct Theme {
    static var active: Themed {
        return (UIApplication.isDark()) ? DarkTheme() : LightTheme()
    }
}

Cara penggunaan

Untuk menggunakan warna yang sudah ditulis, Anda hanya membutuhkan satu baris perintah berikut:

view.backgroundColor = Theme.active.main

Untuk perlu diingat, jangan gunakan nama warna yang disediakan oleh UIKit. Contoh, penggunaan UIColor.white lebih baik dihindari dan gunakan UIColor(hex: 0xFFFFFF). Dikarenakan UIKit akan mengubah warna putih pada .white saat menggunakan tema gelap.

Oh iya, jika Anda penasaran bagaimana saya menggunakan UIColor dengan menyertakan kode heksa, bisa ambil dari sini:

extension UIColor {
    public var hexValue: Int {
        var rF: CGFloat = 0
        var gF: CGFloat = 0
        var bF: CGFloat = 0
        getRed(&rF, green: &gF, blue: &bF, alpha: nil)
        
        let r = Int(rF*255)
        let g = Int(gF*255)
        let b = Int(bF*255)
        
        return r << 16 + g << 8 + b
    }
    
    public convenience init(hex value: Int, alpha: CGFloat = 1) {
        let r = (value & 0xFF0000) >> 16
        let g = (value & 0x00FF00) >> 8
        let b = value & 0x0000FF
        
        self.init(red: CGFloat(r)/255, green: CGFloat(g)/255, blue: CGFloat(b)/255, alpha: alpha)
    }
}