Tema & Gorsel Hizmeti
Light. Dark. System. Kusursuz.
Kullanici tercihine aninda uyum saglayan tema sistemi. Design tokens, CSS custom properties ve Tailwind CSS 4 ile her modda tutarli, performansli ve goze hitap eden gorsel deneyim.
Tema sistemi neden bu kadar onemli?
Kullanicilarin %82'si karanlik mod secenegi olan uygulamalari tercih ediyor. Gece saatlerinde dark mode kullanan ziyaretcilerin sayfalarda kalma suresi %30 daha uzun. Ustelik dogru ayarlanmis bir karanlik mod, OLED ekranlarda batarya tuketimini %60'a kadar azaltiyor. Tema destegi olmayan bir site, kullanicilarinin yarisina hitap etmiyor demektir.
Tema sistemi yalnizca kullanici tercihi degildir, ayni zamanda erisilebilirlik meselesidir. Dusuk gorme kapasitesine sahip kullanicilar, parlak ekranlardan rahatsiz olan kisiler ve farkli ortam kosullarinda (gunisigi, karanlik oda) calisan insanlar icin farkli tema secenekleri sunmak kapsayici tasarimin temel gereksinimlerinden biridir.
Ancak tema sistemi dogru kurulmazsa her yeni bilesen eklediginde, her tasarim guncellediginde ve her yeni sayfa olusturdugunda tutarsizliklar ortaya cikar. Merkezi bir token sistemi olmadan 50 sayfanin renklerini tek tek degistirmek kabusa doner. Bu yuzden tema altyapisi projenin basindan itibaren dogru kurulmalidir.
Neler sunuyoruz?
Her detay dusunulmus, her adim planlanmis.
next-themes Entegrasyonu ve Mod Yonetimi
next-themes kutuphanesi ile Light, Dark ve System modlari arasinda aninda gecis. Kullanici tercihi localStorage'da kalici olarak saklaniyor. prefers-color-scheme media query ile isletim sistemi temasina otomatik uyum. SSR uyumlu yapiyla server-client tema uyumsuzlugu onleniyor.
CSS Custom Properties Mimarisi
Tum gorsel degerler — renkler, tipografi, spacing, border-radius, golge ve opasite — CSS custom properties olarak tanimlaniyor. :root ve [data-theme='dark'] selector'lari ile tema bazli deger atamalari. JavaScript'e ihtiyac duymadan CSS katmaninda tema degisimi. Her token semantic adlandirilmis: --color-background, --color-foreground, --color-muted.
Tailwind CSS 4 @theme Direktifi
Tailwind CSS 4'un yeni @theme direktifi ile tasarim tokenlari dogrudaN Tailwind konfigurasyonuna besleniyor. Build-time optimizasyon sayesinde kullanilmayan degerler bundle'dan cikariliyor. JIT modu ile runtime'da dinamik siniflar olusturuluyor. Tailwind utility siniflarinin tema tokenlariyla tam entegrasyonu saglaniyor.
Flash-of-Unstyled-Content Onleme
Sayfa yuklenirken yanlis temanin bir anligina gorunmesi (FOUC) kullanici deneyimini ciddi olcude bozar. Biz HTML head'e inline script ile tema tercihini sayfa render edilmeden once uyguluyoruz. Blocking script stratejisi ile ilk paint her zaman dogru temada gerceklesir. Kullanici hicbir zaman beyaz flash veya tema titresmesi gormez.
Renk Kontrast ve Erisilebilirlik
Her tema modunda WCAG 2.1 AA standartlarina uygun kontrast oranlari saglaniyor. Metin-arka plan kontrasti minimum 4.5:1, buyuk metin icin 3:1 orani garanti ediliyor. Otomatik kontrast kontrolu ile token degisikliklerinde erisilebilirlik ihlalleri tespit ediliyor. Renk koru kullanicilar icin ek onlemler alinıyor.
Token Adlandirma ve Semantik Sistem
Tokenlari uc katmanda organize ediyoruz: primitif (--blue-500), semantik (--color-primary) ve bilesen (--button-bg). Bu katmanli yaklasim sayesinde marka renginiz degistiginde tek bir primitif token guncellenir, semantik ve bilesen tokenlari otomatik olarak yeni degeri alir. Isimlendirme kurallari dokumante edilir ve ekip genelinde standart uygulanir.
Tema Kaliciligi ve Sistem Tercihi Algilama
Kullanici tema secimi localStorage'da saklanir ve sonraki ziyaretlerde otomatik uygulanir. System modu secildiginde prefers-color-scheme degisikliklerine real-time olarak tepki verilir — kullanici isletim sistemi temasini degistirdiginde site aninda uyum saglar. Cookie-based fallback ile cross-tab senkronizasyon destekleniyor.
Gorsel Tutarlilik ve Bilesen Uyumu
Tum UI bilesenleri — butonlar, kartlar, formlar, modallar, tablolar, grafikler — ayni token setinden besleniyor. Yeni bir bilesen eklediginde mevcut tokenlari kullanarak otomatik olarak her iki temaya uyum saglar. Storybook entegrasyonu ile her bilesen light ve dark modda gorsel olarak dogrulaniyor. Tasarimci-gelistirici arasinda token bazli iletisim standardi olusturuluyor.
Neler dahil?
Tema Altyapisi
- next-themes kurulumu ve konfigurasyonu
- Light / Dark / System mod destegi
- FOUC onleme (inline script)
- localStorage tema kaliciligi
- System preference real-time algilama
- Cross-tab tema senkronizasyonu
Token Sistemi
- CSS custom properties tanimlamalari
- Tailwind CSS 4 @theme entegrasyonu
- Primitif + Semantik + Bilesen token katmanlari
- Light ve Dark mod icin ayri deger setleri
- Figma token eslesmesi
- Token dokumantasyonu ve referans
Kalite ve Test
- WCAG 2.1 AA kontrast uyumlulugu
- Storybook tema goruntuleme
- Tum sayfalarda light/dark gorsel test
- Tarayici uyumluluk testi (Chrome, Safari, Firefox)
- Mobil tema gecis testi
- Performans benchmark raporu
Nasil calisiyoruz?
Tipik proje sureci: Ilk hafta token tasarimi, 2. hafta CSS ve Tailwind entegrasyonu, 3. hafta bilesen adaptasyonu, 4. hafta test ve teslim.
Token Tasarimi ve Renk Sistemi
Marka rehberinize dayali olarak primitif renk skalasi olusturuyoruz. Her renk icin light ve dark varyantlarini tanimliyoruz. Semantik token katmani hazirliyoruz: background, foreground, muted, accent, border, surface. WCAG kontrast kontrolu ile erisilebilirlik dogrulaniyor.
CSS Custom Properties Kurulumu
:root uzerine light mod tokenlari, [data-theme='dark'] uzerine dark mod tokenlari tanimlaniyor. Tailwind CSS 4 @theme direktifi ile Tailwind utility siniflarinda kullanilabilirlikleri saglaniyor. Tum spacing, radius, golge ve tipografi degerleri de token olarak tanimlaniyor.
next-themes Entegrasyonu
ThemeProvider wrapper kurulumu, tema gecis butonu bileseni, localStorage kalicilik, system preference algilama ve SSR uyumlu hydration ayarlari yapiliyor. HTML head'e FOUC onleme script'i ekleniyor. Tema state management'i global olarak kullanilabilir hale getiriliyor.
Bilesen Adaptasyonu
Tum mevcut UI bilesenleri hard-coded renk degerlerinden token referanslarina tasinıyor. Her bilesen light ve dark modda gorsel olarak dogrulaniyor. Ozel durumlar icin (ornegin grafikler, haritalar, ucuncu parti widget'lar) tema-duyarli wrapper'lar olusturuluyor.
Gorsel Test ve Erisilebilirlik Denetimi
Tum sayfalarin her iki temada ekran goruntuleri alinarak gorsel regresyon testi yapiliyor. WCAG 2.1 AA kontrast oranlari otomatik olarak dogrulaniyor. Storybook'ta her bilesen icin tema varyant goruntuleri olusturuluyor. Farkli ekran boyutlari ve tarayicilarda tema gecis testi yapiliyor.
Dokumantasyon ve Teslim
Token referans dokumani, tema kullanim kilavuzu, yeni bilesen ekleme rehberi ve bakim prosedurlerini iceren kapsamli bir teknik dokuman teslim ediyoruz. Ekibinize Storybook kullanimi ve token sistemi konusunda egitim veriyoruz. 30 gunluk teknik destek sureci basliyor.
Fark nerede?
Megis Tema Sistemi Yaklasimi
- Katmanli token mimarisi (primitif, semantik, bilesen)
- FOUC-free tema gecisi, ilk paint'te dogru tema
- Tailwind CSS 4 @theme ile build-time optimizasyon
- WCAG 2.1 AA kontrast garantisi
- Figma tokenlari ile bire bir esleme
- Kapsamli gorsel regresyon testi
Geleneksel Tema Uygulamalari
- Hard-coded renkler, merkezi token yok
- Sayfa yuklenirken beyaz flash sorunu
- Manuel Tailwind konfigurasyonu, optimizasyon yok
- Kontrast kontrolu yapilmiyor
- Tasarim-kod tutarsizligi
- Dark mod sonradan eklenmis, yarım kalmis
Basari hikayeleri
SaaS Dashboard — Tam Tema Sistemi Donusumu
E-Ticaret Platformu — Erisilebilir Tema ve Marka Uyumu
Sik sorulan sorular
Kullanicilariniza her modda kusursuz deneyim sunun.
Ucretsiz analiz ve danismanlik icin iletisime gecin. Projenizi birlikte buyutelim.
Tema Sistemi Kurun