Claude Tasarım Belirteçleri
Shadcn tema token'larını anlamak için referans
Shadcn Design Token'ları Nasıl Kullanılır
- Her renk,
bg-[ad]vetext-[ad]Tailwind sınıflarıyla kullanılabilir - Bileşenlerde otomatik olarak uygun renkler kullanılır (Card, Button, vb.)
- Renk değişkenlerine
hsl(var(--değişken))ile erişilebilir - Tema değiştirme,
.darksınıfını HTML öğesine ekler/kaldırır - Her kartın sağ üst köşesindeki anahtar ile o kart için karanlık modu açıp kapatabilirsiniz
Neden Foreground/Background Desenini Kullanıyoruz?
Shadcn, her renk için bir arka plan ve bir ön plan tanımlar:
- background: Bileşenin veya öğenin arka planı
- foreground: Bileşenin veya öğenin üzerindeki metin/içerik
Örneğin: bg-primary text-primary-foreground birincil renkli bir düğme oluşturur.
Ana Tema Renkleri
bg-background--backgroundYükleniyor...Sayfa ve bileşen arka planları için kullanılır
bg-foreground--foregroundYükleniyor...Metin ve ikonlar için kullanılır
bg-primary--primaryYükleniyor...Birincil aksiyon butonları ve vurgulu öğeler için kullanılır
bg-primary-foreground--primary-foregroundYükleniyor...Birincil öğeler üzerindeki metin ve ikonlar için kullanılır
İkincil & Vurgu Renkleri
bg-secondary--secondaryYükleniyor...İkincil aksiyon butonları ve daha az vurgulu öğeler için kullanılır
bg-secondary-foreground--secondary-foregroundYükleniyor...İkincil öğeler üzerindeki metin ve ikonlar için kullanılır
bg-accent--accentYükleniyor...Vurgu öğeleri ve seçilmiş durumlar için kullanılır
bg-accent-foreground--accent-foregroundYükleniyor...Vurgu öğeleri üzerindeki metin ve ikonlar için kullanılır
UI Bileşen Renkleri
bg-card--cardYükleniyor...Kartlar, diyaloglar, uyarılar gibi konteynerler için kullanılır
bg-card-foreground--card-foregroundYükleniyor...Kart üzerindeki metin ve ikonlar için kullanılır
bg-popover--popoverYükleniyor...Dropdown, tooltip gibi açılır öğeler için kullanılır
bg-popover-foreground--popover-foregroundYükleniyor...Açılır öğelerdeki metin ve ikonlar için kullanılır
bg-muted--mutedYükleniyor...Sönük arka planlar, disabled alanlar için kullanılır
bg-muted-foreground--muted-foregroundYükleniyor...Sönük ve daha az belirgin metin için kullanılır
Yardımcı & Form Renkleri
border-4 border-border bg-background--borderYükleniyor...Kenarlıklar için kullanılır
border-4 border-input bg-background--inputYükleniyor...Form giriş alanları için kullanılır
ring-4 ring-ring bg-background--ringYükleniyor...Odaklanma halkaları için kullanılır
Durum & Geri Bildirim Renkleri
bg-destructive--destructiveYükleniyor...Silme, tehlikeli işlemler için kullanılır
bg-destructive-foreground--destructive-foregroundYükleniyor...Tehlikeli işlem butonları üzerindeki metin ve ikonlar için kullanılır
Grafik & Görselleştirme Renkleri
bg-[hsl(var(--chart-1))]--chart-1Yükleniyor...Özel kullanım için
bg-[hsl(var(--chart-2))]--chart-2Yükleniyor...Özel kullanım için
bg-[hsl(var(--chart-3))]--chart-3Yükleniyor...Özel kullanım için
bg-[hsl(var(--chart-4))]--chart-4Yükleniyor...Özel kullanım için
bg-[hsl(var(--chart-5))]--chart-5Yükleniyor...Özel kullanım için
Kenar Çubuğu Renkleri
bg-sidebar--sidebarYükleniyor...Özel kullanım için
bg-sidebar-foreground--sidebar-foregroundYükleniyor...Özel kullanım için
bg-sidebar-primary--sidebar-primaryYükleniyor...Özel kullanım için
bg-sidebar-primary-foreground--sidebar-primary-foregroundYükleniyor...Özel kullanım için
bg-sidebar-accent--sidebar-accentYükleniyor...Özel kullanım için
bg-sidebar-accent-foreground--sidebar-accent-foregroundYükleniyor...Özel kullanım için
border-4 border-sidebar-border bg-sidebar--sidebar-borderYükleniyor...Özel kullanım için
ring-4 ring-sidebar-ring bg-sidebar--sidebar-ringYükleniyor...Özel kullanım için
Köşe Yuvarlama Belirteçleri
Border Radius SM
rounded-smBorder Radius MD
rounded-mdBorder Radius LG
rounded-lgBorder Radius XL
rounded-xlUI Bileşen Örnekleri
Card Bileşeni
Bu bir card bileşenidir.
Popover
Popover içeriği genellikle açılır menüler ve ipuçları için kullanılır.
Muted
Muted alanlar genellikle daha az önemli veya devre dışı içerik için kullanılır.
Shadcn Tema İpuçları
Bilinmesi Gerekenler
- Tema renkleri HSL formatındadır (ton, doygunluk, parlaklık)
- Karanlık modda renkler otomatik olarak değişir
- Shadcn bileşenleri doğru renk değişkenlerini otomatik kullanır
- Özel CSS için
hsl(var(--primary))şeklinde kullanın
Özel Tema İçin
- Tüm renkler
assets/scss/tailwind.scssdosyasında - HSL formatını koruyun:
ton doygunluk% parlaklık% - Karanlık mod için
.darksınıfı altındaki değişkenleri düzenleyin - Araç olarak tweakcn.com/editor/theme kullanabilirsiniz