React İle Web Uygulamaları İçin Dinamik Bir Gece Modu Geçişi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi başarıyla tamamlamak için bilgisayarınızda Node.js'in güncel bir sürümünün (LTS) kurulu olması gerekir. Proje yapısı olarak Vite kullanmanızı öneririm, çünkü hızlı derleme ve modern yapılandırma sunar.

• Node.js (v20 veya üzeri)
• React (v19 veya üzeri)
• Temel düzeyde JavaScript (ES6+) bilgisi
• CSS değişkenleri (CSS Custom Properties) hakkında temel bilgi

Öncelikle bir React projesi oluşturmak için terminalinize şu komutu yazarak başlayabilirsiniz:

npm create vite@latest gece-modu-projesi -- --template react
cd gece-modu-projesi
npm install

Bu komutlar, projenizin temel dizinini oluşturacak ve gerekli bağımlılıkları yükleyecektir. Kurulum tamamlandıktan sonra kod editörünüzü açarak geliştirmeye başlayabiliriz.

CSS Değişkenleri ile Tema Yapılandırması

Dinamik bir tema sistemi kurmanın en verimli yolu, renkleri doğrudan CSS dosyalarına yazmak yerine CSS değişkenleri kullanmaktır. Bu sayede, "dark" sınıfı eklendiğinde tüm renkleri tek seferde güncelleyebilirsiniz.

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

body.dark {
  --bg-color: #121212;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

Yukarıdaki CSS kodu, uygulamanın kök dizininde (genellikle index.css) tanımlanmalıdır. transition özelliği, modlar arası geçişin yumuşak ve göz yormayan bir animasyonla gerçekleşmesini sağlar.

Context API ile Tema Durum Yönetimi

React uygulamalarında tema durumunu (karanlık mı aydınlık mı) her bileşene prop olarak geçirmek yerine, Context API kullanarak merkezi bir yönetim sistemi kurmalıyız. Bu, kodun temiz kalmasını ve yönetilebilirliğini sağlar.

import { createContext, useState, useEffect } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');

  useEffect(() => {
    document.body.className = theme;
    localStorage.setItem('theme', theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    
      {children}
    
  );
};

Burada ThemeProvider bileşeni, uygulamanın durumunu sarmalar. useEffect kancası (hook), tema her değiştiğinde tarayıcının localStorage alanına bu tercihi kaydeder ve HTML body etiketine ilgili sınıfı ekler.

Geçiş Butonu Bileşeninin Oluşturulması

Kullanıcının temayı değiştirebileceği bir arayüz bileşeni oluşturmamız gerekir. Bu bileşen, useContext kancasını kullanarak global durumdan toggleTheme fonksiyonunu çağıracaktır.

import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const ThemeToggle = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    
      {theme === 'light' ? 'Gece Moduna Geç' : 'Gündüz Moduna Geç'}
    
  );
};

export default ThemeToggle;

Bu bileşen, mevcut temanın durumuna göre buton metnini dinamik olarak günceller. Kullanıcı butona tıkladığında, Context içerisindeki toggleTheme fonksiyonu tetiklenir ve uygulama genelinde renkler değişir.

Uygulama Entegrasyonu ve Test Etme

Hazırladığımız ThemeProvider bileşenini ana giriş dosyamız olan main.jsx veya App.jsx içerisinde sarmalamamız gerekir. Bu, Context'in tüm uygulama ağacında erişilebilir olmasını sağlar.

import { ThemeProvider } from './ThemeContext';
import ThemeToggle from './ThemeToggle';

function App() {
  return (
    
      

        


React Gece Modu Uygulaması
        
      
    
  );
}

Uygulamayı test etmek için tarayıcınızda geliştirici araçlarını (F12) açın. Uygulama içerisinde butona bastığınızda, body etiketinin class değerinin değiştiğini ve localStorage üzerinde 'theme' anahtarının güncellendiğini gözlemlemelisiniz.

Yöntemlerin Karşılaştırılması

Güvenlik Uyarısı: localStorage kullanımı, hassas kullanıcı verilerini saklamak için uygun değildir. Tema tercihi gibi genel ayarlar için güvenlidir ancak kullanıcı oturum bilgileri veya kişisel veriler için mutlaka HttpOnly çerezler veya güvenli backend oturum yönetimi kullanmalısınız.

Sıkça Sorulan Sorular

Gece modu neden sayfa yenilenince sıfırlanıyor?

Bu durum, temanın durumunu localStorage'a kaydetmediğinizden veya uygulama ilk yüklenirken localStorage'ı kontrol etmediğinizden kaynaklanır. Yukarıdaki useState içerisinde localStorage.getItem kontrolünü yaptığınızdan emin olun.

Sistem temasını (OS) otomatik algılayabilir miyim?

Evet, window.matchMedia('(prefers-color-scheme: dark)') sorgusunu kullanarak kullanıcının işletim sistemi tercihini başlangıç değeri olarak atayabilirsiniz.

Performans üzerinde olumsuz etkisi olur mu?

CSS değişkenleri ile yapılan geçişler, tarayıcı tarafından doğrudan GPU üzerinde optimize edilir. Bu yüzden performans kaybı yaşanmaz.

Birden fazla tema (örneğin mavi, kırmızı) ekleyebilir miyim?

Evet, CSS değişkenlerini genişleterek ve body sınıfını değiştirerek istediğiniz kadar tema varyasyonu ekleyebilirsiniz.

Next.js gibi framework'lerde bu yöntem çalışır mı?

Next.js gibi sunucu taraflı işleme (SSR) yapan yapılarda, "hydration" hatalarını önlemek için temanın ilk yüklenişini dikkatli yönetmeniz gerekir; genellikle next-themes kütüphanesi bu süreçleri kolaylaştırır.

İleri Seviye Tema Yönetimi: Tailwind CSS ile Entegrasyon

Modern React projelerinde CSS değişkenlerini doğrudan yönetmek yerine Tailwind CSS kullanıyorsanız, tema geçişlerini çok daha hızlı ve yapılandırılmış bir şekilde gerçekleştirebilirsiniz. Tailwind, dark modunu yerleşik olarak destekler ve bunu HTML class stratejisi ile yönetir.

Tailwind ile dinamik tema geçişi için tailwind.config.js dosyanızda darkMode: 'class' ayarını aktif etmeniz gerekir. Ardından, Context API üzerinden yönettiğiniz tema durumunu, kök elemente (genellikle body veya html) bir sınıf olarak eklemelisiniz.

// Tema geçişini tetikleyen fonksiyon örneği
const toggleTheme = () => {
  const newTheme = theme === 'light' ? 'dark' : 'light';
  setTheme(newTheme);
  
  if (newTheme === 'dark') {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
  localStorage.setItem('theme', newTheme);
};

Bu yaklaşım, bileşenlerinizin içinde dark:bg-slate-900 veya dark:text-white gibi yardımcı sınıfları kullanmanıza olanak tanır. Bu sayede CSS dosyaları arasında geçiş yapmadan doğrudan JSX içerisinde stil yönetimi yapabilirsiniz.

Tema Geçişlerinde Hata Ayıklama ve Performans Optimizasyonu

Dinamik tema geçişleri sırasında yaşanan en büyük sorunlardan biri "Flash of Unstyled Content" (FOUC) yani sayfa yüklenirken kısa süreliğine beyaz ekranın görünmesidir. Bunu engellemek için tema tercihini uygulama render edilmeden önce kontrol etmelisiniz.

Performans İçin İpuçları:

• Blocking Script Kullanımı: Uygulamanızın index.html dosyasındaki etiketi içerisine, React yüklenmeden önce çalışan küçük bir JavaScript bloğu ekleyerek localStorage'ı kontrol edin.
• CSS Değişkenleri: Renkleri doğrudan kodlamak yerine CSS değişkenleri (var(--bg-color)) kullanın. Bu, tarayıcının yeniden boyama (repaint) maliyetini düşürür.
• Memoization: Tema durumu değiştiğinde tüm uygulamanın yeniden render olmasını engellemek için useMemo ve useCallback kancalarını stratejik noktalarda kullanın.

// FOUC önlemek için head içerisine eklenecek blocking script
(function() {
  const savedTheme = localStorage.getItem('theme');
  const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  
  if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
})();

Bu kod bloğu, React'in sanal DOM'u oluşturulmadan önce tarayıcı tarafından çalıştırılır. Böylece kullanıcı, uygulama tamamen yüklenmeden önce doğru tema ile karşılaşır ve görsel bir sıçrama yaşanmaz.

Test Süreçleri

Tema geçişlerini test ederken sadece butonun çalışıp çalışmadığına değil, şu senaryolara da odaklanmalısınız:

1. Erişilebilirlik (A11y): Kontrast oranlarının her iki modda da WCAG standartlarına uygun olup olmadığını kontrol edin.
2. LocalStorage Erişimi: Kullanıcının tarayıcı ayarlarından çerezleri/yerel depolamayı engellediği durumlar için bir hata yönetimi (try-catch) ekleyin.
3. Sistem Değişikliği: Kullanıcı işletim sistemi üzerinden tema değiştirdiğinde uygulamanızın buna gerçek zamanlı tepki verip vermediğini window.matchMedia olay dinleyicisi ile test edin.

Sonuç

React ile dinamik bir gece modu geçişi yapmak, hem kullanıcı deneyimini zenginleştirir hem de modern web standartlarına uyum sağlamanıza yardımcı olur. Context API, CSS değişkenleri ve localStorage kombinasyonu, 2026 yılı projeleri için en sürdürülebilir ve performanslı yaklaşımdır. Bir sonraki adım olarak, bu sisteme "otomatik zamanlanmış mod" veya "sistem tercihi ile senkronizasyon" özelliklerini ekleyerek uygulamanızı daha da geliştirebilirsiniz.

Yasal Sorumluluk Reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Ticari projelerinizde güvenlik açıklarını (XSS, CSRF vb.) önlemek için projenizi düzenli olarak güvenlik taramalarından geçirin ve güncel kütüphane sürümlerini kullanın.