CSS Academy · Ders

color-scheme Özelliği

Bir öğenin hangi temaları desteklediğini tarayıcıya bildirmek için color-scheme özelliğini kullanın.

color-scheme Özelliği, 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.

color-scheme Nedir?

color-scheme özelliği, tarayıcıya bir öğenin (veya sayfanın) hangi renk şemalarını desteklediğini bildirir. Tarayıcı daha sonra bu bilgiyi kaydırma çubukları, form denetimleri, onay kutuları ve giriş kenarlıkları gibi kendi arayüz öğelerini istenen şemayla eşleşecek şekilde biçimlendirmek için kullanır.

color-scheme Değerleri

Kabul edilen değerler:

normal: öğe, belgenin varsayılanını kullanır
light: öğe yalnızca light şemasını destekler
dark: öğe yalnızca dark şemasını destekler
light dark: her ikisini de destekler; tarayıcı tercihe göre seçim yapar
dark light: dark şemasını tercih eder; light şemasına geri döner

Tarayıcı Arayüzü Öğeleri

Tarayıcı, aşağıdaki öğeleri color-scheme değerine göre otomatik olarak biçimlendirir:

Kaydırma çubukları
Giriş alanları, metin alanları, select açılır listeleri
Onay kutuları, radyo düğmeleri
Aralık kaydırıcıları
Tarih/saat seçicileri

html Öğesinde Ayarlama

color-scheme değerini kök öğede ayarlamak, tüm sayfanın sistem arayüzünün görüntülenmesini değiştirir:

<input type="checkbox" /> <select><option>A</option><option>B</option></select>

Meta Etiketi Karşılığı

color-scheme değerini daha erken uygulanması için (CSS yüklenmeden önce) HTML'de meta etiketi olarak da bildirebilirsiniz:

<pre class="code-sample">&lt;meta name="color-scheme" content="light dark"&gt;</pre>

Özel Renkler Olmadan dark Modu

En temel dark modu: color-scheme: dark değerini ayarlayın ve form öğeleriyle kaydırma çubuklarını otomatik olarak tarayıcının yönetmesine izin verin:

<p>Native form controls and page background adapt to dark automatically.</p>
<input type="text" placeholder="Native input" />

prefers-color-scheme ile Birleştirme

Tercihi algılamak ve hem özel belirteçlerinizi hem de color-scheme özelliğini birlikte ayarlamak için prefers-color-scheme kullanın:

<div class="demo">Themed via variables + color-scheme</div>

Kapsamlandırılmış color-scheme

dark bir sayfada yalıtılmış light alanlar oluşturmak için color-scheme değerini belirli öğelere uygulayın:

<div class="light-widget">Always-light widget<br/><input type="date" /></div>

Zorunlu Renkler / Windows Yüksek Kontrastı

forced-colors medya sorgusu, Windows Yüksek Kontrast Modu'nu algılar. Kapsamlı erişilebilirlik desteği için color-scheme ile forced-colors değerlerini birlikte kullanın.

<div class="card">Card respects forced-colors mode</div>

system-color Anahtar Sözcükleri

forced-colors etkin olduğunda, kullanıcının erişilebilir renk paletiyle eşleşen CSS sistem rengi anahtar sözcüklerini kullanın:

<button>System-styled button</button>

Hızlı Kontrol

html öğesinde color-scheme: dark ayarlamak hangi CSS davranışını etkinleştirir?

Özet

color-scheme, tarayıcıya bir öğe veya sayfa için kendi arayüz denetimlerini nasıl biçimlendireceğini bildirir. Otomatik yerel arayüz uyarlamasını etkinleştirmek için genel olarak color-scheme: light dark kullanın. Eksiksiz bir dark modu uygulaması için bunu CSS özel özellikleriyle birleştirin. CSS yüklenmeden önce erken uygulama için meta etiketini kullanın.

Sıkça Sorulan Sorular

“color-scheme Özelliği” dersi ücretsiz mi?

Evet — “color-scheme Özelliği” 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.

“color-scheme Özelliği” dersinde ne öğreneceğim?

Bir öğenin hangi temaları desteklediğini tarayıcıya bildirmek için color-scheme özelliğini kullanı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.

“color-scheme Özelliği” 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