M
MultiSaaS

Uygulama Paneli

Marka Özelleştirme

Her tenant, panelinin görsel kimliğini — renk, yazı tipi, logo ve köşe yuvarlama — kendi ayarlar sayfasından değiştirebilir. Değişiklikler tüm sayfalara anında yansır.

URL: /{tenantSlug}/app/settings → Marka Ayarları sekmesi

Ana Renk (Brand Primary)

HEX formatında birincil marka rengi girilir (ör. #2563eb). Butonlar, aktif menü öğeleri ve vurgu elementlerinde kullanılır.

CSS DeğişkeniKullanım Yeri
--brand-primaryAna buton rengi, aktif link rengi
--brand-primary-rgbrgba() çağrıları için R,G,B değerleri
--brand-contrastAna renk üzerindeki metin rengi (otomatik)

Yazı Tipi (Font)

Açılır menüden bir Google Fonts yazı tipi seçilir. Seçim Google CDN üzerinden yüklenir ve tüm panel fontunu değiştirir.

Font AdıStil
InterModern, okunaklı — varsayılan
RobotoNötr, kurumsal
NunitoYuvarlak, samimi
MontserratGüçlü, modern
PoppinsGeometrik, temiz
Ralewayİnce, şık

Köşe Yuvarlama (Border Radius)

Buton, kart ve girdi alanlarının köşe yuvarlama değerini değiştirerek panele farklı bir his verebilirsiniz.

Keskin0px
Hafif6px
Orta12px
Tam Yuvarlak9999px

Logo

Logo URL'i girerek işletme logonuzu gösterebilirsiniz. URL girilmezse sistem işletme adının baş harfini kullanır.

  • PNG veya SVG formatı önerilir
  • Şeffaf arka plan (PNG) koyu ve açık mod için daha iyi görünür
  • Önerilen boyut: en az 200×200 piksel kare logo
  • Logo URL'i herkese açık erişilebilir bir adreste olmalıdır

Koyu Mod (Dark Mode)

Ayarlar > Marka bölümünden koyu mod aktif edilebilir. Sistem, kullanıcı tercihini tarayıcı local storage'da saklar.

CSS değişkeni: --brand-dark-mode: 1

Tüm CSS Değişkenleri

Aşağıdaki değişkenler her sayfa yüklenirken <style> etiketiyle enjekte edilir:

:root {
  --brand-primary:      #2563eb;   /* Ana renk */
  --brand-primary-rgb:  37,99,235; /* R,G,B */
  --brand-contrast:     #ffffff;   /* Otomatik kontrast */
  --brand-font:         'Inter';   /* Yazı tipi */
  --brand-radius:       12px;      /* Köşe yuvarlama */
  --brand-logo-url:     "";        /* Logo URL */
  --brand-dark-mode:    0;         /* 0=açık, 1=koyu */
}