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