CSS Değişkenleri ile Açık ve Koyu Tema

CSS Değişkenleri ile Açık ve Koyu Tema hakkında dağınık bilgiler yerine derli toplu bir kaynak arıyorsanız doğru yerdesiniz. Bu ders 5 temel noktayı ve bunları bir araya getiren CSS örneğini sade bir dille açıklıyor.

Konuya genel bakış

Renkleri her kuralda tek tek yazmak, tema değiştirmeyi yüzlerce satırlık bir işe dönüştürür. CSS özel özellikleri (değişkenler) renkleri tek bir yerde tanımlamanızı ve koyu tema için yalnızca bu değerleri değiştirmenizi sağlar. Bu derste sistem temasına uyan, kullanıcı seçimini hatırlayan bir yapı kuruyoruz.

Konuyu adım adım öğrenelim

1. :root: Değişkenler belge kökünde tanımlanınca tüm sayfada…

:root: Değişkenler belge kökünde tanımlanınca tüm sayfada kullanılabilir.

2. var()

Değişkenin değeri kullanıldığı yerde okunur; yedek değer var(--vurgu, blue) biçiminde verilebilir.

3. prefers-color-scheme

İşletim sisteminin koyu tema tercihine kendiliğinden uyar.

4. Kullanıcı seçimi

data-tema özniteliği JavaScript ile değiştirilir, seçim localStorage'da saklanır.

5. Titreşimsiz geçiş

Tema seçimi sayfa çizilmeden önce, <head> içindeki küçük bir betikle uygulanmalıdır.

Uygulamalı örnek

Aşağıdaki CSS örneği, yukarıdaki noktaların gerçek bir kodda nasıl bir araya geldiğini gösteriyor:

:root {
  --zemin: #ffffff;
  --metin: #0f172a;
  --vurgu: #4f46e5;
}

@media (prefers-color-scheme: dark) {
  :root { --zemin: #0b1222; --metin: #e2e8f0; --vurgu: #818cf8; }
}

:root[data-tema="koyu"] { --zemin: #0b1222; --metin: #e2e8f0; --vurgu: #818cf8; }

body { background: var(--zemin); color: var(--metin); }
a, .dugme { color: var(--vurgu); }

Örnek bilinçli olarak kısa tutuldu; gerçek projede hata yönetimi ve günlükleme gibi katmanlar eklenmelidir.

Avantajları

CSS Değişkenleri ile Açık ve Koyu Tema konusunu doğru uygulamanın başlıca kazanımları şunlar:

• Bakımı kolay ve okunur bir kod tabanı sağlar
• Farklı cihaz ve tarayıcılarda tutarlı sonuç verir
• Ekip içinde ortak bir uygulama standardı oluşturur
• Sayfa performansını ve kullanıcı deneyimini iyileştirir

Kontrol listesi

Dersi bitirmeden önce aşağıdaki maddeleri kendi projenizde denediğinizden emin olun:

• var()
• prefers-color-scheme
• Kullanıcı seçimi
• Titreşimsiz geçiş

Özetle

CSS Değişkenleri ile Açık ve Koyu Tema konusunda ele aldığımız 5 nokta, günlük çalışmada en sık ihtiyaç duyulan kısmı kapsıyor. Özellikle var() ve Titreşimsiz geçiş başlıklarını uygulamaya geçirmek iyi bir başlangıç olur.

İlgili içerikler:

• HTML5 & Semantik Yapı
• Core PHP (PDO) & MySQL Veritabanı Mimarisi
• Modern CSS3, Flexbox, Grid & Responsive Tasarım

Bir sonraki adım için Akademi sayfasındaki diğer derslere geçebilirsiniz.