Web: Koyu Tema
Sitenizi koyu tema ile uyumlu hale getirerek kullanıcıların göz yormayan bir deneyim yaşamasını sağlayın!
Herkese merhaba! Bu yazımızda, Safari başta olmak üzere bir çok tarayıcı ve cihazda internet sitenizin renklerini cihazda seçili olan tema ile nasıl uyumlu hale getirebileceğinizi göstereceğim.
Eğer yolunu kaybetmiş bir iOS geliştiricisiyseniz aşağıdaki makalelere göz atabilirsiniz:
Koyu tema, Safari’ye sahip Apple cihazlarına ilk kez macOS Mojave ile gelmişti. Bir sene sonra çıkan iOS ve iPadOS 13 de koyu tema desteğine sahipti ve bu dönemde koyu tema özelliği Safari’de de kullanılabilir hale gelmişti.
Varsayılan ayarlarda, bir kullanıcının siteyi açık veya koyu modda görmesinin arasında bir fark bulunmuyor. Bunun sebebi ise 30 yıldan fazla süredir var olan bir standardı -sayfanın arkaplanının beyaz, metinlerin siyah olması- bozmamak.
Ancak bu, sayfaların bir çoğunun fazla açık renkli olması problemini ortaya çıkarıyor. Mail uygulaması, bu sorunu çözmek için sayfaları otomatik olarak koyulaştırıyor.
Web’deki her içerik, mailler kadar basit değil. Bu sebeple WebKit ve Safari, siteleri otomatik olarak koyu moda çevirmiyor. Ancak tarayıcının bunu otomatik olarak yapmasını isterseniz sitenize aşağıdaki kodu ekleyebilirsiniz:
:root {
color-scheme: light dark;
}
Basit olduğunu düşündüğünüz çoğu web içeriğini bu şekilde koyu moda uyumlu hale getirebilirsiniz. Ancak karmaşık sitelerde iş bu kadar kolay değil.
Böyle durumlarda prefers-color-scheme media “query”sini kullanmamız gerekiyor.
Şu anda aşağıdaki CSS kodlarına sahip bir sitemiz var:
h1 {
color: #ff0000;
}
h2 {
color: #0000ff;
}
body {
background-color: white;
}Tarayıcıda ise şu şekilde görünüyor:
Bu site, koyu moda geçtiğinde arkaplanı siyah yapmakla birlikte yazıların renklerini de tersine çevirmek istiyoruz.
Bunun için CSS kodlarının altına aşağıdaki satırları ekleyelim:
@media (prefers-color-scheme: dark) {
body {
background-color: black;
}
}Böylece koyu tema aktif olduğunda arkaplan siyaha dönecek.
Şimdi de yazı renklerini ilgilendiren kısmı media “query”sinin içine ekleyelim:
h1 {
color: #0044ff;
}
h2 {
color: #ff3b3b;
}
Metinlerin de rengini değiştirdik.
Web sayfalarında bulunabilecek diğer bir eleman türü ise görüntüler. Görüntüleri de koyu/açık temaya göre değiştirebiliyoruz. Bunu, bir TurkishKit logosu ile göstereceğim.
Aşağıdaki kodu siteye ekleyelim:
<picture>
<source srcset="/TKLogoDark.png" media="(prefers-color-scheme: dark)">
<img src="/TKLogoLight.png">
</picture><picture> “tag”ini kullanarak aynı görsel için birden fazla kaynak belirterek uygun olanı seçebiliyoruz.
Bu durumda, koyu renkli harflere sahip olan logo açık temada, açık renkli harflere sahip olan logo ise koyu temada gösterilebiliyor.
Sitenizi koyu tema destekli hale getirmek için bilmeniz gereken en önemli şeyler bunlardı. Bir sonraki makalede görüşmek üzere. 👋
