Günümüzde bazı web siteleri, kullanıcıların cihazlarında veya tarayıcılarında karanlık tema tercihlerini otomatik algılayarak sitenin temasını buna göre ayarlıyor. Ancak bu makalemizde kullanıcının cihaz ayarı karanlık tema olsa bile nasıl web sitemizi nasıl aydınlık tema ile kullandırtabileceğimizden bahsedeceğiz. Yani bu sefer web sitemizin standardını korumak için kullanıcının tercihini es geçeceğiz :) Bunun için bazı yöntemleri derledik.
1. "prefers-color-scheme" Medya Sorgusunu Kullanarak Tema Belirleme
CSS medya sorgusu olan "prefers-color-scheme", kullanıcının açık veya koyu renk tema tercih edip etmediğini algılamak için kullanılır.
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
</style>
Bu örnekte kullanıcı karanlık temayı seçmişse arka plan siyah ve metin rengi beyaz olur. Aydınlık temayı seçmişse arka plan beyaz ve metin rengi siyah olur. Yani tema seçimine göre stillerimizi düzenliyoruz.
2. Aydınlık Temayı Zorunlu Kılma
Aydınlık temayı kullanmak için "prefers-color-scheme" medya sorgusunu kullanarak zorunlu aydınlık tema ayarlayabiliriz. Bunu yapmak için biri CSS biri Javascript olmak üzere iki farklı yöntem mevcut.
2.1. CSS Kullanımı ile
Aşağıdaki kod bloğunda öncelikle tüm kullanıcılar için renk belirliyoruz. Daha sonra karanlık tema kullananların tercihini geçersiz kılmak için tekrar belirtiyoruz.
<style>
body {
background-color: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background-color: white;
color: black;
}
}
</style>
2.2. JavaScript Kullanımı ile
JavaScript kullanarak da aydınlık temayı zorunlu kılabiliriz. Aşağıdaki kod, kullanıcının karanlık tema tercihini geçersiz kılar ve aydınlık temayı zorunlu hale getirir.
<html>
<head>
<title>Aydınlık Tema - Sanal Yazılım Ltd.</title>
<style>
body.light-theme {
background-color: white;
color: black;
}
</style>
</head>
<body>
<h1>Aydınlık Tema</h1>
<p>Sanal Yazılım Ltd.</p>
<script>
document.body.classList.add('light-theme');
</script>
</body>
</html>
Bu kod da script kısmında kullanıcının tercihi karanlık temaysa bile aydınlık tema if bloğuyla zorunlu kılıyoruz.
3. Meta Etiketi Kullanma
HTML meta etiketlerini kullanarak da kullanıcıların karanlık tema tercihlerine müdahale edebiliriz. Özellikle mobil cihazlarda ve bazı tarayıcılarda, belirli meta etiketleri kullanarak temayı kontrol etmek mümkündür.
<meta name="color-scheme" content="light only">
Bu meta etiketi, sayfanın sadece aydınlık temada görüntülenmesini sağlar. Böylece, kullanıcıların cihaz ayarında bağımsız olarak aydınlık tema kullanılacaktır.
4. CSS Değişkenlerini (Custom Properties) Kullanma
CSS değişkenleri, temayı daha esnek ve kolay yönetilebilir hale getirir. Bu yöntemle, belirli CSS değişkenlerini tanımlayarak temayı yönetebilir ve karanlık tema tercihlerini geçersiz kılabiliriz.
<style>
:root {
--background-color: white;
--text-color: black;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
@media (prefers-color-scheme: dark) {
:root {
background-color: white;
color: black;
}
}
</style>
Bu kodda belgenin tamamında geçerli olacak değişkenler kök düzeyde yani "root"ta tanımlanıyor. Daha sonra tanımlanan değişkenleri "var" değişkeni ile kullanıyoruz. Ardından karanlık tema tercih edilse bile her zaman aydınlık tema kullanmak için medya sorgularını kullanarak değişkenlerin değerlerini geçersiz kılıyoruz.
Yazar: Berkay UZUN
Düzenleme: Sanal Yazılım ekibi
Kaynakça
developer.mozilla.org
css-tricks.com
medium.com