Siteniz için Açık/ Koyu Tema
iOS 13 ile birlikte iOS cihazlara Dark/ Light Mode, Açık/ Koyu Biçim desteği geldi, bildiğiniz gibi.
Açık/ Koyu Biçim için bazı uygulamalar güncellemelerini yaptılar. Örneğin Flipboard, Twitter gibi. Herhalde bir kaç kod değişikliği ile diğer (tüm) uygulamalar da Açık/ Koyu Biçim için güncellemelerini yaparlar.
Uygulamaların çoğunluğu (sanırım) açık renk biçime sahip. Sitelerin de çoğunluğu açık renk temalara sahip.
Site temamız için Açık/ Koyu Biçim desteği için yine sevgili CSS ve Media Queries, Ortam Sorguları yardımımıza geliyor.
Sitemizde kullanacağımız Media Queries, Ortam Sorgusu; prefers-color-scheme.
@media(prefers-color-scheme:dark){...}
Siteniz açık renkli bir tema ise, koyu, koyu renkli bir tema ise açık biçim için CSS dosyanıza aşağıdaki gibi bir örnek hazırlamanız ve eklemeniz yeterli.
Bu özelliğin genel adı Dark Mode, Koyu Biçim. Sebebi gece kullanımında beyaz, açık renkli sitelerin kabak gibi parlamasına engel olmak, gözleri ve/ veya etrafı biraz daha az rahatsız etmek veya artık siz ne için koyu biçimleri seviyorsanız…
Örnek olarak açık renkli bir tema için koyu ortam sorgusu kodu örneği verelim.
@media(prefers-color-scheme:dark){body{background:#000;color:#fff}
a{color:#fff}
a:hover{color:red}
}
Yaptığımız sadece arkaplan ve yazı renklerini değiştirmek. Siz kendi temanızın CSS dosyasına göre değiştireceğiniz bölümlerin renk kodları ile oynayarak istediğiniz şekilde bir tema oluşturabilirsiniz.
CSS elemanlarının diğer biçim kodlarını bu ortam sorgusunda vermenize gerek yok. Sadece renk kodları yeterli.
Tarayıcılarda Açık/ Koyu Biçim desteklerini yeni versiyon güncellemeleri ile gerçekleştirmişler. Hangi tarayıcıların desteklediğini Can I use sayfasından takip edebilirsiniz.
Tarayıcıların masaüstü sürümlerinde prefers-color-scheme desteği var.
Biz denemleri yaparken iPhone üzerinde iOS 13 Dark Mode, Koyu Biçim desteği
- Safari
- Edge
tarayıcılarında vardı.
Firefox’un iOS tarayıcısında kendi Koyu Biçim’i var. Sistem koyu biçim desteği de gelir herhalde.
iOS Chrome’da daha yok. Operalarda yok. Ama en yakın güncellemede gelecektir, kesin.