Next.js projelerinde kullanıcıların tercihlerine göre karanlık mod (dark mode) özelliği eklemek, modern web siteleri için oldukça önemlidir. Bu yazıda, Next.js üzerinde basit bir dark mode nasıl entegre edilir, adım adım göreceğiz.

1. Temalar İçin CSS Değişkenleri Oluşturma

İlk olarak, globals.css dosyamızda iki tema için renk değişkenleri oluşturalım:

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

[data-theme='dark'] {
  --background-color: #121212;
  --text-color: #e0e0e0;
}

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

2. Tema Durumunu Yönetmek İçin useState Kullanımı

_app.js veya özel bir tema sağlayıcı bileşeninde dark mode durumunu yöneteceğiz:

import { useState, useEffect } from 'react';

export default function MyApp({ Component, pageProps }) {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    // Kullanıcının önceden seçtiği temayı localStorage'dan al
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
      document.documentElement.setAttribute('data-theme', savedTheme);
    }
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
  };

  return (
    <>
      
        {theme === 'light' ? 'Karanlık Mod' : 'Açık Mod'}
      
      
    
  );
}

3. Butonla Tema Değişikliği

Yukarıdaki örnekte sabit pozisyonda bir buton ekledik. Bu buton sayesinde tema kolayca değiştirilebilir. Buton üzerinde mevcut tema durumuna göre yazı değişir.

4. Özet ve Dikkat Edilmesi Gerekenler

• CSS değişkenleri ile tema renklerini değiştirmek performans açısından avantaj sağlar.
• Temayı document.documentElement üzerinden data-theme attribute ile ayarlamak, stil seçimini kolaylaştırır.
• LocalStorage kullanarak kullanıcı tercihleri sayfa yenilendiğinde de korunur.

Bu yöntemle Next.js projelerinize basit ve etkili bir karanlık mod desteği ekleyebilirsiniz. İhtiyaçlarınıza göre tema renklerini ve geçiş animasyonlarını daha da geliştirebilirsiniz.