Tercih edilen renk şeması

@media (prefers-color-scheme) ile koyu tema öğrenirsin.

prefers-color-scheme

Tarayıcılar kullanıcının sistem tercihini izler: koyu tema mı, açık tema mı. CSS'te @media (prefers-color-scheme: dark) sorgusuyla bu tercihe erişirsin. Kullanıcı koyu tema seçtiyse bu bloğun içindeki bildirimler devreye girer.

Böylece tek bir biçem sayfası, iki tema birden sunabilir. Kullanıcı sisteminde değiştirir, sayfa otomatik uyum sağlar. Bu, ayrı bir koyu tema dosyası yüklemeden koyu mod desteğinin en temiz yolu.

Özel özelliklerle tema

Temaları temiz biçimde yönetmenin yolu, renkleri özel özellik olarak :root içine koymaktır. Açık tema varsayılan değerleri verir; koyu tema bloğu aynı özellikleri geçersiz kılar.

Örnek: :root { --bg: white; --text: black; } ve @media (prefers-color-scheme: dark) { :root { --bg: #111; --text: #eee; } }. Bileşenler yalnızca var(--bg) kullanır; tema otomatik geçiş yapar.

Uygulama Koyu tema için renk tanımla

Bir @media (prefers-color-scheme: dark) bloğu yaz. İçinde :root seçicisi olsun ve --bg özelliğine #111, --text özelliğine #eee değerini versin.

Örnek çözümü göster

/* koyu tema için renkler */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --text: #eee;
  }
}

Kendini test et

Hangi sorgu yalnızca koyu tema seçildiğinde devreye girer?
- @media (color-scheme: dark)
- @media (prefers-color: dark)
- @media (prefers-color-scheme: dark)
- @media (dark-mode: true)
Cevabı göster

@media (prefers-color-scheme: dark) — Doğru. prefers-color-scheme: dark yalnızca koyu tema tercihinde devreye girer.

Koyu tema sorgusunu yaz

@media (____: dark) {
  :root { --bg: #111; }
}

Cevabı göster

@media (prefers-color-scheme: dark) {
  :root { --bg: #111; }
}

Tema renklerini eşle

--bg: #111

Koyu tema arka planı
--text: #eee

Koyu tema metin rengi
--bg: #fff

Açık tema arka planı
--text: #111

Açık tema metin rengi

Sıradaki ders: Tercih edilen hareket azaltma

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler