Tema değiştirme

CSS kursu · Orta seviye · Ders 74/98

Değişkenlerle tema değiştirmeyi öğrenirsin.

Tema değiştirme yaklaşımı

Değişkenlerle tema değiştirmek kolaydır: her tema için aynı adlı değişkenleri farklı değerlerle tanımlarsın. Uygulama hangi temayı kullanıyorsa, o temanın değerleri devreye girer.

Örneğin --arkaplan açık temada beyaz, koyu temada lacivert olur. Yalnızca bir veri özniteliği ya da sınıf değişimi, tüm arayüzü yeniden boyar.

Veri özniteliği ya da sınıf

En yaygın yöntem, kök öğeye bir data-theme özniteliği koymaktır: <html data-theme="koyu">. Sonra CSS'te her değer için ayrı bir seçici yazarsın ve değişkenleri yeniden tanımlarsın.

Örnek: [data-theme="koyu"] { --arkaplan: #0f172a; }. Aynı yaklaşımı sınıfla da yapabilirsin: .koyu { ... }. Hangisi rahatsan onu seç; ikisi de yaygın olarak çalışır.

Uygulama Koyu tema değişkenlerini tanımla

[data-theme="dark"] seçicisi içine iki değişken tanımla: --bg değerini #0f172a, --text değerini #e5e7eb yap.

Örnek çözümü göster

seçici aç, içine iki bildirimi de yaz.
Örnek çözüm:
[data-theme="dark"] {
  --bg: #0f172a;
  --text: #e5e7eb;
}

Kendini test et

Tema değiştirmek için en uygun yöntem hangisidir?
- data-theme özniteliğine göre değişkenleri yeniden tanımlamak
- Her renk için yeni bir stil dosyası yazmak
- Tüm renkleri JavaScript ile tek tek değiştirmek
- Sayfayı yeniden yükleyip başka bir CSS bağlamak
Cevabı göster

data-theme özniteliğine göre değişkenleri yeniden tanımlamak — Doğru! Değişkenleri her tema için yeniden tanımlamak en temiz yoldur.

Koyu tema için değişkeni tanımla

[data-theme="koyu"] {
  --arkaplan: ____;
}

Cevabı göster

[data-theme="koyu"] {
  --arkaplan: #0f172a;
}

Temaları eşleştir

[data-theme="açık"]

açık tema seçicisi
[data-theme="koyu"]

koyu tema seçicisi
--arkaplan: #fff

açık tema değeri
--arkaplan: #0f172a

koyu tema değeri

Tema değiştirme