CSS Academy · Ders

prefers-color-scheme Medya Sorgusu

Kullanıcının sistemindeki koyu veya açık mod tercihini prefers-color-scheme medya sorgusuyla algılayın.

prefers-color-scheme Medya Sorgusu, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Otomatik Koyu Mod Neden?

Birçok kullanıcı rahatlık, pil ömrü (OLED ekranlar) veya erişilebilirlik için işletim sistemi düzeyinde koyu modu etkinleştirir. prefers-color-scheme medya sorgusu bu tercihi algılar ve sitenizin otomatik olarak uyum sağlamasına olanak tanır.

Sorgu Değerleri

İki değer vardır:

light — kullanıcı açık renk şemasını tercih eder (veya herhangi bir tercihi yoktur)
dark — kullanıcı koyu modu tercih eder

<p>This page respects your OS dark mode setting.</p>

Mobil Öncelikli dark

Kullanıcılarınızın çoğu OLED mobil cihazlar kullanıyorsa temel stili dark olarak oluşturmayı değerlendirin:

<p>Dark by default; switches to light in light mode.</p>

CSS Değişkenleri Yaklaşımı

En temiz uygulama, her şema için bir belirteç kümesi tanımlamaktır:

<div class="card">Themed card using CSS variables</div>

dark Modunda Görseller

Göz kamaştıran görselleri önlemek için dark modunda görsellerin parlaklığını azaltın:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />

JavaScript ile Algılama

Dinamik davranış için dark modu tercihini JavaScript ile kontrol edin:

<p id="theme-status">Checking...</p>
<script>
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
  });
</script>

DevTools ile Sınama

Chrome DevTools → Rendering sekmesi → Emulate CSS prefers-color-scheme. OS ayarlarını değiştirmeden light ve dark arasında geçiş yapın. Firefox'ta: DevTools → Inspector sekmesi → göz simgesi menüsü.

dark Modu Renk İlkeleri

Etkili bir dark modu için:

Arka planlarda saf siyah yerine koyu gri kullanın — göz yorgunluğunu azaltır
Yükselti gölgelerini azaltın — daha yüksek yüzeyler için daha açık arka plan tonları kullanın
Görünürlüğü artırmak için kenarlık renklerini daha açık olacak şekilde ayarlayın
Metin kontrast oranlarını kontrol edin — farklı oranlar gerekebilir

Renkleri Tersine Çevirme Karşıt Deseni

dark modu için tüm renkleri filter: invert(1) ile basitçe asla tersine çevirmeyin. Görseller ve simgeler tuhaf renklere bürünür. Her öğe için uygun renkleri içeren doğru dark modu belirteçlerini kullanın.

Performans: Flaş Görüntüsünü Önleme

JavaScript ile tema değiştiriyorsanız, sayfa oluşturulmadan önce <head> içindeki bir <script> etiketinde tema sınıfını eşzamanlı olarak <html> öğesine uygulayarak Biçimlendirilmemiş Tema Flaşını (FOUT) önleyin.

Meta Tema Rengi

Tarayıcı arayüzünün rengini (mobil adres çubuğu, görev değiştirici) dark temayla eşleşecek şekilde güncelleyin:

<pre class="code-sample">&lt;meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff"&gt;
&lt;meta name="theme-color" media="(prefers-color-scheme: dark)"  content="#1a1a2e"&gt;</pre>

Hızlı Kontrol

OS dark moda ayarlandığında dark modu stillerini uygulamak için hangi medya sorgusu değerini kullanmalısınız?

Özet

prefers-color-scheme: dark, OS dark modu tercihini algılar. Medya sorgusu içindeki belirteç değerlerini değiştiren CSS değişkenlerini kullanarak otomatik dark modu uygulayın. dark modunda görsellerin parlaklığını azaltın. DevTools'ta sınayın. Eksiksiz bir mobil deneyim için tarayıcının theme-color meta etiketini güncelleyin.

Sıkça Sorulan Sorular

“prefers-color-scheme Medya Sorgusu” dersi ücretsiz mi?

Evet — “prefers-color-scheme Medya Sorgusu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“prefers-color-scheme Medya Sorgusu” dersinde ne öğreneceğim?

Kullanıcının sistemindeki koyu veya açık mod tercihini prefers-color-scheme medya sorgusuyla algılayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“prefers-color-scheme Medya Sorgusu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön