Tailwind CSS ile Titreşimsiz Dark Mode

Koyu tema artık bir lüks değil, beklenti. Ancak yanlış kurulduğunda sayfa her açılışta önce beyaz görünür, ardından koyuya geçer. Bu "titreme" hem göz yorar hem de profesyonellik algısını zedeler.

Sorunun kaynağı

Tema tercihi genellikle localStorage içinde tutulur ve JavaScript sayfa yüklendikten sonra okunur. Tarayıcı ise sayfayı önce varsayılan temayla boyar.

Çözüm: head içinde küçük bir betik

Tailwind'de darkMode: 'class' ayarını kullanın ve aşağıdaki betiği CSS'ten bile önce, head etiketinin içine yerleştirin:

<script>
  try {
    if (localStorage.getItem('tema') === 'koyu') {
      document.documentElement.classList.add('dark');
    }
  } catch (e) {}
</script>

Betik çok küçük olduğu için açılışı yavaşlatmaz ve ilk boyamadan önce doğru sınıf html etiketine eklenmiş olur.

Yumuşak geçiş

Renklerin aniden değil yumuşakça değişmesi için geçişi yalnızca düğmeye basıldığında etkinleştirin:

html.tema-gecis * {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

Sınıfı düğmeye basınca ekleyip 300 ms sonra kaldırırsanız sayfa ilk yüklenirken gereksiz animasyon oluşmaz.

Erişilebilirlik notları

• Düğmeye mutlaka aria-label ve aria-pressed ekleyin.
• Güneş/ay simgeleri yalnızca görsel ipucudur; ekran okuyucular için metin kullanın.
• Koyu temada saf siyah yerine hafif mavi tonlu koyu bir zemin göz yorgunluğunu azaltır.

FerdiGiden'in yeni arayüzü varsayılan olarak açık temayla gelir; sağ üstteki güneş/ay düğmesiyle tercihiniz kalıcı olarak hatırlanır.