iOS 13 ile Dark Mode

Ufuk Köşker
TurkishKit
Published in
3 min readJul 15, 2019

Herkese merhaba. Bugün WWDC19'da tanıtılan ve iOS 13 ile birlikte gelecek olan Dark Mode’u yakından inceleyeceğiz ve uygulamalarımıza nasıl dahil edebiliriz bunu öğreneceğiz.

Uygulamalarınıza Dark Mode’u dahil etmek istiyorsanız Xcode beta sürümünü indirmeniz gerekiyor.

Beta Sürüm Nasıl İndirilir?

Son Beta sürüm olan Beta 3'ü indireceğiz.

Apple’ın kendi sitesinin linkine tıklayalım.
Xcode 11 beta 3 linkine tıklayalım.
Developer hesabınız ile giriş yaptıktan sonra Download butonuna tıklayın.

Beta sürümünü inidirip kurduktan sonra kodlamaya geçebiliriz.

Dark Mode Entegrasyonu

Öncelikle boş bir proje açalım.

Sonra iki tane View elementini üst üste koyalım. Default renkler beyazdır. Ayırt edebilmek için renklerini değiştiriyoruz.

İki View Ekledik.

Sonra iki View elementini kodumuza bağlayalım. Sarı olan View elementine ‘firstView’, mavi olan View elementine ise ‘secondView’ adını verelim.

İki View elementini kodumuza bağladık.

Dark mode ile birlikte ekrandaki arayüz elemanlarının renklerinin nasıl değişeceğini belirlemek için sistem arkaplan renklerini kullanacağız. Dark Mode ile ilgili tasarım yazımızda bu konuya tekrar değineceğiz.

vewDidLoad’ın içine kodlarımızı ekledik.

Kodları yazdıysanız uygulamamızı çalıştıralım. İlk etapta uygulamamız sol taraftaki iPhone gibi görünecek.

iOS 13 Dark Mode

Görüldüğü gibi standart olarak siyahın ve beyazın 3 farklı tonu bulunmaktadır.

Simulator’de Dark Mode Aktivasyonu

Ayarlar’dan Developer seçeneğini buluyoruz.

Developer Ayarları

Daha sonra Dark Appearance seçeneğini aktif hale getiriyoruz.

Karanlık Mod Seçeneği

Ve artık Simulator karanlık modda çalışıyor!

Simulator Dark Mode

Simulator artık karanlık modda çalıştığına göre uygulamamızı çalıştırabiliriz.

Dark Mode

Dark Mode kodlarımız sorunsuz bir şekilde çalışıyor.

Farklı UI Elementleri Ekleyelim

Farklı UI elementlerinin Dark Mode ile nasıl çalıştığını deneyimlemek için projemize UISegmentedControl ekleyelim. Daha sonra bir de UILabel ekleyelim.

UISegmentedControl ve UILabel Ekliyouz.

Sonradan eklediğimiz elementleri de kodumuza ekleyelim ve sistem renklerinden bir tanesini verelim.

Uygulamamızı Çalıştıralım

Uygulamanın son hali.

Uygulamamızı Dark Mode görünümüne entegre ettik. Gördüğünüz gibi bu işlem oldukça kolay 😁 Bir sonraki yazımızda görüşmek dileğiyle. İyi çalışmalar dilerim. Dilerseniz projeyi aşağıdan indirebilirsiniz. 😁

--

--