Dark Mode Uygulama Rehberi: CSS, JavaScript ve Sistem Tercihi

Dark Mode Nedir ve Neden Önemlidir?

Dark mode (karanlık tema), arka planı koyu, metni açık renkli olarak gösteren bir arayüz modudur. Düşük ışık ortamlarında göz yorgunluğunu azaltır.

OLED ekranlarda dark mode, koyu piksellerin kapalı olması nedeniyle pil ömrünü %30-60 oranında uzatabilir. Bu, mobil cihazlar için önemli bir avantajdır.

Kullanıcı tercihi: Sistem düzeyinde dark mode desteği (macOS, Windows, iOS, Android) ile kullanıcılar tüm uygulamalarda tutarlı bir deneyim bekler.

Erişilebilirlik: Bazı kullanıcılar (fotofobi, migren) koyu temaları tercih eder. Dark mode, bu kullanıcılar için erişilebilirlik avantajı sağlar.

CSS Değişkenleri ile Tema Yönetimi

CSS custom properties (değişkenler), tema renklerini merkezi olarak yönetmenizi sağlar. :root seçicisinde varsayılan (light) tema, [data-theme="dark"] seçicisinde dark tema tanımlanır.

Örnek: :root { --bg: #ffffff; --text: #1a1a1a; } [data-theme="dark"] { --bg: #1a1a1a; --text: #e0e0e0; }. Tüm stiller bu değişkenleri kullanır.

Renk geçişleri: body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; } ile yumuşak tema geçişi sağlanır.

Kontrast kontrolü: Dark mode'da da WCAG kontrast oranlarına uyun. Koyu arka plan üzerinde açık metin için 4.5:1 kontrast oranı gerekir.

Gölgeler ve kenarlıklar: Dark mode'da gölgeler (box-shadow) daha az görünür. Kenarlık (border) kullanarak element sınırlarını belirginleştirin.

JavaScript ile Tema Değiştirme

Tema değiştirme butonu: Kullanıcı butona tıkladığında document.documentElement.setAttribute('data-theme', 'dark') ile tema değiştirilir.

Tercihi kaydetme: localStorage.setItem('theme', 'dark') ile kullanıcının seçimi kaydedilir. Sayfa yüklendiğinde localStorage.getItem('theme') ile okunur.

FOUC önleme: Flash of Unstyled Content (FOUC) önlemek için, tema ayarını <head> içinde inline script ile uygulayın. Bu, sayfa render edilmeden önce temayı belirler.

Toggle fonksiyonu: function toggleTheme() { const current = document.documentElement.getAttribute('data-theme'); const next = current === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', next); localStorage.setItem('theme', next); }

Sistem Tercihini Algılama

prefers-color-scheme media query: CSS'de @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } } ile sistem tercihine göre stil uygulanır.

JavaScript ile algılama: window.matchMedia('(prefers-color-scheme: dark)').matches ile sistem dark mode tercihi kontrol edilir.

Değişiklik dinleme: matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { if (e.matches) setDark(); else setLight(); }) ile sistem tema değişikliği takip edilir.

Öncelik sırası: 1. Kullanıcı manuel seçimi (localStorage), 2. Sistem tercihi (prefers-color-scheme), 3. Varsayılan tema (light). Bu sırayla kontrol edin.

Dark Mode En İyi Uygulamaları

Saf siyah (#000000) kullanmayın. Çok koyu gri (#121212 veya #1a1a1a) daha iyi görünür ve göz yorgunluğunu azaltır.

Renk doygunluğunu azaltın. Dark mode'da parlak renkler (kırmızı, yeşil, mavi) göz yorgunluğuna neden olur. Desaturated (doygunluğu azaltılmış) renkler kullanın.

Görselleri ayarlayın. Dark mode'da parlak görseller rahatsız edici olabilir. filter: brightness(0.8) ile görselleri hafifçe karartın.

Tüm bileşenleri test edin. Formlar, tablolar, kod blokları, grafikler dark mode'da doğru görünmeli. Her bileşeni dark mode'da kontrol edin.

Meta theme-color: <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)"> ile tarayıcı UI (adres çubuğu) rengini dark mode'a uygun ayarlayın.

Framework'lerde Dark Mode

Tailwind CSS: dark: prefix ile dark mode stilleri tanımlanır. dark:bg-gray-900 dark:text-white gibi. class stratejisi ile manuel kontrol sağlanır.

React: useDarkMode hook'u veya next-themes kütüphanesi ile kolay dark mode implementasyonu. SSR uyumlu tema yönetimi.

Vue: @vueuse/core kütüphanesindeki useDark composable'ı ile reaktif dark mode. Otomatik sistem tercihi algılama.

Bootstrap: data-bs-theme="dark" attribute'u ile Bootstrap 5.3+ dark mode desteği. CSS değişkenleri ile tema yönetimi.