Merhaba arkadaşlar, bugün başımı çok ağrıtan bir konudan bahsedeceğim. Tailwind CSS ile dark mode yapmak aslında çok kolay, ama benim istediğim kullanıcının sisteminde dark mod aktifse direkt onu göstermekti. İlk başta sadece bir toggle butonu ile manuel geçiş yapıyordum, ta ki kullanıcı deneyiminin ne kadar önemli olduğunu fark edene kadar. İşte benim bulduğum en temiz ve etkili çözüm.
Sorun: Manuel Toggle Yetersiz Kalıyor
Projelerimde dark mode'u hep bir butonla açıp kapatıyordum. Ancak, kullanıcı sisteminde zaten dark modu tercih etmişse, siteye girdiğinde ona direkt light tema sunmak pek de kullanıcı dostu değil. Amacım, kullanıcının işletim sistemi veya tarayıcı tercihini otomatik olarak algılayan, aynı zamanda kullanıcının site içindeki tercihini de (manuel toggle ile) hatırlayan bir yapı kurmaktı.
Çözüm: Tailwind'in 'class' Stratejisi ve prefers-color-scheme
Tailwind CSS, dark mode'u iki şekilde yapılandırmanıza izin veriyor: 'media' (sadece sistem tercihi) ve 'class' (manuel kontrol). Bizim sihirli formülümüz, ikisini birleştirmek olacak. İlk adım, tailwind.config.js dosyamızı düzenlemek.
Bu ayarı yaptığımızda, dark mode sınıfları (örn: dark:bg-gray-800) sadece HTML etiketine dark class'ı eklendiğinde aktif olacak.
Sistem Tercihini Algılama ve Class Eklemeye Başlarken
Asıl iş, sayfa yüklendiğinde tarayıcıdan sistem tercihini okuyup, buna göre dark class'ını root element'e (genellikle `<html>`) eklemekte. Bunun için küçük bir JavaScript kodu yazmamız gerekiyor. Bu kodu, sayfanın en başında, render engellemeyecek şekilde çalıştırmalıyız.
Toggle Butonu ile Kontrolü Ele Almak
Artık sistem temasını algılıyoruz. Şimdi, kullanıcının butona tıklayarak temayı değiştirmesini ve bu tercihin hatırlanmasını sağlayalım. Butonun işlevi şu olacak: dark class'ını toggle edecek ve tercihi localStorage'a kaydedecek.
Ve işte butonunuz için basit bir HTML ve Tailwind örneği:
Butonun içindeki yazıyı da tema değişince güncellemek için biraz CSS sihri:
Sonuç ve Düşünceler
Bu yöntemle, kullanıcılarınıza mükemmel bir deneyim sunabilirsiniz. Siteye ilk girişte sistem tercihlerine uyum sağlanır, ancak kullanıcı bir kere tercihini değiştirdiğinde (butona tıkladığında), artık o terih öncelikli olur ve sonraki ziyaretlerinde hatırlanır.
Siz bu yöntemi kullanıyor musunuz? Ya da Tailwind'de dark mode için farklı, belki daha sade bir yaklaşımınız var mı? Ben next-themes gibi kütüphaneleri de denedim ama basit projeler için bu vanilla JS çözümü bana daha şeffaf ve kontrol edilebilir geliyor. Yorumlarda deneyimlerinizi paylaşın, tartışalım!
Sorun: Manuel Toggle Yetersiz KalıyorProjelerimde dark mode'u hep bir butonla açıp kapatıyordum. Ancak, kullanıcı sisteminde zaten dark modu tercih etmişse, siteye girdiğinde ona direkt light tema sunmak pek de kullanıcı dostu değil. Amacım, kullanıcının işletim sistemi veya tarayıcı tercihini otomatik olarak algılayan, aynı zamanda kullanıcının site içindeki tercihini de (manuel toggle ile) hatırlayan bir yapı kurmaktı.
Çözüm: Tailwind'in 'class' Stratejisi ve prefers-color-schemeTailwind CSS, dark mode'u iki şekilde yapılandırmanıza izin veriyor: 'media' (sadece sistem tercihi) ve 'class' (manuel kontrol). Bizim sihirli formülümüz, ikisini birleştirmek olacak. İlk adım, tailwind.config.js dosyamızı düzenlemek.
JavaScript:
// tailwind.config.js
module.exports = {
darkMode: 'class', // Manuel toggle için class stratejisini aktif ediyoruz.
// ... diğer konfigürasyonlar
}Bu ayarı yaptığımızda, dark mode sınıfları (örn: dark:bg-gray-800) sadece HTML etiketine dark class'ı eklendiğinde aktif olacak.
Sistem Tercihini Algılama ve Class Eklemeye BaşlarkenAsıl iş, sayfa yüklendiğinde tarayıcıdan sistem tercihini okuyup, buna göre dark class'ını root element'e (genellikle `<html>`) eklemekte. Bunun için küçük bir JavaScript kodu yazmamız gerekiyor. Bu kodu, sayfanın en başında, render engellemeyecek şekilde çalıştırmalıyız.
JavaScript:
// Örnek: theme-detector.js veya doğrudan <head> içindeki <script> tag'ı
function initTheme() {
// 1. Kullanıcının daha önce sitede bir tercihi var mı? (LocalStorage'da tutuyoruz)
const storedTheme = localStorage.getItem('theme');
// 2. Eğer localStorage'da bir tercih varsa, onu uygula.
if (storedTheme) {
document.documentElement.classList.toggle('dark', storedTheme === 'dark');
} else {
// 3. Eğer yoksa, sistem tercihini kontrol et.
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) {
document.documentElement.classList.add('dark');
// İsteğe bağlı: İlk defa giren kullanıcı için sistem tercihini localStorage'a kaydet.
// localStorage.setItem('theme', 'dark');
}
}
}
// Sayfa yüklendiğinde veya DOM hazır olduğunda temayı başlat.
// DOMContentLoaded kullanmak daha güvenli.
document.addEventListener('DOMContentLoaded', initTheme);Artık sistem temasını algılıyoruz. Şimdi, kullanıcının butona tıklayarak temayı değiştirmesini ve bu tercihin hatırlanmasını sağlayalım. Butonun işlevi şu olacak: dark class'ını toggle edecek ve tercihi localStorage'a kaydedecek.
JavaScript:
// Toggle butonuna tıklanınca çalışacak fonksiyon
function toggleTheme() {
const htmlElement = document.documentElement;
htmlElement.classList.toggle('dark');
// Tema class'ına göre tercihi belirle ve kaydet
const isDark = htmlElement.classList.contains('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
}
// Butonu seç ve event listener ekle
const themeToggleBtn = document.getElementById('themeToggle');
if (themeToggleBtn) {
themeToggleBtn.addEventListener('click', toggleTheme);
}Ve işte butonunuz için basit bir HTML ve Tailwind örneği:
HTML:
<button id="themeToggle" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg transition-colors">
<span class="light-text">🌙 Karanlık Mod</span>
<span class="dark-text">☀️ Aydınlık Mod</span>
</button>Butonun içindeki yazıyı da tema değişince güncellemek için biraz CSS sihri:
CSS:
/ Varsayılan olarak light-text gösterilsin /
.dark-text {
display: none;
}
.light-text {
display: inline;
}
/ Dark mod aktifken tam tersi /
.dark .dark-text {
display: inline;
}
.dark .light-text {
display: none;
}Bu yöntemle, kullanıcılarınıza mükemmel bir deneyim sunabilirsiniz. Siteye ilk girişte sistem tercihlerine uyum sağlanır, ancak kullanıcı bir kere tercihini değiştirdiğinde (butona tıkladığında), artık o terih öncelikli olur ve sonraki ziyaretlerinde hatırlanır.
Siz bu yöntemi kullanıyor musunuz? Ya da Tailwind'de dark mode için farklı, belki daha sade bir yaklaşımınız var mı? Ben next-themes gibi kütüphaneleri de denedim ama basit projeler için bu vanilla JS çözümü bana daha şeffaf ve kontrol edilebilir geliyor. Yorumlarda deneyimlerinizi paylaşın, tartışalım!