Renk Ve Tema

Falcon sitesindeki tüm renkler öncelikle src/styles/tokens/_colors.css dosyasında tanımlanır. Buton, kart ve rozet gibi bileşenler bu semantic token’ları okur; sayfa dosyalarına hex veya text-blue-500 yazılmaz. Açık ve koyu görünüm, html öğesindeki .dark sınıfı ile seçilir — Header’daki tema seçici (ThemeSelect) tercihi localStorage içinde saklar.

İlgili katmanlar: CSS Kullanımı, Fix UI Kullanımı. Tema seçici arayüzü: Font & UI Kullanımı.

Tek Dosya Kuralı

Ne değiştirirsen	Dosya
Sayfa zemini, kart, border, metin tonları	`src/styles/tokens/_colors.css`
Body font, import sırası, `@theme` eşlemesi	`src/styles/core.css` (renk import’u token’dan gelir)
Tek bir butonun hover detayı	`src/styles/components/_fix-button.css` (nadir)

Yapmayın: Her sayfada #007aff veya benzeri hex değerlerini kopyalamak.

Semantic Token’lar Ne İşe Yarar?

Bileşenler doğrudan hex yerine anlamlı isimler kullanır; açık/koyu geçişte aynı isim, farklı değer.

Token	Rol
`--background`	Sayfa zemini
`--foreground`	Ana metin
`--card`	Kart / yükseltilmiş yüzey
`--muted`	İkincil zemin, badge tabanı
`--muted-foreground`	İkincil metin, açıklama
`--primary`	Marka vurgusu, primary buton
`--primary-foreground`	Primary üzerinde metin
`--secondary`	İkincil buton / nötr alan
`--border`	Çizgiler, kart kenarı
`--destructive` / `--success` / `--warning` / `--info`	Durum renkleri

Ek alias’lar (--primary-dark, --danger, --separator vb.) bileşen uyumluluğu için tanımlıdır; yeni stil yazarken mümkünse üstteki semantic isimleri tercih edin.

Açık Tema (`:root`)

Değerler src/styles/tokens/_colors.css içindeki :root bloğundan alınmıştır.

Token	Değer	Kullanım
`--background`	`#f2f2f7`	Body, grouped zemin
`--foreground`	`#000000`	Başlık ve gövde metni
`--card`	`#ffffff`	Kartlar, yükseltilmiş yüzey
`--card-foreground`	`var(--foreground)`	Kart içi metin
`--muted`	`#f2f2f7`	İkincil zemin, badge tabanı
`--muted-foreground`	`rgba(60, 60, 67, 0.6)`	Soluk metin, footer alt satır
`--primary`	`#007aff`	Primary buton, link vurgusu
`--primary-foreground`	`#ffffff`	Primary üzerinde metin
`--primary-dark`	`#0051d5`	Primary hover (`--primary-hover`)
`--secondary`	`#e5e5ea`	İkincil buton zemin
`--secondary-foreground`	`#000000`	İkincil buton metni
`--border`	`#c6c6c8`	Ayırıcılar, kart kenarı
`--ring`	`var(--primary)`	Odak halkası (form)
`--destructive`	`#ff3b30`	Hata / sil
`--destructive-foreground`	`#ffffff`	Destructive üzerinde metin
`--success`	`#34c759`	Başarı badge / durum
`--warning`	`#ff9500`	Uyarı
`--info`	`#5ac8fa`	Bilgi
`--accent`	`#ff9500`	Vurgu rengi (ayrı kullanım)

Koyu Tema (`.dark`)

Aynı token adları; değerler .dark bloğunda güncellenir. Bileşen CSS dosyası değişmez.

Token	Değer	Kullanım
`--background`	`#000000`	Sayfa zemini
`--foreground`	`#ffffff`	Ana metin
`--card`	`#1c1c1e`	Kart / elevated yüzey
`--muted`	`#2c2c2e`	İkincil zemin
`--muted-foreground`	`rgba(235, 235, 245, 0.6)`	Soluk metin
`--primary`	`#0a84ff`	Marka vurgusu
`--primary-foreground`	`#ffffff`	Primary metin
`--primary-dark`	`#0066cc`	Primary hover
`--secondary`	`#2c2c2e`	İkincil alan
`--secondary-foreground`	`#ffffff`	İkincil metin
`--border`	`#38383a`	Ayırıcılar
`--destructive`	`#ff453a`	Hata
`--success`	`#30d158`	Başarı
`--warning`	`#ff9f0a`	Uyarı
`--info`	`#64d2ff`	Bilgi

Not: Açık ve koyuda aynı token adı, farklı hex — _fix-button.css veya sayfa dosyasına tema dalı eklemenize gerek kalmaz.

Tema Nasıl Uygulanır?

BaseLayout.astro — <head> içinde inline script: localStorage anahtarı theme (system | light | dark); sistem modunda prefers-color-scheme okunur; sonuç document.documentElement.classList.toggle('dark', …).
ThemeSelect (src/components/islands/ThemeSelect.tsx) — Header’da; src/lib/theme.ts ile applyTheme / storeTheme. Geliştirme sırasında buradan açık/koyu/sistem deneyin.
core.css — @import "./tokens/_colors.css"; body { background-color: var(--background); color: var(--foreground); }. Tailwind @theme içinde --color-primary: var(--primary) gibi eşlemeler utility sınıflarını token’a bağlar.

Renk değerlerini core.css içine taşımayın; palet yalnızca _colors.css üzerinden yönetilir.

Bileşenlere Yansıma

Bileşen	Hangi token’lar
`Button` primary	`--primary`, `--primary-foreground`, `--primary-dark` (hover)
`Card`	`--card`, `--card-foreground`, `--border`
`Badge`	`--muted`, `--muted-foreground`; durumlar için `--success` / `--warning` / `--destructive` / `--info`
Form input	`--card`, `--border`, `--ring`, `--muted-foreground`
Header / footer	Tailwind: `bg-background`, `border-border`, `text-muted-foreground` → `@theme` üzerinden token

Ayrıntılı bileşen kullanımı: Fix UI Kullanımı, stil katmanları: CSS Kullanımı.

Sık Senaryolar

İstediğin	Ne yap
Marka rengini (mavi) değiştir	`:root` ve `.dark` içinde `--primary`; isteğe `--primary-dark` / `--primary-hover`
Koyu kart rengi	`.dark` → `--card`, `--muted`
Tüm site arka planı (açık)	`:root` → `--background`
Badge okunmuyor	Önce `_colors.css` token’ları; gerekirse `src/styles/components/_fix-badge.css`
Tek sayfada özel renk	Kaçının; son çare olarak sayfada Tailwind utility — bakım maliyeti yüksek

Diğer Token Dosyaları

Dosya	İçerik
`src/styles/tokens/_spacing.css`	Boşluk ölçeği
`src/styles/tokens/_radius.css`	Köşe yuvarlaklığı
`src/styles/tokens/_shadows.css`	Gölge

Bunlar renk değildir. Site paleti için _colors.css yeterlidir.

Yapmayın

src/config/site.ts içine renk koymak — orada domain, logo ve site adı vardır (Site Bilgileri).
Onlarca sayfada text-blue-500 veya sabit hex sınıfları.
Harici UI kütüphanesi kurarak paleti ikinci kez tanımlamak — projede Fix UI + token modeli kullanılır.

İlgili Rehberler

CSS Kullanımı — katmanlar, site.css import sırası
Yazı Stilleri — yazı boyutu token’ları (_typography.css); renk ayrı dosyada
Fix UI Kullanımı — Button, Card, Badge
Font & UI Kullanımı — Header tema seçici
Site Layout — BaseLayout, Header, Footer

Özet

Renk = src/styles/tokens/_colors.css; açık tema :root, koyu tema .dark ile aynı token adları. Bileşenler var(--token) tüketir; sayfa dosyalarında hex yazmayın.