Karanlık Tema Ayarı Açıkken Web Sitesini Aydınlık Temayla Gösterme

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

07.09.2024 56

Yorumlar

Bu sayfalarda yer alan okur yorumları kişilerin kendi görüşleridir. Yazılanlardan Sanal Yazılım Ltd. veya sanal.mobi sorumlu tutulamaz. Yorumda ad-soyadınız anonimleştirilerek gösterilir, e-posta adresiniz ise yayınlanmaz.
Kullanıcı deneyimini geliştirmek, site kullanımını analiz etmek ve pazarlama çabalarımıza yardımcı olmak için çerezleri kullanıyoruz. Sitemize göz atmaya devam ederek veya bu bilgilendirmeyi kapatarak, Çerez Politikası`nı okuduğunuzu ve kabul ettiğinizi onaylamış olursunuz.