Tema Geçişleri

Bu bölümde, uygulamanızda nasıl farklı temalar arasında geçiş yapabileceğinizi öğreneceksiniz.

Tema Değiştirme Mekanizması

Kullanıcılara farklı temalar arasında geçiş yapma imkanı sunmak, kullanıcı deneyimini zenginleştirir.

// Tema geçişi yapan bir bileşen örneği
// örnek: src/components/ThemeSwitcher.jsx
import React from 'react';
import { useTheme } from 'styled-components';
import { themeRegistry } from '../core/themes';

function ThemeSwitcher({ onThemeChange }) {
  // Mevcut temayı al
  const currentTheme = useTheme();
  // Tüm kayıtlı temaları al
  const availableThemes = themeRegistry.getAllThemes();
  
  // Tema değiştirme fonksiyonu
  const handleThemeChange = (themeName) => {
    onThemeChange(themeRegistry.getTheme(themeName));
  };
  
  return (
    <div>
      <h3>Tema Seçimi</h3>
      <select onChange={(e) => handleThemeChange(e.target.value)}>
        {Object.keys(availableThemes).map(themeName => (
          <option key={themeName} value={themeName}>
            {themeName.charAt(0).toUpperCase() + themeName.slice(1)} Tema
          </option>
        ))}
      </select>
    </div>
  );
}

export default ThemeSwitcher;

Tema Tercihi Saklama

Kullanıcının tema tercihini localStorage veya bir veritabanında saklamanız faydalı olacaktır.

// Tema tercihini localStorage'da saklama
// örnek: src/hooks/useThemePreference.js
import { useState, useEffect } from 'react';
import { themeRegistry } from '../core/themes';

const THEME_STORAGE_KEY = 'app_theme_preference';

export function useThemePreference() {
  // Başlangıçta localStorage'dan veya varsayılan temayı al
  const getInitialTheme = () => {
    const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
    if (storedTheme && themeRegistry.hasTheme(storedTheme)) {
      return themeRegistry.getTheme(storedTheme);
    }
    return themeRegistry.getDefaultTheme();
  };

  // Theme state'i oluştur
  const [theme, setTheme] = useState(getInitialTheme);

  // Tema değişikliğinde localStorage'a kaydet
  const changeTheme = (newTheme) => {
    setTheme(newTheme);
    
    // Tema adını bul ve sakla
    const themeName = Object.keys(themeRegistry.getAllThemes()).find(
      name => themeRegistry.getTheme(name) === newTheme
    );
    
    if (themeName) {
      localStorage.setItem(THEME_STORAGE_KEY, themeName);
    }
  };

  // İlk yüklemede tema tercihini kontrol et
  useEffect(() => {
    const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
    if (storedTheme && themeRegistry.hasTheme(storedTheme)) {
      setTheme(themeRegistry.getTheme(storedTheme));
    }
  }, []);

  return { theme, changeTheme };
}

Tema Geçişlerinde Animasyon

Temalar arası geçişlerde animasyon ekleyerek daha iyi bir kullanıcı deneyimi sağlayabilirsiniz.

/* Tema geçişleri için CSS animasyonları */
/* örnek: src/styles/transitions.css */

/* Tüm tema değişkenlerine geçiş efekti ekle */
* {
  transition: background-color 0.3s ease, 
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Özel geçiş efektleri eklemek için */
.theme-transition {
  animation: theme-fade 0.5s ease;
}

@keyframes theme-fade {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

Otomatik Tema Değişimi

Sistem temasına veya gün/gece durumuna göre otomatik tema değişimi de sağlayabilirsiniz.

// Sistem temasını izleyen hook
// örnek: src/hooks/useSystemTheme.js
import { useState, useEffect } from 'react';
import { themeRegistry } from '../core/themes';

export function useSystemTheme() {
  // Başlangıç değeri olarak sistem tercihini al
  const getSystemThemePreference = () => {
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
    return isDarkMode ? 'dark' : 'light';
  };

  const [systemTheme, setSystemTheme] = useState(getSystemThemePreference);

  useEffect(() => {
    // Sistem teması değişikliğini izle
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    
    // Değişiklik dinleyicisi
    const handleChange = (e) => {
      setSystemTheme(e.matches ? 'dark' : 'light');
    };
    
    // Dinleyiciyi ekle
    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener('change', handleChange);
    } else {
      // Eski tarayıcılar için destek
      mediaQuery.addListener(handleChange);
    }
    
    // Temizleme
    return () => {
      if (mediaQuery.removeEventListener) {
        mediaQuery.removeEventListener('change', handleChange);
      } else {
        mediaQuery.removeListener(handleChange);
      }
    };
  }, []);

  // Sistem temasına göre uygun temayı döndür
  return themeRegistry.getTheme(systemTheme) || themeRegistry.getDefaultTheme();
}

Tema Geçişi Uygulaması

Tüm bu özellikleri bir araya getirerek tema geçişlerini uygulamak için:

// Tema geçişlerini yönetme uygulaması
// örnek: src/App.jsx
import React, { useState } from 'react';
import { ThemeProvider } from 'styled-components';
import { useThemePreference } from './hooks/useThemePreference';
import { useSystemTheme } from './hooks/useSystemTheme';
import ThemeSwitcher from './components/ThemeSwitcher';
import './styles/transitions.css';

function App() {
  // Tema tercihi hook'u
  const { theme, changeTheme } = useThemePreference();
  
  // Sistem teması hook'u
  const systemTheme = useSystemTheme();
  
  // Otomatik tema kullanımı kontrolü
  const [useSystemThemeFlag, setUseSystemThemeFlag] = useState(false);
  
  // Kullanılacak aktif tema
  const activeTheme = useSystemThemeFlag ? systemTheme : theme;
  
  // Otomatik/manuel tema geçişi toggle
  const toggleSystemTheme = () => {
    setUseSystemThemeFlag(!useSystemThemeFlag);
  };
  
  return (
    <ThemeProvider theme={activeTheme}>
      <div className="app">
        <header>
          <h1>Uygulama Başlığı</h1>
          <div className="theme-controls">
            <ThemeSwitcher onThemeChange={changeTheme} />
            <label>
              <input 
                type="checkbox" 
                checked={useSystemThemeFlag}
                onChange={toggleSystemTheme}
              />
              Sistem temasını kullan
            </label>
          </div>
        </header>
        <main className="theme-transition">
          {/* Uygulama içeriği */}
        </main>
      </div>
    </ThemeProvider>
  );
}

export default App;

Tema Geçişlerinde Dikkat Edilmesi Gerekenler

1. Performans: Tema geçişlerinde tüm uygulamayı yeniden render etmekten kaçının.
2. Erişilebilirlik: Tema geçişlerinde kontrastın yeterli kaldığından emin olun.
3. Tutarlılık: Tüm bileşenlerin farklı temalarda tutarlı görünmesini sağlayın.
4. Kullanıcı Tercihi: Her zaman kullanıcının tema seçimini öncelikli tutun ve bu tercihi saklayın.
5. Animasyon: Animasyonları aşırıya kaçmadan, performansı etkilemeyecek şekilde kullanın.