Ürün teması

Kurulum ve yapılandırma

Herhangi bir adımdan önce, Başlamadan önce ve Terminal temelleri bölümlerini okuyun. Bu talimatlar, supastack monorepo'nun tamamını VS Kodunda açtığınızı varsayar; kök package.json dosyası depo kökünü işaretler. pnpm komutlarında çalışma alanı paketi bir uygulama veya paylaşılan kod klasörüdür; Üründe çalışma alanı, ekibin veri taşıyıcısı ve güvenlik sınırıdır. corepack pnpm --filter ... komutlar kökünden çalıştırılırken monorepodan bir paket seçer. Yalnızca senkronize edilmiş bir mobil veya masaüstü klasörü açtıysanız, Web arka ucunu, Docker kurulumunu veya kök komut dosyalarını içermez: arka ucu bu monorepodan veya erişilebilir bir barındırılan sunucudan çalıştırın ve platform klasörünün kendi komut dosyalarını kullanın. Ortam değişkeni, yerel bir .env dosyasında veya barındırma kontrol panelinizde depolanan adlandırılmış bir ayardır; İlgili uygulamayı değiştirdikten sonra yeniden başlatın ve sunucu sırlarını NEXT_PUBLIC_ ve EXPO_PUBLIC_ değerlerinin dışında tutun.

1. VS Code'da oturum açılmış ürün ekranları için apps/web/app/app-theme.css'yi, renk paketi eklemek için apps/web/src/theme/catalog.ts'yi açın. Ürün renkleri için apps/web/app/theme.css'yi düzenlemeyin; pazarlama markasını kontrol eder.

2. Depo kökünden corepack pnpm --filter @supastack/web dev komutunu çalıştırın ve ardından http://localhost:3000/settings/appearance. adresini ziyaret edin

3. Yerel şubenizdeki bir jetonu değiştirin ve önizlemeyi yenileyin. Beklenen: Ana sayfa seçilen pazarlama temasını korurken kontrol paneli kontrollerinin güncellenmesi.

Pazarlama markası ve ürün teması ayrı dosyalardır. Pano, kimlik doğrulama, ayarlar, faturalama, sohbet ve organizasyon chrome'u için apps/web/app/app-theme.css dosyasını düzenleyin. apps/web/src/theme/catalog.ts içine renk paketleri ekleyin. Yoğunluk, yarıçap, yazı tipi ve yerleşim eksenlerini apps/web/src/theme/presets.ts ile app-theme.css içindeki eşleşen html[data-*] kurallarında genişletin. Pazarlama kimliğini apps/web/src/theme/marketing-theme.ts (MARKETING_THEME_MODE: locked | inherit | bir paket kimliği) içinden seçin; apps/web/app/theme.css dosyasını düzenlemeyin — o dosyanın .marketing-theme:not(.app-theme):not([data-theme]):not([data-marketing-theme="inherit"]) kilidi, varsayılan olarak supastack Obsidian ana sayfa markasını korur.

Çalışma zamanında Ayarlar → Görünüm → ThemePicker renk, yoğunluk, köşe yarıçapı, yazı tipi ve yerleşimi tarayıcı çerezi + localStorage içinde saklar; böylece theme-boot.ts ilk çizimden önce tüm eksenleri geri yükler ve oturum açmış kullanıcının tam görünüm paketini user_appearance (GET/PUT /api/account/appearance) üzerinden tarayıcılar arasında senkronize eder. Aynı sayfa kit UI galerisini bağlar; böylece paketler ve ön ayarlar düğmeleri, giriş alanlarını, kartları, rozetleri ve iletişim kutularını canlı olarak günceller. Tasarım ayrıntıları ve kopyala-yapıştır örnekleri docs/design/kit-product-theme.md ve docs/design/kit-ui-gallery.md dosyalarındadır.

/* Edit product chrome here — not theme.css */
.app-theme {
  --radius-card: 14px;
  background: var(--page);
  color: var(--text);
}
.app-theme .button-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

/* catalog.ts — append a ThemeDefinition with every THEME_TOKEN_NAMES entry */
{
  id: "coral",
  name: "Coral",
  colorScheme: "light",
  tokens: { "--page": "#fff7f4", "--accent": "#e06b4f" /* …full token set… */ }
}

Kopyalanacak komutlar

Bir komutun hangi klasörde çalıştığını görmek için yorumları takip edin. İki terminal etiketlenmişse, iki terminal penceresi açın ve ikincisini kullanırken ilk komutu çalışır durumda tutun.

corepack pnpm --filter @supastack/web dev

# In a second terminal, after changing a theme token:
corepack pnpm test -- apps/web/src/theme/contrast.test.ts

Uygulama iş akışı

Uygulama tüketicilerinde (app-theme.css, globals.css takma adları, WorkspaceShell rotaları) var(--page|--section|--raised|--text|--muted|--border|--accent|…) tercih edin. Turkuaz/soluk hex kabuklarını geri getirmeyin ya da ürün arayüzüne Obsidian hex'i sabit kodlamayın.

Paket eklerken contrast.test.ts'yi yeşil tutun. Hazır ayar kimliği eklerken, ThemePicker ve FOUC açılışı hizalı kalsın diye hem presets.ts'i hem de app-theme.css içindeki html[data-density|data-radius|data-font|data-layout] yeniden eşlemelerini güncelleyin.

Pazarlama yüzeyleri için marketing/brand-geometry.ts içindeki paylaşılan dört-karo marka geometrisini koruyun. Başlık işaretleri şeffaf kalır; favicon ve uygulama simgeleri yuvarlatılmış siyah desteği korur. MARKETING_THEME_MODE "locked" kaldığı sürece (kit varsayılanı) saf pazarlama sayfaları Obsidian görünür; ürünler başka bir paketi sabitleyebilir ya da ziyaretçi seçimini miras alabilir.

Doğrulama ve sorun giderme

Bir renk değişikliği pazarlama ana sayfasını etkiliyorsa, app-theme.css'yi düzenlediğinizi kontrol edin ve apps/web/src/theme/marketing-theme.ts.'yi inceleyin. Metnin okunması zorlaşırsa, önceki değeri geri yükleyin ve tekrar denemeden önce kökten corepack pnpm test -- apps/web/src/theme/contrast.test.ts komutunu çalıştırın.

Kit tema token'larını ya da paketlerini düzenledikten sonra /settings/appearance üzerindeki ThemePicker'ın kit arayüz galerisi ile /dashboard, /auth, /billing, /chat ve organizasyon kabuklarını güncellediğini doğrulayın. / yolunun Obsidian pazarlama kilidinde kaldığını onaylayın (MARKETING_THEME_MODE aksini söylemedikçe). Tema birim sözleşmelerini (catalog, presets, contrast, theme-ownership, kit-ui-gallery) ve mevcutsa application-theme Playwright'ı çalıştırın. Klavye odağını, kontrastı, 320px'i ve azaltılmış hareketi kontrol edin.