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. 😉

SwiftUI: Picker

SwiftUI: ObservedObject ve ObservableObject

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

Sırasıyla açık ve koyu mod.

Ş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.

Sırasıyla açık ve koyu mod.

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.

Kaynak: Apple Developer

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

Sırasıyla açık ve koyu mod.

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.

Görseller: NASA

Image(“earth”)
    .resizable()
    .scaledToFit()

Sırasıyla açık ve koyu mod — Görseller: Nasa

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.”

— Apple Geliştirici Dokümanları

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… 😎

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook