Pürüzsüz Açık ve Karanlık Mod Geçişleri: Jetonlar, CSS ve Hareket
Sistem ayarlarına saygılı, yükte flaşı önleyen, yerel kontrolleri şekillendiren ve erişilebilirliğe zarar vermeden animasyon uygulayan bir açık/koyu tema anahtarı nasıl oluşturulur?
Ana nokta
Anlamsal belirteçler üzerinde temalar oluşturun, varsayılan olarak tercihler-renk-şeması ile sistem ayarını izleyin, insanların bunu geçersiz kılmasına izin verin ve renk şeması özelliğini form kontrolleri ve kaydırma çubuklarının eşleşeceği şekilde ayarlayın. Parlamayı önlemek için sayfa oluşturulmadan önce kaydedilen temayı uygulayın. Hızlı geçiş veya Görünüm Geçişi gibi geçiş animasyonunu kısa tutun ve azaltılmış hareket açıkken bunu atlayın.
Sistem ayarından başlayın
Tercih edilen renk şeması medya özelliği, kullanıcının işletim sisteminden açık renk mi yoksa koyu tema mı istediğini size bildirir. Bunu varsayılan olarak kullanın ve onu geçersiz kılan ve hatırlanan bir uygulama içi anahtar ekleyin.
Geçersiz kılmalar değil, belirteçler içeren tema
Renkleri anlamsal belirteçler (yüzey, metin, kenarlık, vurgu) olarak tanımlayın ve her temaya, genellikle kök öğedeki CSS özel özellikleri olarak kendi değerlerini verin. Böylece bileşenler temalar arasında asla değişmez; yalnızca belirteç değerleri bunu yapar. Bu, çok markalı tasarım sistemleri için kullanılan üç katmanlı token yaklaşımının aynısıdır.
Yerel kontrolleri unutmayın
MDN, color-scheme özelliğinin tarayıcıya bir öğenin hangi şemaları desteklediğini, bunun da form kontrollerinin, kaydırma çubuklarının ve diğer yerleşik kullanıcı arayüzünün varsayılan renklerini değiştirdiğini söylediğini açıklıyor. Bu olmadan, karanlık bir sayfa parlak beyaz girişleri ve kaydırma çubuklarını gösterebilir.
Yükte flaştan kaçının
Kaydedilen tema, sayfa oluşturulduktan sonra JavaScript tarafından uygulanırsa, insanlar yanlış temanın bir anını görür. Stil sayfası boyanmadan önce, belge başlığında küçük bir satır içi komut dosyası veya sunucu tarafından oluşturulan bir nitelik ile mümkün olduğu kadar erken uygulayın.
Anahtarı dikkatlice canlandırın
Yaklaşık 150 ila 250 milisaniyelik kısa bir çapraz geçiş, değişikliğin kasıtlı olduğu hissini veriyor. Büyük sayfalarda yavaş olabileceğinden, her öğedeki her renk özelliğinin geçişini yapmaktan kaçının; tek bir Görünüm Geçişi anlık görüntüsü genellikle daha düzgündür. Bir etiket veya araç ipucuyla geçişin kendisini anlaşılır hale getirin ve azaltılmış hareket açıkken animasyonu kaldırın.
Üretim için uygulama örneği
/* Tokens per theme */
:root { color-scheme: light dark; --surface: #ffffff; --text: #121212; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --surface: #121212; --text: #f2f2f2; }
}
:root[data-theme="dark"] { color-scheme: dark; --surface: #121212; --text: #f2f2f2; }
:root[data-theme="light"] { color-scheme: light; }
body { background: var(--surface); color: var(--text); }
// Switch with a View Transition where supported, instantly otherwise
function setTheme(theme) {
const apply = () => { document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); };
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) return apply();
document.startViewTransition(apply);
}Hatırlanacak temel ilkeler
- Varsayılan olarak tercih edilen renk şeması; insanların geçersiz kılmasına ve hatırlamasına izin verin
- Bileşen başına geçersiz kılmalar yerine anlamsal belirteçlere sahip tema
- Renk şemasını yerel kontrollerin eşleşeceği şekilde ayarlayın
- Kaydedilen temayı ilk boyamadan önce uygulayın
- Geçiş animasyonunu kısa tutun ve azaltılmış harekete uyun
Sık sorulan sorular
Kaynaklar
- prefers-color-scheme — MDN Web Belgeleri
- color-scheme — MDN Web Belgeleri
- View Transition API — MDN Web Belgeleri