SwiftUI ile Dark Mode

Sizlere bugün SwiftUI ile uygulamamızı nasıl Dark Mode’a uyumlu hale getirebileceğimizden bahsedeceğim.

Resim: https://medium.com/buildingraiseme/dark-mode-design-principles-raiseme-ios-dark-mode-theme-e065fb850bde

Dark Mode, iOS 13 ile 2018 yılında tanıtıldı ve kullanıcılar arasında hızlıca yayıldı. Hâlihazırda kullandığımız uygulamalar da koyu tema opsiyonunu ekleyerek kullanıcı deneyimini artırmayı hedefledi. Peki biz kendi uygulamamızı kodlarken hem normal (Light) hem de Dark Mode’a uyumlu, efektif bir kod nasıl yazabiliriz?

Öncelikle geliştirdiğimiz uygulamanın iOS 13 ve üzeri sürümleri desteklediğinden emin olmalıyız. Xcode açıldıktan sonra gelen .xcodeproj sayfasından bunu kontrol edebilir ve düzeltebiliriz.

General -> Deployment info sekmesinden değiştirilebilir

Versiyon kontrolü yaptıktan sonra ilk işimiz Assets dosyasına gitmek ve New Color Set yaratmak. Yeni setin adını “Background” koyabiliriz. Düzgün yazıldığından emin olmamız lazım çünkü kodlarken de aynen yazacağız.

Yarattığımız yeni set, zaten bizden default olarak iki renk istiyor: Any Appearance ve Dark. Burada Dark rengini siyah yapıyoruz ve bu kısımdaki işimiz bitiyor.

Peki burada neden Light Mode için bir renk opsiyonu yok? Aslında var, fakat uygulamamız bu durumda Light Mode için Any’deki rengi esas alıyor. Eğer Light Mode rengini de spesifik olarak belirtmek istersek sağ sekmede Appearances seçeneğine basıp Any, Light, Dark opsiyonunu seçmemiz gerekir.

ContentView.swift dosyasına geliyoruz. İlk önce SwiftUI’ın en büyük kolaylıklarından biri olan PreviewProvider struct’ını biraz değiştireceğiz. Burada yapmak istediğimiz şey, bize aynı anda iki preview ekranı göstermesi ve birinin Dark Mode halinde olması.

Burada iki farklı yol izleyebiliriz:

1. ForEach ile tüm renklerin olduğu bir döngü yaratabiliriz. Zaten iki adet temamız, yani ColorScheme’imiz olduğu için -normal ve dark- istediğimiz iki preview ekranlarını elde edebiliriz.

ForEach(ColorScheme.allCases, id: \.self) {
    ContentView().preferredColorScheme($0)
}

2. Daha basit olarak da direkt normal halini ve Dark Mode olan halini sırasıyla çağırabiliriz. Dark Mode halini çağırırken yardım aldığımız özellik ise Environment. Environment bize cihazımızın o anda hangi ortamda olduğunun bilgisini verir. Kendisine kodun kalan kısmında da ihtiyacımız olacak.

ContentView()
ContentView().environment(\.colorScheme, .dark)

Asıl view olan ContentView’ı ise aşağıdaki gibi basit bir demo ile yaratabiliriz.

struct ContentView: View {
    @Environment(\.colorScheme) var currentMode
    var body: some View {
        ZStack {
            Color("Background").edgesIgnoringSafeArea(.all)
            currentMode == .dark
            ? Text("Dark mode")
            : Text("Light mode")
        }
    }
}

Burada arkaplanı Color(“Background”) ile tanımladık ve olası bir tema değişikliğinde dinamik olarak değişecektir.

Ayrıca örnek olarak göstermek adına bir Environment parametresi yarattık, currentMode. Bu parametreden yardım alarak o an hangi temanın aktif olduğunu ekranın ortasında gösteren bir text eklemiş olduk.

Simülatörden tema nasıl değiştirilir?

Simülatörü ve uygulamayı ilk kez çalıştırdığımızda cihaz ve dolayısıyla uygulamamız Light Mode görünümü ile açılacaktır. Test etmek için Ayarlar -> Geliştirici -> Dark Appearance seçeneğini aktif edebiliriz. Tekrar uygulamaya döndüğümüzde ise bu sefer bizi siyah bir arkaplan ve “Dark Mode” yazısı karşılayacaktır.

Resim: https://docs.microsoft.com/tr-tr/xamarin/ios/platform/ios13/dark-mode

Ayrıca projeyi indirip test etmek veya proje üzerinden bakmak isterseniz buraya tıklayabilirsiniz.

Okuduğunuz için teşekkürler.