← Blog
Web Gelistirme6 dk okumaMegis

Dark Mode Uygulama Rehberi: Karanlik Tema Gelistirme

Web sitenize dark mode destegi ekleyerek kullanici tercihlerine duyarli bir deneyim sunun.

Dark Mode Uygulama Rehberi: CSS Variables, next-themes ve FOUC Onleme

Dark mode (karanlik tema), modern web uygulamalarinin vazgecilmez bir ozelligi haline gelmistir. Kullanicilarin yuzde 80'inden fazlasi dark mode secenegini tercih ettiklerini belirtmektedir. Dogru uygulandiginda goz yorgunlugunu azaltan, pil omrunu uzatan ve estetik bir deneyim sunan dark mode, yanlis uygulandiginda ise FOUC (Flash of Unstyled Content), erisebilirlik sorunlari ve kullanici deneyimi bozukluklarina yol acabilir. Bu rehberde, CSS variables ile temelinden, Next.js'te next-themes ile uygulamasina kadar tum sureci detayli olarak ele aliyoruz.

Dark Mode Tasarim Ilkeleri

Dark mode, sadece arka plani siyah yapmak degildir. Etkili bir dark mode uygulamasi icin dikkat edilmesi gereken temel tasarim ilkeleri vardir.

Renk Paleti Olusturma

OgeLight ModeDark ModeDikkat Noktasi
Arka Plan#FFFFFF#121212 veya #1A1A2ESaf siyah (#000) kullanilmamalidir
Yuzey (Card)#F5F5F5#1E1E2E veya #2D2D44Arka plandan biraz acik olmali
Birincil Metin#1A1A1A#E0E0E0Saf beyaz (#FFF) kullanilmamalidir
Ikincil Metin#666666#A0A0A0Kontrast orani en az 4.5:1
Vurgu Rengi#0066CC#66B3FFDark mode icin daha acik tonlar

Tasarim Ipuclari

  • Saf siyah kullanmayin: #000000 yerine #121212 gibi koyu gri tonlar daha rahat okunur
  • Saf beyaz metin kullanmayin: #FFFFFF yerine #E0E0E0 goz yorgunlugunu azaltir
  • Yukseklik ile ton degistirin: Elevation arttikca yuzey rengi biraz acilmalidir
  • Golgeleri azaltin: Dark mode'da box-shadow yerine border veya subtle glow kullanin
  • Gorselleri ayarlayin: Parlak gorsellerin opakligini yuzde 80-90'a dusurun

CSS Custom Properties ile Tema Sistemi

CSS Custom Properties (CSS Variables), tema degisimi icin en temel ve gucluyaklasimdir. Tum renkleri degisken olarak tanimlayarak tek bir sinif degisikligiyle tum temayi degistirebilirsiniz.

CSS Variables Tanimlamasi

:root {
  /* Light tema (varsayilan) */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-surface: #ffffff;
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --accent: #0066cc;
  --border: #e0e0e0;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1e1e2e;
  --bg-surface: #2d2d44;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --accent: #66b3ff;
  --border: #3d3d5c;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

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

Sistem Tercihini Algilama

/* Isletim sistemi dark mode tercihini algilama */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #121212;
    --bg-secondary: #1e1e2e;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --accent: #66b3ff;
    --border: #3d3d5c;
  }
}

Next.js'te next-themes ile Dark Mode

next-themes, Next.js projelerinde tema yonetimi icin en populer kutuphanedir. SSR uyumlu calisir, FOUC'u onler ve sistem tercihini otomatik olarak algilar.

Kurulum ve Yapilandirma

# Kurulum
npm install next-themes

ThemeProvider Ayarlama

// app/layout.tsx
import { ThemeProvider } from 'next-themes';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="tr" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="data-theme"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Tema Degistirme Butonu

'use client';
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => setMounted(true), []);
  if (!mounted) return null;

  return (
    <button
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
      aria-label="Tema degistir"
    >
      {theme === 'dark' ? 'Acik Tema' : 'Karanlik Tema'}
    </button>
  );
}

FOUC (Flash of Unstyled Content) Onleme

FOUC, sayfa yuklenirken kisa sureligine yanlis temanin gosterilmesidir. Ornegin, kullanici dark mode secmis ancak sayfa ilk yuklendiginde light mode gorunur ve sonra dark mode'a gecer. Bu gorselparlama kullanici deneyimini ciddi sekilde bozar.

FOUC Neden Olusur?

  • Tema tercihi client-side'da (localStorage) saklanir
  • SSR sirasinda sunucu tema tercihini bilemez
  • JavaScript yuklenmeden tema uygulanamaz
  • Bu gecikme sirasinda varsayilan tema gorunur

FOUC Cozum Yontemleri

  1. Inline Script Ekleme: HTML'e JavaScript yuklenmeden once tema uygulayan bir inline script ekleyin
  2. next-themes Kullanin: next-themes otomatik olarak FOUC'u engelleyen bir script enjekte eder
  3. suppressHydrationWarning: html etiketinde bu prop'u ekleyerek hydration uyarisini onleyin
  4. Cookie-based tema: Tema tercihini cookie'de saklayarak SSR sirasinda okuyun

Manuel FOUC Onleme Script'i

<script dangerouslySetInnerHTML={{
  __html: `
    (function() {
      var theme = localStorage.getItem('theme');
      if (!theme) {
        theme = window.matchMedia('(prefers-color-scheme: dark)').matches
          ? 'dark' : 'light';
      }
      document.documentElement.setAttribute('data-theme', theme);
    })();
  `
}} />

Tailwind CSS ile Dark Mode

Tailwind CSS, dahili dark mode destegi sunar ve class veya media strategy ile yapilandirilabilir.

Tailwind Yapilandirmasi

// tailwind.config.ts
export default {
  darkMode: 'class', // veya 'media'
  // ...
}

Tailwind Dark Mode Kullanimi

<div className="bg-white dark:bg-gray-900">
  <h1 className="text-gray-900 dark:text-gray-100">Baslik</h1>
  <p className="text-gray-600 dark:text-gray-400">Aciklama</p>
  <button className="bg-blue-600 dark:bg-blue-400 text-white">
    Buton
  </button>
</div>

Erisebilirlik Kontrol Listesi

  • Tum metin-arka plan kombinasyonlarinda WCAG AA kontrast oranini (4.5:1) saglayin
  • Tema degistirme butonuna uygun aria-label ekleyin
  • Renk koru kullaniclari icin renk disindaki gorsel ipuclari da kullanin
  • Sistem tercihine saygi gosterin, ancak kullaniciya manuel secim hakki taniyin
  • Animasyonlari prefers-reduced-motion media query ile kontrol edin
  • Form ogelerinin dark mode'da gorsel farkliligini test edin

Sonuc

Dark mode uygulamasi, dogru yaklasimla hem kullanici deneyimini iyilestiren hem de modern web standartlarina uygun bir ozellik haline gelir. CSS Custom Properties ile saglam bir tema altyapisi kurmak, next-themes gibi kutuphanelerle entegre etmek ve FOUC sorununu engellemek basarili bir uygulamanin temel adimlaridir. Her zaman erisebilirlik standartlarini goz onunde bulundurarak, tum kullanicilara rahat bir deneyim sunmayi hedefleyin.

#dark mode#karanlik tema#css#kullanici tercihi