Tema Oluşturmak için CSS Değişkenleri
-- ile özel özellikler tanımlayın, var() ile kullanın, iç içe kapsamlar içinde üzerine yazın ve açık/koyu tema geçişi uygulayın.
Tema Oluşturmak için CSS Değişkenleri, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
CSS Özel Özellikleri Nedir?
CSS özel özellikleri (CSS değişkenleri), bir stil sayfası boyunca yeniden kullanılabilecek değerleri depolar. --name: value ile tanımlanır ve var(--name) ile kullanılır. Ön işlemci değişkenlerinin (Sass) aksine dinamiktir; JavaScript ile güncelleyebilirsiniz.
Özel Özellikleri Tanımlama
Özellikleri küresel olarak kullanılabilir hale getirmek için :root üzerinde tanımlayın. Ayrıca bunları herhangi bir öğe üzerinde tanımlayarak o öğenin alt ağacıyla sınırlayabilirsiniz.
:root {
--color-primary: #3182ce;
--color-bg: #f7fafc;
--color-text: #1a202c;
--spacing-md: 16px;
--border-radius: 8px;
--font-sans: 'Inter', system-ui, sans-serif;
}Özel Özellikleri Kullanma
Bir değişkene var(--name) ile başvurun. İkinci bağımsız değişken olarak bir geri dönüş değeri ekleyin: var(--color-primary, #3182ce). Değişken tanımlanmamışsa geri dönüş değeri kullanılır.
.card {
background: var(--color-bg);
color: var(--color-text);
padding: var(--spacing-md);
border-radius: var(--border-radius);
}
.btn {
background: var(--color-primary, blue); /* fallback */
}Basamaklandırma: Kapsamlı Değişkenler
Özel özellikler basamaklanır ve devralınır. Bir alt öğede bir değişkeni yeniden tanımlarsanız bu değer, söz konusu öğe ve tüm alt öğeleri için üst öğenin değerini geçersiz kılar.
:root { --accent: blue; }
.card { color: var(--accent); } /* blue */
.special-section {
--accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */CSS Değişkenleriyle Koyu Mod
En temiz koyu mod kalıbı, açık ve koyu renk paletlerini CSS değişkenleri olarak tanımlamaktır. Değiştirmek için bir sınıfı açıp kapatın veya prefers-color-scheme medya sorgusunu kullanın. Tek tek renk özelliklerini geçersiz kılmanız gerekmez.
:root {
--bg: #ffffff;
--text: #1a202c;
--card-bg: #f7fafc;
}
[data-theme='dark'], @media (prefers-color-scheme: dark) {
:root {
--bg: #1a202c;
--text: #f7fafc;
--card-bg: #2d3748;
}
}
body { background: var(--bg); color: var(--text); }JavaScript ile Koyu Modu Açıp Kapatma
Kök öğedeki bir veri özniteliğini veya sınıfı değiştiren bir açma-kapama düğmesi ekleyin. Geri kalanını CSS değişkenleri halleder — tek satır JavaScript ile tek tek stil geçersiz kılmaları gerekmez.
const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
document.documentElement.setAttribute(
'data-theme',
current === 'dark' ? 'light' : 'dark'
);
});Değişkenleri JavaScript ile Güncelleme
element.style.setProperty('--name', value), satır içi bir özel özelliği günceller. removeProperty ile kaldırmak basamaklandırma değerini geri yükler. Bu, dinamik temaları ve canlandırılan değerleri mümkün kılar.
// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');
// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
document.documentElement.style.setProperty('--primary-hue', hue.value);
});CSS Değişkenleri Olarak Tasarım Belirteçleri
Tüm tasarım kararlarını — renk paleti, boşluk ölçeği, yazı tipi ölçeği — CSS değişkenleri olarak tanımlayın. Böylece bileşenlerin kullandığı tek bir doğruluk kaynağı oluşturulur. Bir belirteci değiştirdiğinizde değişiklik anında her yere yayılır.
:root {
/* Colour scale */
--blue-50: #ebf8ff;
--blue-100: #bee3f8;
--blue-500: #3182ce;
--blue-900: #1a365d;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
}calc() İçinde Değişkenleri Kullanma
CSS değişkenleri calc() içinde çalışır ve belirteç değerlerine dayalı duyarlı hesaplamalar yapmanızı sağlar.
:root { --header-height: 64px; }
.content {
/* Leave room for fixed header */
padding-top: calc(var(--header-height) + 24px);
min-height: calc(100vh - var(--header-height));
}Tarayıcı Desteği
CSS özel özellikleri tüm modern tarayıcılarda desteklenir (başlıca tarayıcılarda 2016'dan beri). Bu özellik için ön işlemci kullanmanız gerekmez. Çok eski tarayıcılar için Fallback: var() ifadesinden önce statik bir değer sağlayın.
.btn {
background: blue; /* IE fallback */
background: var(--color-primary); /* modern browsers */
}Özel Özellikler ve Sass Değişkenleri
Sass değişkenleri statik değerlere derlenir. CSS özel özellikleri çalışma zamanında var olur, dinamiktir, JavaScript ile değiştirilebilir ve DOM boyunca basamaklanır. Tema oluşturmak için CSS değişkenlerini, derleme zamanı sabitleri için Sass değişkenlerini kullanın.
Hızlı Kontrol
JavaScript'ten bir CSS özel özelliğini nasıl okur ve güncellersiniz?
Özet: CSS Özel Özellikleri
Genel kapsam için :root üzerinde -- ile tanımlayın. var() ile kullanın. Kapsamı belirlenmiş değişkenler alt öğelere doğru basamaklanır. Karanlık mod için renk belirteçlerini bir medya sorgusunda veya veri özniteliğinde yeniden tanımlayın. JavaScript'ten style.setProperty() ile güncelleyin. Değişken olarak tasarım belirteçleri = tek bir doğruluk kaynağı.
Sıkça Sorulan Sorular
“Tema Oluşturmak için CSS Değişkenleri” dersi ücretsiz mi?
Evet — “Tema Oluşturmak iç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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Tema Oluşturmak için CSS Değişkenleri” dersinde ne öğreneceğim?
-- ile özel özellikler tanımlayın, var() ile kullanın, iç içe kapsamlar içinde üzerine yazın ve açık/koyu tema geçişi uygulayın. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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 4. dersidir.
“Tema Oluşturmak iç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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- Flexbox'a Derinlemesine Bakış: Hizalama, Kaydırma, Sıralama
- CSS Grid: template-areas auto-fit minmax
- Flexbox ve Grid'i Birlikte Kullanma
- Tema Oluşturmak için CSS Değişkenleri