CSS Academy · Ders

Tema İçin CSS Değişkenleri

Açık ve koyu değerler arasında geçiş yapan, CSS özel özelliklerini kullanan belirteç tabanlı bir tema sistemi oluşturun.

Tema İçin CSS Değişkenleri, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. 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 Mimarisine Genel Bakış

CSS özel özellikleri, modern CSS temalarının temelidir. Çalışma zamanında değiştirilebilen canlı bir belirteç katmanı görevi görürler; böylece dark modu, beyaz etiketlemeyi ve kullanıcı denetimli kişiselleştirmeyi mümkün kılarlar.

Tasarım Belirteci Katmanları

İyi yapılandırılmış bir tema sisteminin üç katmanı vardır:

İlkel belirteçler: ham değerler (--blue-500: #3b82f6)
Anlamsal belirteçler: anlama dayalı değerler (--color-primary: var(--blue-500))
Bileşen belirteçleri: bileşene özgü değerler (--button-bg: var(--color-primary))

Light Temayı Tanımlama

Eksiksiz light temayı :root üzerinde tanımlayın:

<div class="demo">Themed surface<br/><button class="btn">Primary Button</button></div>

dark Tema Geçersiz Kılması

Belirteçleri dark kapsamda (medya sorgusu veya sınıf) geçersiz kılın:

<div class="demo">Adapts to dark mode automatically</div>

Bileşenlerde Belirteçleri Kullanma

Bileşenler sabit kodlanmış değerler yerine anlamsal belirteçleri kullanır:

<div class="card">Card using theme tokens</div>

Sınıf Tabanlı Geçersiz Kılma

<html> üzerindeki bir sınıfla manuel geçersiz kılmaya izin verin:

<div data-theme="dark" class="demo">Dark theme via data-theme</div>
<div data-theme="light" class="demo">Light theme via data-theme</div>

Bileşen Düzeyinde Tema Oluşturma

Bir bileşen, daha kapsamlı özelleştirme için kendi belirteç katmanını tanımlayabilir:

<div class="card">Component-level theming</div>

Beyaz Etiketli Tema Oluşturma

CSS değişkenleri, her müşterinin küçük bir marka belirteci kümesini geçersiz kılarak farklı bir temaya sahip olduğu beyaz etiketli ürünleri mümkün kılar:

<div data-brand="client-a" class="brand-demo">Client A brand color</div>
<div data-brand="client-b" class="brand-demo">Client B brand color</div>

Tema Değişikliklerine Geçiş Ekleme

Tema ile ilgili özelliklerde CSS geçişi kullanarak yumuşak tema geçişleri sağlayabilirsiniz:

<div class="demo" id="theme-demo">Themed content</div>
<button onclick="document.documentElement.classList.toggle('theme-transitioning'); const d=document.getElementById('theme-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff';">Toggle Theme (transitions smoothly)</button>

Belirteç Belgeleri

Tüm geliştiricilerin hangi değişkenleri kullanacağını bilmesi için tasarım belirteçlerinizi belgeleyin. Tüm belirteçleri light ve dark değerleriyle görüntüleyen bir stil kılavuzu bileşeni (Storybook gibi), büyük ekipler için çok değerlidir.

Belirteç Araçları: Style Dictionary

Amazon tarafından geliştirilen Style Dictionary, JSON'da tanımlanan tasarım belirteçlerini CSS özel özelliklerine, JavaScript sabitlerine ve diğer platform biçimlerine otomatik olarak dönüştürür; böylece belirteçlerin tasarım ve kod arasında eşzamanlı kalmasını sağlar.

Hızlı Kontrol

İki düzeyli bir belirteç mimarisinde, .button bileşeni arka plan rengi için hangi belirteç türüne başvurmalıdır?

Özet

CSS değişkenleri güçlü tema sistemlerini destekler. Üç katman oluşturun: ilkel belirteçler, anlamsal belirteçler ve bileşen belirteçleri. Temaları, medya sorgusu veya öznitelik seçicisi aracılığıyla :root üzerindeki belirteç geçersiz kılmaları olarak tanımlayın. Otomatik tema kalıtımı için bileşenlerde anlamsal belirteçleri kullanın. Style Dictionary gibi araçlar, belirteçlerin platformlar arasında dağıtımını otomatikleştirir.

Sıkça Sorulan Sorular

“Tema İçin CSS Değişkenleri” dersi ücretsiz mi?

Evet — “Tema İçin CSS Değişkenleri” 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.

“Tema İçin CSS Değişkenleri” dersinde ne öğreneceğim?

Açık ve koyu değerler arasında geçiş yapan, CSS özel özelliklerini kullanan belirteç tabanlı bir tema sistemi oluşturun. 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 2. dersidir.

“Tema İçin CSS Değişkenleri” 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