React Projelerinde Tema ve Renk Yönetimi

React projelerinde tutarlı tema ve renk yönetimi, kullanıcı deneyimi ve bakım kolaylığı açısından kritiktir. Bu rehberde CSS variables yaklaşımı, Context API ile tema state'i, styled-components ThemeProvider, Tailwind ile React entegrasyonu, dark mode toggle ve en iyi uygulamaları ele alıyoruz.

CSS Variables Yaklaşımı

En hafif ve performanslı yöntem, tema renklerini CSS custom properties olarak tanımlamak ve React'tan sadece document.documentElement üzerinde bu değişkenleri güncellemektir. Ek kütüphane gerektirmez ve stil değişiklikleri anında uygulanır.

:root {
  --color-bg: #ffffff;
  --color-text: #111827;
  --color-primary: #6366f1;
}

[data-theme="dark"] {
  --color-bg: #111827;
  --color-text: #f9fafb;
  --color-primary: #818cf8;
}

function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
}

CSS variables ile tema rehberimizde detaylı yapıyı inceleyebilirsiniz.

Context API ile Tema State'i

React Context kullanarak tema tercihini uygulama genelinde paylaşabilirsiniz. Tema değiştiğinde hem CSS değişkenlerini günceller hem de localStorage'a kaydedebilirsiniz.

const ThemeContext = createContext();

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

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }, [theme]);

  const toggleTheme = () =>
    setTheme(t => t === 'light' ? 'dark' : 'light');

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

Bileşenler useContext(ThemeContext) ile tema ve toggleTheme'e erişir. Bu yapı, CSS değişkenleri best practices ile uyumludur.

styled-components ThemeProvider

styled-components veya Emotion kullanıyorsanız, ThemeProvider ile tema objesini sağlayabilirsiniz. Bileşenler props.theme veya useTheme() ile erişir.

import { ThemeProvider } from 'styled-components';

const lightTheme = {
  colors: {
    primary: '#6366f1',
    background: '#ffffff',
    text: '#111827',
  },
};

const darkTheme = {
  colors: {
    primary: '#818cf8',
    background: '#111827',
    text: '#f9fafb',
  },
};

<ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
  <App />
</ThemeProvider>

CSS-in-JS ile renk yönetimi rehberimizde theme tokens ve dinamik renkler konusunu detaylandırıyoruz.

Tailwind ile React

Tailwind CSS kullanan projelerde tema, tailwind.config.js içindeki theme.extend.colors ile yönetilir. Dark mode için dark: öneki veya class stratejisi kullanılır.

module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          500: '#6366f1',
          600: '#4f46e5',
        },
      },
    },
  },
};

React'ta document.documentElement.classList.add('dark') veya remove('dark') ile dark mode tetiklenir. Tailwind renk sistemi rehberimizde palet yapısını inceleyebilirsiniz.

Dark Mode Toggle

Kullanıcı tercihini hem sistem tercihine (prefers-color-scheme) hem de manuel seçime göre uygulayabilirsiniz.

useEffect(() => {
  const stored = localStorage.getItem('theme');
  const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const initial = stored || (systemDark ? 'dark' : 'light');
  setTheme(initial);
  document.documentElement.setAttribute('data-theme', initial);
}, []);

Toggle butonu ile kullanıcı manuel değiştirebilir; tercih localStorage'a kaydedilir ve sonraki ziyaretlerde kullanılır.

Renk Paleti Tutarlılığı

Tema objenizde primary, secondary, accent, background, text gibi semantik anahtarlar kullanın. Doğrudan HEX değerler yerine token'lar tercih edin; böylece tema değiştiğinde tüm bileşenler otomatik güncellenir. Palet Oluşturucu ile oluşturduğunuz renkleri bu yapıya aktarabilirsiniz.

Performans ve SSR

CSS variables yaklaşımı, ilk render'da doğru tema ile başlamak için SSR'da data-theme attribute'unu HTML'e eklemenizi gerektirir. Aksi halde flash (yanıp sönme) olabilir. Next.js gibi frameworks'ta getInitialProps veya cookie ile tema tercihini sunucuya iletebilirsiniz.

Özet

React projelerinde tema yönetimi için CSS variables + Context API hafif ve etkili bir çözüm sunar. styled-components veya Emotion kullanıyorsanız ThemeProvider; Tailwind kullanıyorsanız class tabanlı dark mode tercih edin. Dark mode toggle ile kullanıcı deneyimini geliştirin ve renk paletinizi Gradient Oluşturucu ile hazırlayın.