Tema & Görsel Hizmeti
Light. Dark. System. Kusursuz.
Kullanıcı tercihine anında uyum sağlayan tema sistemi. Design tokens, CSS custom properties ve Tailwind CSS 4 ile her modda tutarlı, performanslı ve göze hitap eden görsel deneyim.
Tema sistemi neden bu kadar önemli?
Kullanıcıların %82'si karanlık mod seçeneği olan uygulamaları tercih ediyor. Gece saatlerinde dark mode kullanan ziyaretçilerin sayfalarda kalma süresi %30 daha uzun. Üstelik doğru ayarlanmış bir karanlık mod, OLED ekranlarda batarya tüketimini %60'a kadar azaltıyor. Tema desteği olmayan bir site, kullanıcılarının yarısına hitap etmiyor demektir.
Tema sistemi yalnızca kullanıcı tercihi değildir, aynı zamanda erişilebilirlik meselesidir. Düşük görme kapasitesine sahip kullanıcılar, parlak ekranlardan rahatsız olan kişiler ve farklı ortam koşullarında (gün ışığı, karanlık oda) çalışan insanlar için farklı tema seçenekleri sunmak kapsayıcı tasarımın temel gereksinimlerinden biridir.
Ancak tema sistemi doğru kurulmazsa her yeni bileşen eklediğinde, her tasarım güncellediğinde ve her yeni sayfa oluşturduğunda tutarsızlıklar ortaya çıkar. Merkezi bir token sistemi olmadan 50 sayfanın renklerini tek tek değiştirmek kabusa döner. Bu yüzden tema altyapısı projenin başından itibaren doğru kurulmalıdır.
Neler sunuyoruz?
Her detay düşünülmüş, her adım planlanmış.
next-themes Entegrasyonu ve Mod Yönetimi
next-themes kütüphanesi ile Light, Dark ve System modları arasında anında geçiş. Kullanıcı tercihi localStorage'da kalıcı olarak saklanıyor. prefers-color-scheme media query ile işletim sistemi temasına otomatik uyum. SSR uyumlu yapıyla server-client tema uyumsuzluğu önleniyor.
CSS Custom Properties Mimarisi
Tüm görsel değerler (renkler, tipografi, spacing, border-radius, gölge ve opasite) CSS custom properties olarak tanımlanıyor. :root ve [data-theme='dark'] selector'ları ile tema bazlı değer atamaları. JavaScript'e ihtiyaç duymadan CSS katmanında tema değişimi. Her token semantic adlandırılmış: --color-background, --color-foreground, --color-muted.
Tailwind CSS 4 @theme Direktifi
Tailwind CSS 4'ün yeni @theme direktifi ile tasarım tokenları doğrudan Tailwind konfigürasyonuna besleniyor. Build-time optimizasyon sayesinde kullanılmayan değerler bundle'dan çıkarılıyor. JIT modu ile runtime'da dinamik sınıflar oluşturuluyor. Tailwind utility sınıflarının tema tokenlarıyla tam entegrasyonu sağlanıyor.
Flash-of-Unstyled-Content Önleme
Sayfa yüklenirken yanlış temanın bir anlığına görünmesi (FOUC) kullanıcı deneyimini ciddi ölçüde bozar. Biz HTML head'e inline script ile tema tercihini sayfa render edilmeden önce uyguluyoruz. Blocking script stratejisi ile ilk paint her zaman doğru temada gerçekleşir. Kullanıcı hiçbir zaman beyaz flash veya tema titreşmesi görmez.
Renk Kontrast ve Erişilebilirlik
Her tema modunda WCAG 2.1 AA standartlarına uygun kontrast oranları sağlanıyor. Metin-arka plan kontrastı minimum 4.5:1, büyük metin için 3:1 oranı garanti ediliyor. Otomatik kontrast kontrolü ile token değişikliklerinde erişilebilirlik ihlalleri tespit ediliyor. Renk körü kullanıcılar için ek önlemler alınıyor.
Token Adlandırma ve Semantik Sistem
Tokenları üç katmanda organize ediyoruz: primitif (--blue-500), semantik (--color-primary) ve bileşen (--button-bg). Bu katmanlı yaklaşım sayesinde marka renginiz değiştiğinde tek bir primitif token güncellenir, semantik ve bileşen tokenları otomatik olarak yeni değeri alır. İsimlendirme kuralları dokümante edilir ve ekip genelinde standart uygulanır.
Tema Kalıcılığı ve Sistem Tercihi Algılama
Kullanıcı tema seçimi localStorage'da saklanır ve sonraki ziyaretlerde otomatik uygulanır. System modu seçildiğinde prefers-color-scheme değişikliklerine real-time olarak tepki verilir: kullanıcı işletim sistemi temasını değiştirdiğinde site anında uyum sağlar. Cookie-based fallback ile cross-tab senkronizasyon destekleniyor.
Görsel Tutarlılık ve Bileşen Uyumu
Tüm UI bileşenleri (butonlar, kartlar, formlar, modallar, tablolar, grafikler) aynı token setinden besleniyor. Yeni bir bileşen eklediğinde mevcut tokenları kullanarak otomatik olarak her iki temaya uyum sağlar. Storybook entegrasyonu ile her bileşen light ve dark modda görsel olarak doğrulanıyor. Tasarımcı-geliştirici arasında token bazlı iletişim standardı oluşturuluyor.
Neler dahil?
Tema Altyapısı
- next-themes kurulumu ve konfigürasyonu
- Light / Dark / System mod desteği
- FOUC önleme (inline script)
- localStorage tema kalıcılığı
- System preference real-time algılama
- Cross-tab tema senkronizasyonu
Token Sistemi
- CSS custom properties tanımlamaları
- Tailwind CSS 4 @theme entegrasyonu
- Primitif + Semantik + Bileşen token katmanları
- Light ve Dark mod için ayrı değer setleri
- Figma token eşlemesi
- Token dokümantasyonu ve referans
Kalite ve Test
- WCAG 2.1 AA kontrast uyumluluğu
- Storybook tema görüntüleme
- Tüm sayfalarda light/dark görsel test
- Tarayıcı uyumluluk testi (Chrome, Safari, Firefox)
- Mobil tema geçiş testi
- Performans benchmark raporu
Nasıl çalışıyoruz?
Tipik proje süreci: İlk hafta token tasarımı, 2. hafta CSS ve Tailwind entegrasyonu, 3. hafta bileşen adaptasyonu, 4. hafta test ve teslim.
Token Tasarımı ve Renk Sistemi
Marka rehberinize dayalı olarak primitif renk skalası oluşturuyoruz. Her renk için light ve dark varyantlarını tanımlıyoruz. Semantik token katmanı hazırlıyoruz: background, foreground, muted, accent, border, surface. WCAG kontrast kontrolü ile erişilebilirlik doğrulanıyor.
CSS Custom Properties Kurulumu
:root üzerine light mod tokenları, [data-theme='dark'] üzerine dark mod tokenları tanımlanıyor. Tailwind CSS 4 @theme direktifi ile Tailwind utility sınıflarında kullanılabilirlikleri sağlanıyor. Tüm spacing, radius, gölge ve tipografi değerleri de token olarak tanımlanıyor.
next-themes Entegrasyonu
ThemeProvider wrapper kurulumu, tema geçiş butonu bileşeni, localStorage kalıcılık, system preference algılama ve SSR uyumlu hydration ayarları yapılıyor. HTML head'e FOUC önleme script'i ekleniyor. Tema state management'i global olarak kullanılabilir hale getiriliyor.
Bileşen Adaptasyonu
Tüm mevcut UI bileşenleri hard-coded renk değerlerinden token referanslarına taşınıyor. Her bileşen light ve dark modda görsel olarak doğrulanıyor. Özel durumlar için (örneğin grafikler, haritalar, üçüncü parti widget'lar) tema-duyarlı wrapper'lar oluşturuluyor.
Görsel Test ve Erişilebilirlik Denetimi
Tüm sayfaların her iki temada ekran görüntüleri alınarak görsel regresyon testi yapılıyor. WCAG 2.1 AA kontrast oranları otomatik olarak doğrulanıyor. Storybook'ta her bileşen için tema varyant görüntüleri oluşturuluyor. Farklı ekran boyutları ve tarayıcılarda tema geçiş testi yapılıyor.
Dokümantasyon ve Teslim
Token referans dokümanı, tema kullanım kılavuzu, yeni bileşen ekleme rehberi ve bakım prosedürlerini içeren kapsamlı bir teknik doküman teslim ediyoruz. Ekibinize Storybook kullanımı ve token sistemi konusunda eğitim veriyoruz. 30 günlük teknik destek süreci başlıyor.
Fark nerede?
Megis Tema Sistemi Yaklaşımı
- Katmanlı token mimarisi (primitif, semantik, bileşen)
- FOUC-free tema geçişi, ilk paint'te doğru tema
- Tailwind CSS 4 @theme ile build-time optimizasyon
- WCAG 2.1 AA kontrast garantisi
- Figma tokenları ile bire bir eşleme
- Kapsamlı görsel regresyon testi
Geleneksel Tema Uygulamaları
- Hard-coded renkler, merkezi token yok
- Sayfa yüklenirken beyaz flash sorunu
- Manuel Tailwind konfigürasyonu, optimizasyon yok
- Kontrast kontrolü yapılmıyor
- Tasarım-kod tutarsızlığı
- Dark mod sonradan eklenmiş, yarım kalmış
Başarı hikayeleri
SaaS Dashboard: Tam Tema Sistemi Dönüşümü
E-Ticaret Platformu: Erişilebilir Tema ve Marka Uyumu
Sık sorulan sorular
Kullanıcılarınıza her modda kusursuz deneyim sunun.
Ücretsiz analiz ve danışmanlık için iletişime geçin. Projenizi birlikte büyütelim.
Tema Sistemi Kurun