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) } }