CSS değişkenleriyle karanlık mod ve tema uygulamak

Kısaca: Renkler için CSS değişkenleri, prefers-color-scheme medya sorgusu ve bir anahtarla sistem ayarına saygı gösteren ve seçimi kaydeden temiz bir karanlık mod kurabilirsin.

Biraz daha ayrıntılı: İyi bir karanlık mod renkleri tersine çevirmekten fazlasıdır: yeterli kontrast, yumuşatılmış yüzeyler, uyarlanmış gölgeler ve görseller. Tasarım belirteçleriyle (adlandırılmış renk değişkenleri) her şey bakımı yapılabilir kalır.

Ayrıntılı

Tasarım belirteçleri olarak değişkenler

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #5c6370;
  --accent: #0b6bcb;
  --border: #d9dde3;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12141a; --text: #e8eaf0; --muted: #9aa3b2;
    --accent: #6ea8ff; --border: #2a2f3a;
  }
}
:root[data-theme="dark"] { --bg: #12141a; --text: #e8eaf0; /* … */ }
body { background: var(--bg); color: var(--text); }

--blue değil, anlamsal adlar (--bg, --text, --accent) kullan. color-scheme: light dark, form öğelerini, kaydırma çubuklarını buna göre renklendirir. Yeni: light-dark() işlevi ve @property.

Sistem, anahtar, kaydetme

• prefers-color-scheme ile sistemi izle (varsayılan).
• Açık / koyu / sistem anahtarı: <html> üzerinde data-theme ayarlar; seçimi localStorage’da hatırla (try/catch içinde).
• Titremeyi önle (FOUC): tercihi ilk işlemeden önce ayarlayan küçük bir <head> içi betik.
• Next.js’te: next-themes gibi bir kütüphane veya kendi sağlayıcın; hidrasyon farklarına dikkat et (html üzerinde suppressHydrationWarning).
• Tarayıcı çubuğu için <meta name="theme-color"> ekle.

Karanlıkta tasarım

• WCAG’a göre kontrastı denetle (metin ≥ 4,5:1), saf siyah/beyaz değil (#000/#fff göz kamaştırır): daha çok #12141a ve #e8eaf0.
• Vurgu renklerini aç ve doygunluğu düşür.
• Gölgeler yerine daha açık yüzeylerle yükseklik.
• Görseller/logolar: koyu varyantlar, filter/mix-blend-mode, currentColor ile SVG.
• Grafikler ve kod vurgulama kendi paletleriyle.
• Şeffaf PNG’leri koyu zeminde test et.
• Retro/oyun stilleri kendi temalarıdır: aynı değişken yapısı, farklı değerler.

Test ve erişilebilirlik

DevTools’ta Rendering → prefers-color-scheme taklit et; gerçek cihazlarda test et (OLED, güneş ışığı). Odak halkaları ve hata renkleri her iki kipte de görünür olmalı. Ayrıca forced-colors/yüksek kontrast (@media (forced-colors: active)) ve prefers-contrast ayarlarına saygı göster. Yazdırma stilini açık tut. Rengi asla tek başına bilgi olarak kullanma (desen/metin ekle). Belirteçleri küçük bir stil kılavuzunda belgele.

Ayrıca bak: Erişilebilir web siteleri