Rehber menüsü

Temel ayarlar

Tema kullanımı

Bu rehber siteyi düzenleyen ekip içindir — son kullanıcılar için değildir.

Ziyaretçiler için

Header’daki güneş/ay ikonu açık ve koyu mod arasında geçiş yapar. Seçim tarayıcıda (localStorage) saklanır ve sonraki ziyarette hatırlanır. Henüz seçim yapılmadıysa site, ziyaretçinin sistem tercihini (açık veya koyu) kullanır.

CSS katmanları (Astro)

Stiller, public sayfaların rehbere özel CSS yüklememesi için katmanlara ayrılmıştır. Astro import ağacına göre paketler — layout’un import ettiği dosyalar tarayıcıya gider.

  • src/styles/core.css — tema token’ları (:root / .dark), .section-container, motion FOUC, tw-animate-css. BaseLayout’ta (tüm public sayfalar).
  • src/styles/site.css — önce core.css, sonra Tailwind (yalnızca site @source). BaseLayout’ta.
  • src/styles/docs.css — rehber bileşenleri ve sayfaları için Tailwind. DocsLayout ve DocsArticle’da (yalnızca rehber rotaları).
  • Yeni site bölümü → bileşende Tailwind; gerekirse site.css içinde @source genişletin. Rehbere özel stil → docs.css veya docs bileşeni.

Marka renklerini değiştirmek

Tüm tema renkleri src/styles/core.css dosyasındadır. Açık mod :root bloğunda, koyu mod .dark bloğundadır. Her değişken (ör. --background, --primary) bg-background ve text-primary gibi Tailwind sınıflarına karşılık gelir.

Yeni bölüm veya bileşen yazarken bu token’ları kullanın — #ffffff veya text-black gibi sabit renkler yazmayın.

  • Birincil düğme: bg-primary text-primary-foreground
  • Sayfa arka planı: bg-background text-foreground
  • Soluk metin: text-muted-foreground

Logolar

src/config/site.ts içinde logo (açık tema) ve logoDark (koyu tema) alanlarını ayarlayın. Header doğru dosyayı otomatik gösterir.

Teknik referans

Geçiş bileşeni: src/components/header/ThemeToggle.tsx. İlk yüklemede yanlış tema flaşını önlemek için BaseLayout, sayfa çizilmeden önce küçük bir inline script çalıştırır.