GitHub Light ve Dark Modlarında Farklı Görseller Nasıl Gösterilir?

GitHub Light ve Dark Modlarında Farklı Görseller Nasıl Gösterilir?

GitHub'ın artan popülaritesiyle birlikte, kullanıcı deneyimini iyileştirmek için görsel özelleştirme ihtiyacı da artıyor. Bu makalede, GitHub'ın açık ve koyu modlarında farklı görselleri sorunsuz bir şekilde nasıl görüntüleyeceğinizi adım adım, yeni başlayanlardan ileri seviye kullanıcılara kadar kapsamlı bir şekilde ele alacağız. GitHub'ınızda daha şık ve özelleştirilmiş bir görünüm için bu rehber tam size göre!

Temel Kavramlar: GitHub Temaları ve CSS

Öncelikle, GitHub'ın tema sistemini ve CSS'in (Cascading Style Sheets) temel işlevlerini anlamak önemlidir. GitHub, varsayılan olarak açık bir tema kullanır. Ancak kullanıcılar, tarayıcı ayarlarından veya özel eklentiler kullanarak koyu temaya geçebilirler. Bizim amacımız, bu tema değişikliklerine göre farklı görselleri dinamik olarak yüklemektir. Bunu başarmak için CSS'in media query özelliğini kullanacağız. media query, farklı ekran boyutları veya cihaz özelliklerine göre stil uygulamak için kullanılan güçlü bir araçtır. Biz ise, bunu tema (light/dark) tespiti için kullanacağız.

Kısaca, CSS kodları yazacağız ve bu kodlar tarayıcının tema ayarlarına göre farklı stiller uygulayacak. Bu stiller arasında, en önemlisi, farklı görselleri göstermek için background-image özelliğini kullanacağız. İleri düzeyde, JavaScript ile daha dinamik çözümler üretebiliriz ancak bu makalede öncelikle CSS tabanlı bir yaklaşımı ele alacağız. Daha fazla CSS öğrenmek için (https://fatihsoysal.com) sitesindeki kaynakları inceleyebilirsiniz.

Örneğin, koyu modda daha açık renkli bir logo, açık modda ise daha koyu renkli bir logo kullanmak isteyebilirsiniz. Bu, hem görsel uyumu sağlar hem de kullanıcı deneyimini geliştirir. Uygun görsel seçimi, web sitenizin genel estetiğine ve kullanıcı dostu olmasına önemli ölçüde katkıda bulunur.

GitHub İçin Light/Dark Mod Tespitini Yapmak

GitHub'ın kendi içinde light/dark modunu algılamak için doğrudan bir API sunmuyor. Bu nedenle, light/dark modu tespit etmek için dolaylı yöntemler kullanmalıyız. En yaygın yöntem, prefers-color-scheme media query'sini kullanmaktır. Bu media query, kullanıcının işletim sisteminde tercih ettiği renk şemasını (light veya dark) algılar. Ancak bu yöntem her zaman güvenilir olmayabilir, çünkü kullanıcının tarayıcı ayarlarında bu seçeneği devre dışı bırakmış olması ihtimalini de göz önünde bulundurmalıyız.

Daha güvenilir bir yaklaşım, kullanıcıya sunulan özel bir tema seçeneği eklemek olabilir. Bu seçenek aracılığıyla, kullanıcı açık veya koyu tema arasında seçim yapabilir ve bu seçim bir cookie veya local storage'da saklanabilir. Daha sonra JavaScript kullanarak bu saklanan değeri okuyup, görselleri dinamik olarak yükleyebilirsiniz. Bu yaklaşım daha karmaşıktır ancak daha kontrollü bir deneyim sağlar.

Örnek bir CSS kodu aşağıdaki gibidir:

css
@media (prefers-color-scheme: dark) {
  .my-image {
    background-image: url('dark-mode-image.jpg');
  }
}

@media (prefers-color-scheme: light) {
  .my-image {
    background-image: url('light-mode-image.jpg');
  }
}

Bu kodda, .my-image sınıfına sahip elemanın arka plan resmi, kullanıcının tema tercihine göre değişir. dark-mode-image.jpg koyu tema için, light-mode-image.jpg ise açık tema için kullanılacak görseli temsil eder. Bu kodu GitHub'da özelleştirme seçeneklerinde CSS dosyasına ekleyebilirsiniz.

Öğrenme Yol Haritası

[Yeni Başlayan] CSS Temelleri ve Media Queries

Yeni başlayanlar için öncelikle CSS'in temel kavramlarını öğrenmeleri ve media query kullanımını anlamaları önemlidir. Çevrimiçi birçok ücretsiz kaynak bulunmaktadır. Örneğin, W3Schools sitesi iyi bir başlangıç noktası olabilir. Temel CSS syntax'ını, selektörleri ve media query'nin farklı kullanım senaryolarını öğrenerek başlayabilirsiniz. Ardından, basit bir HTML dosyası oluşturarak, media query kullanarak farklı ekran boyutlarında farklı stiller uygulamayı deneyebilirsiniz. Bu, media query'nin mantığını anlamanız için iyi bir pratik olacaktır.

[Orta] GitHub Özelleştirme Seçenekleri ve Uygulama

Orta seviye kullanıcılar için, GitHub'ın özelleştirme seçeneklerini araştırmak ve yukarıdaki CSS kodunu GitHub profil sayfanıza veya kişiselleştirdiğiniz bir repo'ya entegre etmek önemlidir. GitHub'ın kullanıcı stil sayfası özelliğini kullanarak kendi CSS kodunuzu ekleyebilir ve test edebilirsiniz. Bu aşamada, farklı görselleri kullanarak çeşitli denemeler yapabilir ve farklı media query kombinasyonlarını deneyebilirsiniz. Önemli olan, kodunuzu düzenli ve okunabilir tutmaktır. Hataları gidermek için tarayıcınızın geliştirici araçlarını kullanmayı öğrenin.

[İleri Düzey] JavaScript ile Dinamik Görsel Yükleyici

İleri düzey kullanıcılar, JavaScript kullanarak daha dinamik bir çözüm geliştirebilirler. Bu, prefers-color-scheme'e ek olarak, local storage veya cookie'ler kullanarak kullanıcının tema tercihlerini daha güvenilir bir şekilde saklamayı ve bu tercihlere göre görselleri dinamik olarak yüklemeyi sağlar. JavaScript ile DOM manipülasyonu bilgisine sahip olmanız gerekecektir. Bu yaklaşım, daha kontrollü ve özelleştirilebilir bir çözüm sunar, ancak daha karmaşık kod gerektirir. Performans optimizasyonuna dikkat etmek, özellikle çok sayıda görsel kullanıyorsanız, önemlidir. Bu konuda daha fazla bilgi için (https://fatihsoysal.com) adresindeki gelişmiş JavaScript kaynaklarını inceleyebilirsiniz.

Vaka Analizi: Kişisel Portföy Sitesi

Bir web geliştiricisinin kişisel portföy sitesini ele alalım. Bu sitede, koyu tema için daha koyu renklerde bir arka plan ve logo, açık tema içinse daha açık renklerde bir arka plan ve logo kullanmak isteyebiliriz. Bu, sitenin görünümünü kullanıcının tema tercihine göre özelleştirerek daha iyi bir kullanıcı deneyimi sağlar. CSS media query'leri kullanarak, farklı temalara uygun görselleri kolayca değiştirebiliriz. Ayrıca, JavaScript kullanarak daha da gelişmiş özelleştirmeler yapabiliriz, örneğin, buton renklerini veya yazı tiplerini temaya göre otomatik olarak değiştirebiliriz.

Performans Karşılaştırmaları

Farklı yöntemlerin performans karşılaştırmasını aşağıdaki tabloda görebilirsiniz:

Tablodan da görüleceği gibi, sadece CSS kullanımı en yüksek performansı sunar, ancak özelleştirme seçenekleri sınırlıdır. JavaScript kullanımı daha esnektir, ancak performans açısından bazı kayıplar yaşanabilir. Özel çözümler ise yüksek performans sunabilir ancak çok daha karmaşıktır.

Güvenlik Uyarıları

Sonuç

Bu makalede, GitHub light ve dark modlarında farklı görselleri göstermenin farklı yöntemlerini inceledik. CSS media query'leri kullanarak basit bir çözüm oluşturabilir veya JavaScript kullanarak daha dinamik bir yaklaşım benimseyebilirsiniz. Her iki yöntemin de avantajları ve dezavantajları vardır, bu yüzden projenizin ihtiyaçlarına en uygun olanı seçmeniz önemlidir. Doğru görsel seçimi ve uygun bir yaklaşım seçimi, kullanıcı deneyimini önemli ölçüde iyileştirebilir.

Sıkça Sorulan Sorular

• Soru 1: prefers-color-scheme her zaman güvenilir mi?
  Cevap 1: Hayır, her zaman güvenilir değildir. Kullanıcı tarayıcı ayarlarında bu özelliği devre dışı bırakmış olabilir.
• Soru 2: JavaScript kullanmanın performans etkisi nedir?
  Cevap 2: Performans etkisi, kullanılan kodun karmaşıklığına ve optimizasyon seviyesine bağlıdır. Çok fazla görsel veya karmaşık işlemler kullanılırsa, performans düşüşü yaşanabilir.
• Soru 3: Görselleri nerede saklamalıyım?
  Cevap 3: Görsellerinizi GitHub'ın depolama alanında veya bir CDN (Content Delivery Network) hizmeti kullanarak saklayabilirsiniz.
• Soru 4: Resimlerin boyutlarını nasıl optimize edebilirim?
  Cevap 4: Resimlerin boyutlarını optimize etmek için çeşitli araçlar ve teknikler mevcuttur. Örneğin, sıkıştırma araçları kullanabilir veya resmin boyutunu hedeflenen boyuta indirgeyebilirsiniz.
• Soru 5: Hangi yöntemi tercih etmeliyim?
  Cevap 5: Basit projeler için CSS media query yeterli olabilir. Daha karmaşık projeler veya yüksek özelleştirme gerektiren durumlar için JavaScript kullanımı daha uygun olabilir.

Yazar: Fatih Soysal