Modern CSS Değişkenleri ile Dinamik Tema Motorları Tasarlamak

Geleneksel temalandırma yöntemlerinde açık ve koyu temalar için ayrı CSS dosyaları yüklenirdi. Bu, tema geçişlerinde sayfanın göz kırpmasına (flicker) veya yavaş yüklenmesine sebep olurdu. Modern web geliştirmede ise bu sorun **CSS Değişkenleri (Custom Properties)** ile çözülür.

CSS Değişkenlerinin Dinamik Yapısı

SASS/LESS değişkenlerinin aksine, CSS Custom Properties (--variable-name) tarayıcı tarafından çalışma zamanında (runtime) okunur ve güncellenebilir. Örneğin root seçiciye tema sınıfları ekleyerek tüm sitenin renk paletini tek satır JavaScript ile değiştirebilirsiniz:

document.documentElement.setAttribute('data-theme', 'dark');

Polimelo Tema Mimarisi

Polimelo'da, renkleri [ThemeContext.tsx](file:///c:/Users/ahmet/Desktop/Projects/myReactApps/polimelo/src/context/ThemeContext.tsx) ile takip ediyor ve documentElement.classList üzerinden dark sınıfını atıyoruz. CSS dosyamızda ise var(--bg), var(--fg) gibi değişkenler bu sınıfa göre otomatik güncelleniyor.