SwiftUI: Dark Mode
Uygulamanızın koyu modda harika göründüğünden emin olun!
👋 Merhaba sevgili TurkishKit okurları! Bu yazımız biz yazılımcıların oldukça sevdiği bir özellik olan koyu mod hakkında.😄 SwiftUI uygulamalarına koyu mod neredeyse tamamen otomatik olarak entegre edilse de burada öğenecekleriniz ile daha da iyi tasarımlar elde edebilecek ve uygulamanızı daha kolay bir şekilde test edebileceksiniz. Hadi başlayalım!
🚀 Giriş
Koyu Moda Ön İzleme Oluşturmak
İlk önce hem açık hem de koyu modlar için birer SwiftUI önizlemesi oluşturalım— bunu yaparken aynı zamanda yeni bir niteleyici de öğreneceksiniz! Yapmamız gereken oldukça basit, önizleme sağlayıcımız içerisine görüntülemek istediğiniz görünümden bir tane daha ekleyip her ikisinin de koyu ya da açık mod kullanma durumunu prefreredColorSceheme
niteleyicisiyle beliriyoruz.
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
.preferredColorScheme(.light) // Açık tema
ContentView()
.preferredColorScheme(.dark) // Koyu tema
}
}
Yukarıdaki kullanımlara ek olarak bu niteleyiceye .none
değerini atayarak görünümüzünüzün uygulamanızın çalıştığı andaki sitem renk temasını kullanmasını sağlayabilirsiniz. Ancak bu davranışı elde etmek için niteleyiciye ihtiyacınız olmadığından bir sonraki alt başlıktaki örneğe benzer durumlar dışında bu kullanımla pek karşılaşmıyoruz.
Uygulamanın Renk Temasını Ayarlamak
Yukarıdaki örnekte önizlemelerimizin renk temasını ayarlamıştık, ancak bu niteleyiciyi istediğiniz her görünüme uygulayabilirsiniz. Aşağıdaki uygulama örneğinde kullanıcı renk temasını kendisi seçebiliyor!
Bu örnekte Picker
objesini ve ObservableObject
yapısını kullandık, eğer bu konular hakkında hali hazırda bilginiz yoksa aşağıdaki makalelerimize bir göz atın derim. 😉
İlk adım renk temasını arayını tutacak ve diğer görünümler ile paylaşabilmemizi sağlayacak olan bir ObservableObject
oluşturduk. Renk teması değerini tutan değişkenimizin başındaki @Published
property wrapper’ı da değişkenin değeri değiştiğinde onu kullanan bütün görünümlerin kendilerini güncellemelerini sağlıyor.
// ObservableObject Sınıfıfinal class AppSettings: ObservableObject {
@Published var colorScehemeSetting: ColorScheme? = .none
}
Ardından App
sınıfımızda az önce oluşturduğumuz veri tipinde appSettings
isminde bir @ObservedObject
değişkeni oluşturuyoruz. Ardından bunu uygulamamızın ana görünümüne bir environmentObject
olarak atıyoruz — ContentView
üzerindeki Picker
için buna ihtiyacımız var.
Son olarak da tabii ki appSettings
objesinden colorScheme
değerini kullanarak uygulamanın renk temasını belirliyoruz — yine preferredColorScheme
niteleyicisinin de yardımıyla.
@main
struct TurkishKit_TutorialsApp: App {// MARK: - Properties
@ObservedObject private var appSettings = AppSettings()// MARK: - Scene
var body: some Scene {
WindowGroup {
ContentView()
.environmentObject(appSettings)
.preferredColorScheme(appSettings.colorScehemSetting)
}
}
}
ContentView
üzerinde ilk önce environmentObject
objemize erişiyoruz — yine appSettings
ismiyle. Bir Picker
görünümü ekliyor ve içine istediğimiz üç ayar için de birer metin ekliyoruz: açık, koyu ve sistem. Text
görünümlerimize atadığımız .tag
niteleyicileri SwiftUI’a seçeneklerimizin değerlerini söylüyor.
struct ContentView: View { // MARK: - Properties
@EnvironmentObject private var appSettings: AppSettings // MARK: - View
var body: some View {
Text(“Uygulama Renk Teması:”)
.font(.title2)
.foregroundStyle(.mint) Picker(“”, selection: $appSettings.colorScehemSetting) {
Text(“Açık”).tag(ColorScheme.light as ColorScheme?)
Text(“Koyu”).tag(ColorScheme.dark as ColorScheme?)
Text(“Sistem”).tag(ColorScheme?.none)
}
.pickerStyle(.segmented)
.padding(.horizontal)
}
}
Eğer her şey yolunda gittiyse artık yukarıdaki Picker
ile uygulamanızın renk temasını ayarlayabiliyor olmasınız! 🥳
Renk Temasını Tespit Etmek
Birçok farklı nedenden dolayı uygulamanızın çalışırken kullandığı renk temasına erişmek isteyebilirsiniz. Bunu SwiftUI ile yapmak oldukça basit. İhtiyacımız olan tek şey \.colorScheme
anahtarına sahip bir @Environment
değişkeni. Aşağıdaki Label
görünümü ise uygulamanın hangi temada olduğunu bize gösteriyor.
Label(colorScheme == .light ? “Açık Mod” : “Koyu Mod”, systemImage: colorScheme == .light ? “sun.max.fill” : “moon.stars.fill”)
.foregroundStyle(colorScheme == .light ? .yellow : .indigo)
.font(.title2)
Şu anda kendi kendinize neden bu bilgiye ihtiyaç duyabileceğinizi sorguluyor olabilirsiniz. Kullandığınız renklerinin ve görsellerini koyu arka plan ile uyumlu hale getirebilmek, yaptığınız bir oyuna gece ve gündüz temaları ekmek, gölgelendirme renklerini temaya göre optimize etmek, ve otomatik olarak koyu moda adapte olamayan özel görünümlerinize koyu mod bilgisini sağlamak bu nedenlerden sadece birkaçı. Ayrıca yukarıdaki gibi bir kullanım görme engelliler için kolaylık sağlayabilir. 🙂
Assets!
Yukarıda renkleri ve göselleri temaya göre optimize etmemiz gerektiğinden bahsetmiştim, bunu hiç kod yazmadan yapabilmemiz mümkün! Assets.xcassets
dosyasına ekledimiz renk ve gösel setlerine farklı renk temaları için farklı değerler atayabiliyoruz! Hadi nasıl olacağını keşfedelim.
Dinamik Renkler
Aynı dinamik SwiftUI fontlarının erişilebilirlik ayarlarına uyum sağladığı gibi, renk temalarına uyum sağlayan renklere de dinamik renkler diyoruz. Dinamik renkler, uygulamalarımızda kullandığımız renklerin her arka plana mükemmel uyum sağladığından emin olabilmemizi sağlıyor. Mesela sarı renkli bir Label
düşünelim. Koyu arka planda iyi okunabiliyor olmasına rağmen açık arka planda okunması oldukça zor.
Bunun gibi bir durumda sarı rengin açık moddayken daha koyu gözükmesini sağlamalıyız.
SwiftUI tarafından sağlanan varsayılan renkler (.red
, .mint
, .indigo
vs.) zaten hali hazırda dinamik ve renk temalarına otomatik olarak uyum sağlayabiliyor. Apple geliştirici dokümanlarında bunu görebilirsiniz.
Assets kataloğuna siz de kolayca dinamik renkler ekleyebilirsiniz. İlk adım tabii ki proje dosyalarından Assets
dosyasını açmak ve yeni bir renk seti eklemek. Karşınıza iki adet renk değeri çıkacak: AnyAppearance ve Dark.
Tahmin edeceğiniz gibi AnyAppearance açık modda kulanacağımız rengi, ve Dark da koyu modda kulanacağımız rengi içeriyor.
Aşağıda brightYellow
isminde yeni bir renk oluşturdum ve koyu mod değerine oldukça parlak bir sarı renk atarken açık mod değerine biraz daha koyu bir sarı atadım.
Label(“Hello, world!”, systemImage: “face.smiling”)
.font(.largeTitle)
.foregroundColor(Color(“brightYellow”))
Sonuç gördüğünüz üzere çok daha iyi.
Dinamik Görseller
Dinamik görsellerin de temel mantığı dinamik resimler ile aynı: farklı renk temalarında uygun görseller görüntülemek. Dinamik görselleri renk uyumuna ek olarak temaya göre gece ve gündüzü temsil etmek için kullanabiliriz.
Dinamik görsel oluşturmak için gereken adımlar dinamik renginkilerle oldukça benziyor. Aşağıdaki örnekte açık modda gündüz, koyu modda ise gece çekilmiş dünya fotoğrafı kullanan bir görsel seti oluşturdum.
Image(“earth”)
.resizable()
.scaledToFit()
Uygulamanızın Sadece Tek Bir Temayı Desteklemesini Sağlamak
Herhangi bir sebepten dolayı uygulamanızın her iki renk temasını da desteklememesini istiyor, sistem hangi temayı kullanırsa kullansın uygulamanızın sadece açık veya sadece koyu modda kalmasını istiyor olabilirsiniz. Apple — ve ben de 😅 — kesinlikle zorunda kalmadığınız sürece bunu yapmamanızı öneriyor — hatta bunu uygulamanızın koyu mod desteği üzerinde çalışırken geçici olarak yapmanızı söylüyor.
“Make every effort to adopt both light and dark appearances in your apps.”
“Supporting Dark Mode is strongly encouraged. Use the
UIUserInterfaceStyle
key to opt out only temporarily while you work on improvements to your app's Dark Mode support.”
Farklı renk temalarının getirdiği kişiselleştirme, kullanıcı deneyime gerçekten çok şey katan bir özellik.
Uygulamanızın info.plist
dosyasına gidin ve aşağıdaki gibi Appearance
isminde yeni bir anahtar ekleyin — herhangi bir anahtarın yanındaki + sembolüne basarak yeni bir anahtar oluşturabilirsiniz. Veri tipi bir String
olmalı. Sadece açık mod için Light
, sadece koyu mod için de Dark
değerini girin.
💡İpucu: Buraya bu anahtarı eklememiz, preferredColorScheme
niteleyicilerini geçersiz kılamaz! Yani yukarıda yaptığımız tema seçicisi bu değişikliğe rağmen “Sistem” seçeneği haricinde normal bir biçimde çalışmaya devam ediyor.
Hepsi bu kadar. Umarım burada öğrendikleriniz sizin için faydalı olur! Kendinize çok iyi bakın, harika bir yaz tatili dileğiyle… 😎