CSS Değişkenleri ile Tema Oluşturma

CSS Custom Properties (özelleştirilmiş özellikler), -- ile başlayan değişkenler tanımlamanıza olanak tanır. Bu değişkenler tema oluşturma, dinamik renk değişimi ve kod tekrarını azaltma için mükemmeldir. Tüm modern tarayıcılar destekler.

:root içinde global değişkenler tanımlanır. Alt öğeler var(--degisken-adi) ile bu değerlere erişir. Tema değişiminde sadece değişken değerleri güncellenir; tüm sayfa anında güncellenir.

Temel Sözdizimi

Değişken tanımı --ad: deger; formatındadır. Kullanımı color: var(--primary);. Fallback değer: var(--primary, #0077b6)—değişken yoksa ikinci değer kullanılır.

Temel Tema Tanımı 
:root {
  --primary: #0077b6;
  --secondary: #00b4d8;
  --bg: #ffffff;
  --text: #1a1a1a;
}

body {
  background: var(--bg);
  color: var(--text);
}

.button {
  background: var(--primary);
}

Karanlık Tema Stratejisi

.dark veya [data-theme="dark"] ile html/body'ye eklenen class veya attribute ile değişkenler override edilir. prefers-color-scheme: dark ile sistem tercihi de kullanılabilir.

Dark Mode Override 
[data-theme="dark"] {
  --bg: #1a1a2e;
  --text: #e2e8f0;
  --primary: #60a5fa;
}

/* veya class ile */
.dark {
  --bg: #0f172a;
  --text: #f8fafc;
}

Gradient ile Tema

Değişkenler gradient içinde de kullanılabilir: background: linear-gradient(135deg, var(--from), var(--to)); Tema değişince gradient renkleri de güncellenir.

JavaScript ile Tema Değiştirme

document.documentElement.setAttribute('data-theme', 'dark') veya document.body.classList.toggle('dark') ile kullanıcı tercihi uygulanır. Tercih localStorage'da saklanarak kalıcı yapılır.

Pratik Öneriler

  • Semantik isimler kullanın: --color-primary, --color-text-muted.
  • HSL ile tema değişiminde sadece lightness güncelleyerek tutarlı palet koruyun.
  • Çok sayfa projede tek CSS dosyasında tüm tema değişkenlerini toplayın.

İlgili rehberler: Tailwind Renk Sistemi · HEX/RGB/HSL · Araç · Marka Renkleri