Tokens · Theming
Dark mode mapping
Nexberry'nin "marketing dark" ve "panel light" şu anda iki ayrı paletten besleniyor. Bu kart, paneli isteğe bağlı dark moda geçirebilecek anlamsal token eşleşmesini tanımlar — değer-değil-rol prensibi: --nb-text ne değişmez bir gri-900'dur, ne de keyfi siyah-beyaz; tema neyse onu çözer.
01 · Yüzey eşleşmesi (canlı önizleme)
Aynı kart, iki temada
Light · Panel defaultdata-theme="light"
Sipariş #1247
Margerita Pizza · 2x · 370 TL
Hazır· Kurye atanmadı
Dark · Marketing / opsiyonel paneldata-theme="dark"
Sipariş #1247
Margerita Pizza · 2x · 370 TL
Hazır· Kurye atanmadı
02 · Anlamsal token tablosu
Sol: rol. Orta: light değer. Sağ: dark değer.
| Anlamsal token | Light değer | | Dark değer | Notlar |
|---|
| --nb-color-bg | #f9fafb · gray-50 | → | #0a0a0a · neutral-950 | Sayfa zemini |
| --nb-color-surface | #ffffff | → | #171717 · neutral-900 | Kart, modal, popover yüzeyi |
| --nb-color-surface-2 | #f3f4f6 · gray-100 | → | #262626 · neutral-800 | Chip, hover yüzeyi, kbd |
| --nb-color-border | #e5e7eb · gray-200 | → | #262626 · neutral-800 | 1px hairline |
| --nb-color-border-strong | #d1d5db · gray-300 | → | #404040 · neutral-700 | Hover sınır, input border-strong |
| --nb-color-text | #111827 · gray-900 | → | #fafafa · neutral-50 | Birincil metin |
| --nb-color-text-muted | #6b7280 · gray-500 | → | #a1a1aa · neutral-400 | Yardımcı metin, label |
| --nb-color-text-subtle | #9ca3af · gray-400 | → | #6b7280 · neutral-500 | Caption, eyebrow on dark |
| --nb-color-primary | #059669 · emerald-600 | → | #10b981 · emerald-500 | Karanlıkta bir adım açılır |
| --nb-color-primary-hover | #047857 · emerald-700 | → | #34d399 · emerald-400 | Karanlıkta hover daha açık |
| --nb-color-success-text | #047857 | → | #34d399 | Pill metni — bg yok, text + dot |
| --nb-color-success-surface | #f3f4f6 · gray-100 | → | #1f2a25 · slate-emerald | Eski success-bg yerine; ince yeşil tint |
| --nb-color-danger | #ef4444 · red-500 | → | #f87171 · red-400 | Destructive aksiyon |
| --nb-color-warning | #f59e0b · amber-500 | → | #fbbf24 · amber-400 | Beklemedeki ödeme chip'i |
| --nb-color-info | #3b82f6 · blue-500 | → | #60a5fa · blue-400 | Bilgi linki, "X ürün daha" |
| --nb-shadow-md | siyah %7 | → | siyah %40 | Karanlıkta gölge daha derin |
| --nb-focus-ring | emerald-400 | → | white/85 | Karanlıkta yeşil halka kaybolur |
03 · Uygulama biçimi
CSS variable scope ile temayı tek satırda çevir
| Adım | Yapılacak |
|---|
| 1 | Anlamsal token'lar :root'a (light default) yazılır |
| 2 | Dark blokta yalnızca aynı isimli değişkenlerin değerleri override edilir: [data-theme="dark"]{ --nb-color-bg: #0a0a0a; ... } |
| 3 | Bileşenler renk-değer değil, anlamsal token kullanır: color: var(--nb-color-text); tema değişince doğal olarak güncellenir |
| 4 | Tema değiştirici document.documentElement.setAttribute('data-theme', 'dark'|'light') uygular; localStorage.nbTheme'de tutulur |
| 5 | İlk yüklemede prefers-color-scheme: dark okunur, kullanıcı tercihi yoksa OS'a uyulur |
| 6 | Geçiş anında transition: background-color 200ms, color 200ms sadece html'de — tüm element transition'ı performans yer |
Geçiş ve uyarılar
· Şu an: panel light-only, marketing dark-only iki ayrı palette ile çalışıyor. Dark mode panel roadmap'tedir; bu kart eşleşmeyi şimdiden donduruyor — yeni komponentler bu token isimleriyle yazılırsa migrasyon ücretsiz olur.
· WhatsApp renkleri tema-bağımsızdır (#25d366, #075e54) — chat mockup'ı iki temada da aynı görünür.
· Marketing-bg gradient'i light temada da görsel olarak dark kalır — bu bir hero özelliğidir, tema değil.
· Sektör fotoğrafları tema-nötrdür (cool slate); tonlama uygulanmaz.
· Eski --nb-success-bg #d1fae5 token'ı kaldırıldı (changelog v1.2). Yerine --nb-color-success-surface; yeşil tint istemediğin yerde gri-100 kullan.
· Anlamsal token renk-tarafsız isim almalı: --nb-color-bg ✓, --nb-gray-50 ✗ (gray-50 dark'ta neutral-950'a dönüşür).