Tema Ekleme

Bu bölümde, projenize yeni bir tema nasıl ekleyebileceğinizi öğreneceksiniz.

Tema Dosyası Oluşturma

İlk adım olarak, temanızı tanımlayan bir dosya oluşturmanız gerekiyor.

// themes klasöründe yeni bir tema dosyası oluşturun
// örnek: themes/customTheme.js
export const customTheme = {
  // Ana renkler
  colors: {
    primary: '#3366FF',
    secondary: '#FF6633',
    background: '#FFFFFF',
    text: '#333333',
  },
  // Yazı tipleri
  fonts: {
    body: 'Roboto, sans-serif',
    heading: 'Montserrat, sans-serif',
  },
  // Boşluk ölçüleri
  spacing: {
    small: '8px',
    medium: '16px',
    large: '24px',
  }
};

Tema Kayıt İşlemi

Oluşturduğunuz temayı sistemde kullanılabilir hale getirmek için kaydetmeniz gerekiyor.

// Temanızı tema yöneticisine kaydedin
// örnek: src/themeRegistry.js
import { themeRegistry } from './core/themes';
import { customTheme } from './themes/customTheme';

// Temayı sisteme kaydetme
themeRegistry.register('custom', customTheme);

Tema Kullanımı

Kaydedilen temayı uygulamanızda kullanmak için aşağıdaki adımları izleyebilirsiniz.

// Temanızı uygulamanızda kullanın
// örnek: src/App.jsx
import { ThemeProvider } from 'styled-components';
import { themeRegistry } from './core/themes';

function App() {
  // Aktif temayı almak
  const currentTheme = themeRegistry.getTheme('custom');
  
  return (
    <ThemeProvider theme={currentTheme}>
      {/* Uygulama içeriği */}
    </ThemeProvider>
  );
}

Çoklu Tema Desteği

Uygulamanızda birden fazla tema desteklemek istiyorsanız, her temayı ayrı dosyalarda tanımlayabilir ve tema yöneticisine kaydedebilirsiniz.

// Birden fazla tema tanımlama
// lightTheme.js
export const lightTheme = {
  colors: {
    primary: '#3366FF',
    background: '#FFFFFF',
    text: '#333333',
  },
  // Diğer tema özellikleri...
};

// darkTheme.js
export const darkTheme = {
  colors: {
    primary: '#6699FF',
    background: '#333333',
    text: '#FFFFFF',
  },
  // Diğer tema özellikleri...
};

Ardından her iki temayı da kaydedin:

// Temaları kaydetme
themeRegistry.register('light', lightTheme);
themeRegistry.register('dark', darkTheme);

Varsayılan Tema Belirleme

Sisteminizde varsayılan olarak kullanılacak temayı belirleyebilirsiniz:

// Varsayılan temayı belirleme
themeRegistry.setDefaultTheme('light');

// Varsayılan temayı alma
const defaultTheme = themeRegistry.getDefaultTheme();

İleri Düzey Yapılandırma

Daha karmaşık tema yapılandırmaları için tema fabrikası (theme factory) yaklaşımını kullanabilirsiniz:

// Tema fabrikası oluşturma
// themeFactory.js
export const createTheme = (options) => {
  // Varsayılan değerler
  const defaultOptions = {
    primaryColor: '#3366FF',
    isDark: false,
    borderRadius: '4px',
  };
  
  // Seçenekleri birleştirme
  const config = { ...defaultOptions, ...options };
  
  // Tema oluşturma
  return {
    colors: {
      primary: config.primaryColor,
      background: config.isDark ? '#333333' : '#FFFFFF',
      text: config.isDark ? '#FFFFFF' : '#333333',
    },
    borders: {
      radius: config.borderRadius,
    },
    // Diğer tema özellikleri...
  };
};

Bu fabrika fonksiyonunu kullanarak farklı temalar oluşturabilirsiniz:

// Fabrikayı kullanarak temalar oluşturma
const blueTheme = createTheme({ primaryColor: '#3366FF' });
const darkRedTheme = createTheme({ primaryColor: '#FF3366', isDark: true });

// Temaları kaydetme
themeRegistry.register('blue', blueTheme);
themeRegistry.register('darkRed', darkRedTheme);