CSS Değişkenleriyle Çok Markalı Tema Uygulama
CSS özel özellik değerlerini değiştirerek çalışma zamanında birden çok marka teması arasında geçiş yapın.
CSS Değişkenleriyle Çok Markalı Tema Uygulama, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. 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.
Tema Mimarısına Genel Bakış
Çok markalı tema kullanımı, tek bir bileşen takma ad belirteci kümesini her marka için farklı genel belirteç değerleriyle eşler. Bileşenler takma ad belirteçlerine başvurur; marka tema dosyaları takma adları markaya özgü genel belirteçlere yeniden eşler.
Temel Belirteç Katmanı
:root içinde genel belirteçleri tanımlayın: tüm ham renk, aralık ve tipografi değerleri. Bu, varsayılan markadır. Bileşenler genel belirteçlere hiçbir zaman doğrudan başvurmaz; her zaman takma adlar üzerinden başvurur.
<span class="swatch swatch-primary"></span>
<span class="swatch swatch-secondary"></span>Takma Ad Belirteci Katmanı
Takma ad belirteçleri, var() kullanarak genel belirteçlere başvurur: --color-action: var(--color-brand-primary). Bileşenler --color-action kullanır. --color-brand-primary belirtecinin anlamını değiştirmek tüm sistemi değiştirir.
Marka Tema Sınıfları
Marka temalarını html veya bir kapsayıcı öğe üzerindeki sınıfla uygulayın. Her tema sınıfı, ilgili marka kapsamındaki genel belirteçleri geçersiz kılar. Kapsayıcının içindeki bileşenler markanın değerlerini otomatik olarak devralır.
<span class="swatch"></span>
<span class="theme-brand-a swatch"></span>
<span class="theme-brand-b swatch"></span>Tema Olarak Koyu Mod
Koyu mod, renk belirteçlerini geçersiz kılan bir sınıf veya medya sorgusuyla uygulanan bir tema varyantıdır. OS varsayılanı için prefers-color-scheme, kullanıcının geçersiz kılması için de .dark sınıfını kullanın. Her ikisi de aynı takma ad belirteçlerini değiştirir.
<div class="surface">Themed surface</div>Belirteç Kalıtımı
CSS özel özellikleri basamaklanır ve devralınır. Bir kapsayıcı öğeye uygulanan tema, tüm alt öğelerini etkiler. İç içe temalar, kapsayıcı düzeyinde dış temaları geçersiz kılar; bu, sayfa içindeki bileşenleri temalandırma senaryolarında kullanışlıdır.
Belirteç Sızıntısını Önleme
Takma ad belirteçlerinin her zaman tanımlı olduğundan emin olun. Bir tema sınıfı yoksa takma ad, varsayılana düzgün biçimde geri dönmelidir. Görünmez metinleri veya eksik arka planları önlemek için CSS var() geri dönüş söz dizimini kullanın: var(--color-action, #3b82f6).
Tema Dosyaları Oluşturma
Style Dictionary, bir belirteç JSON kaynağından ayrı tema CSS dosyaları oluşturabilir. Derleme adımı theme-brand-a.css ve theme-brand-b.css dosyalarını oluşturur. Uygun dosyayı çalışma zamanında yükleyin veya her marka için ayrı paketlere derleyin.
Temaları Sınama
Her bileşeni her temada oluşturan görsel gerileme testleri yazın. Percy ve Chromatic, her tema varyantı için ekran görüntüleri alır. Otomatik görsel sınama, genel belirteç değerleri beklenmedik şekilde değiştiğinde oluşan gerilemeleri yakalar.
Çalışma Zamanında Tema Değiştirme
JavaScript ile tema sınıflarını değiştirin: document.documentElement.classList.replace("theme-a", "theme-b"). CSS değişkenleri, bileşenleri yeniden oluşturmaya gerek kalmadan anında güncellenir; React bileşenlerinin yeniden oluşturulması veya sabit değerlerin stilinin yeniden hesaplanması gerekmez.
Performansla İlgili Hususlar
CSS değişkenleri boyama zamanında çözümlenir; kök değişkeni değiştirmek, onu kullanan tüm öğelerin yeniden boyanmasını tetikler. Genel değişken değişikliklerini animasyon döngüleri yerine kullanıcı etkileşimleriyle (tema değiştirme gibi) sınırlayın. Animasyonlu temalandırma efektleri için tek tek özellik geçişlerini kullanın.
Bilgi Kontrolü
CSS özel özellik temaları, bileşen CSS'sini değiştirmeden marka değiştirmeyi nasıl sağlar?
Özet
Çok markalı tema kullanımı, genel ham belirteç değerlerini anlamsal takma ad belirteçlerinden ayırır. Tema sınıfları, bir kapsayıcı kapsamındaki genel belirteçleri geçersiz kılar. Takma adlara başvuran bileşenler, hangi marka teması etkinse onu otomatik olarak yansıtır; böylece bileşen kodunu değiştirmeden çalışma zamanında tema değiştirilebilir.
Sıkça Sorulan Sorular
“CSS Değişkenleriyle Çok Markalı Tema Uygulama” dersi ücretsiz mi?
Evet — “CSS Değişkenleriyle Çok Markalı Tema Uygulama” 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.
“CSS Değişkenleriyle Çok Markalı Tema Uygulama” dersinde ne öğreneceğim?
CSS özel özellik değerlerini değiştirerek çalışma zamanında birden çok marka teması arasında geçiş yapı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 3. dersidir.
“CSS Değişkenleriyle Çok Markalı Tema Uygulama” 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
- Tasarım Belirteçleri Nedir
- Belirteç Adlandırma Kuralları
- CSS Değişkenleriyle Çok Markalı Tema Uygulama
- Belirteç Araçları: Style Dictionary