Tailwind CSS Dark Mode: Tema Yönetimi Rehberi

Dark mode (karanlık tema), modern web uygulamalarının vazgeçilmez bir özelliği haline gelmiştir. Tailwind CSS, dark: modifier'ı ile dark mode desteğini son derece kolay ve güçlü bir şekilde sunar. Bu rehberde Tailwind ile dark mode uygulamasını, sistem tercihine uyum sağlamayı, tema geçişlerini ve yaygın tasarım pattern'lerini detaylıca ele alacağız.

1. Dark Mode Yapılandırması

Tailwind CSS v4'te dark mode varsayılan olarak prefers-color-scheme media query'sini kullanır. Manuel tema değiştirme için class stratejisine geçiş yapabilirsiniz.

/* Tailwind v4 — CSS ile yapılandırma */
@import "tailwindcss";

/* Varsayılan: media stratejisi (sistem tercihine uyar) */
/* Manuel kontrol istiyorsanız: */
@variant dark (&:where(.dark, .dark *));

/* Tailwind v3 — tailwind.config.js */
/* module.exports = {
  darkMode: 'class', // veya 'media' (varsayılan)
  // ...
} */

<!-- Dark Mode Kullanımı -->
<div class="bg-white dark:bg-gray-900
            text-gray-900 dark:text-gray-100
            border border-gray-200 dark:border-gray-700
            rounded-xl p-6 shadow-md dark:shadow-gray-900/30">

  <h2 class="text-xl font-bold text-gray-900 dark:text-white">
    Dark Mode Destekli Card
  </h2>

  <p class="text-gray-600 dark:text-gray-400 mt-2">
    Bu card hem light hem dark modda güzel görünür.
  </p>

  <button class="mt-4 px-4 py-2
                 bg-blue-500 dark:bg-blue-600
                 hover:bg-blue-600 dark:hover:bg-blue-500
                 text-white rounded-lg transition-colors">
    Aksiyon
  </button>
</div>

<!-- Dark Mode Toggle Button -->
<button id="theme-toggle"
        class="p-2 rounded-lg
               bg-gray-100 dark:bg-gray-800
               hover:bg-gray-200 dark:hover:bg-gray-700
               text-gray-600 dark:text-gray-400
               transition-colors">
  <!-- Sun icon (dark modda göster) -->
  <svg class="hidden dark:block w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0z" />
  </svg>
  <!-- Moon icon (light modda göster) -->
  <svg class="block dark:hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
  </svg>
</button>

Bilgi: media stratejisi işletim sistemi tercihine otomatik uyum sağlar. class stratejisi ise kullanıcının manuel tema seçimi yapmasına olanak tanır. Çoğu projede class stratejisi tercih edilir çünkü kullanıcıya kontrol verir.

2. Tema Değiştirme JavaScript Sistemi

Class stratejisiyle çalışırken, tema tercihini localStorage'da saklamak ve sayfa yüklenirken doğru temayı uygulamak gerekir. İşte tam bir tema yönetim sistemi:

// theme-manager.js — Tema Yönetim Sistemi

class ThemeManager {
  constructor() {
    this.STORAGE_KEY = 'theme-preference';
    this.init();
  }

  init() {
    // Sayfa yüklenirken tema uygula (FOUC önleme)
    const saved = localStorage.getItem(this.STORAGE_KEY);

    if (saved === 'dark' || (!saved && this.systemPrefersDark())) {
      document.documentElement.classList.add('dark');
    }

    // Sistem tercih değişikliğini dinle
    window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', (e) => {
        if (!localStorage.getItem(this.STORAGE_KEY)) {
          this.setTheme(e.matches ? 'dark' : 'light', false);
        }
      });
  }

  systemPrefersDark() {
    return window.matchMedia('(prefers-color-scheme: dark)').matches;
  }

  getTheme() {
    return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
  }

  setTheme(theme, save = true) {
    if (theme === 'dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
    if (save) localStorage.setItem(this.STORAGE_KEY, theme);
  }

  toggle() {
    const next = this.getTheme() === 'dark' ? 'light' : 'dark';
    this.setTheme(next);
    return next;
  }

  // Sistem tercihine sıfırla
  reset() {
    localStorage.removeItem(this.STORAGE_KEY);
    this.setTheme(this.systemPrefersDark() ? 'dark' : 'light', false);
  }
}

const themeManager = new ThemeManager();

// Toggle butonu
document.getElementById('theme-toggle')?.addEventListener('click', () => {
  themeManager.toggle();
});

Uyarı: FOUC (Flash of Unstyled Content) sorununu önlemek için tema script'ini <head> içinde, CSS yüklenmeden önce çalıştırın. Böylece sayfa yüklenirken yanlış tema kısa süreliğine görünmez.

3. Dark Mode Renk Sistemi Tasarımı

Dark mode sadece renkleri tersine çevirmek değildir. İyi bir dark mode tasarımı, kontrast oranlarını, yüzey hiyerarşisini ve renk doygunluğunu dikkatlice ayarlar.

<!-- Dark Mode Renk Paleti Kullanımı -->
<div class="min-h-screen
            bg-gray-50 dark:bg-gray-950
            text-gray-900 dark:text-gray-100">

  <!-- Surface hiyerarşisi -->
  <!-- Seviye 0: Sayfa arka planı -->
  <div class="bg-gray-50 dark:bg-gray-950">

    <!-- Seviye 1: Card -->
    <div class="bg-white dark:bg-gray-900 rounded-xl border
                border-gray-200 dark:border-gray-800">

      <!-- Seviye 2: İç bölüm -->
      <div class="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4">

        <!-- Seviye 3: Vurgulanan alan -->
        <div class="bg-gray-100 dark:bg-gray-700/50 rounded p-3">
          <code class="text-sm">Kod örneği</code>
        </div>
      </div>
    </div>
  </div>

  <!-- Metin hiyerarşisi -->
  <h1 class="text-gray-900 dark:text-white">Başlık</h1>
  <h2 class="text-gray-800 dark:text-gray-100">Alt başlık</h2>
  <p class="text-gray-700 dark:text-gray-300">Ana metin</p>
  <span class="text-gray-500 dark:text-gray-400">İkincil metin</span>
  <span class="text-gray-400 dark:text-gray-500">Devre dışı metin</span>

  <!-- Renkli elemanlar — doygunluğu ayarla -->
  <span class="bg-blue-100 text-blue-700
               dark:bg-blue-900/30 dark:text-blue-400">
    Badge
  </span>
</div>

4. CSS Custom Properties ile Gelişmiş Tema Sistemi

Tailwind'in @theme direktifi ve CSS custom properties ile daha esnek ve bakımı kolay tema sistemleri oluşturabilirsiniz.

/* Tailwind v4 — @theme ile tema renkleri */
@import "tailwindcss";

@theme {
  /* Semantic renk token'ları */
  --color-surface: #ffffff;
  --color-surface-alt: #f9fafb;
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-border: #e5e7eb;
  --color-accent: #3b82f6;
  --color-accent-hover: #2563eb;
}

/* Dark theme override */
.dark {
  --color-surface: #0f172a;
  --color-surface-alt: #1e293b;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-border: #334155;
  --color-accent: #60a5fa;
  --color-accent-hover: #93bbfd;
}

<!-- Custom Property Tabanlı Kullanım -->
<div class="bg-[var(--color-surface)] text-[var(--color-text-primary)]
            border border-[var(--color-border)] rounded-xl p-6">
  <h3 class="text-lg font-bold">Tema Otomatik Değişir</h3>
  <p class="text-[var(--color-text-secondary)] mt-2">
    Dark class eklendiğinde tüm renkler otomatik güncellenir.
  </p>
  <button class="mt-4 px-4 py-2
                 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)]
                 text-white rounded-lg">
    Buton
  </button>
</div>

İpucu: Dark mode'da gölgeler (shadow) genellikle görünmez olur. Dark temada gölge yerine border veya ring kullanarak yüzey ayrımını sağlayabilirsiniz: shadow-lg dark:shadow-none dark:ring-1 dark:ring-gray-800.

Sonuç

Tailwind CSS'in dark: modifier'ı, dark mode implementasyonunu basit ve bakımı kolay hale getirir. Media stratejisi ile sistem tercihine otomatik uyum sağlayabilir, class stratejisi ile kullanıcıya manuel kontrol verebilirsiniz. İyi bir dark mode tasarımı, sadece renkleri tersine çevirmek değil, yüzey hiyerarşisi, kontrast oranları ve renk doygunluğunu dikkatlice ayarlamaktır. CSS custom properties ile tema token'ları oluşturarak bakım maliyetini düşürebilir ve tutarlılığı artırabilirsiniz.

Tailwind CSS Dark Mode: Tema Yönetimi Rehberi