Özel Temalar

Kaynak koda dokunmadan görsel dili ince ayarlamak için CSS tasarım belirteçlerini tema başına geçersiz kılın.

Nasıl Çalışır?

TotalApp'taki her tema (Koyu, Açık, Sleek, vb.) CSS özel özellikleri (belirteçler) aracılığıyla tanımlanır. Özel Temalar düzenleyicisi, bir kod dosyasını düzenlemeye gerek kalmadan bu belirteçleri tema bazında geçersiz kılmanızı sağlar.

Bir belirteç değişikliği = her alan güncellenir

--color-primary belirtecini değiştirmek, uygulamada bu rengi kullanan 50'den fazla bileşeni etkiler — düğmeler, bağlantılar, aktif durumlar, odak halkaları, ilerleme çubukları ve daha fazlası. Değişiklikler, her çağrı sitesini tek tek düzenlemek yerine anında yayılır.

Ekran önizlemeler

Ekranlara kısa bir bakış. Koyu ve açık tema arasında geçmek için her önizlemenin köşesindeki anahtarı kullanın.

app.totalapp.app/settings/appearance

Renkler

Birincil #0891b2

Surface #1e293b

Kenarlık #334155

Başarılı

Tehlike

Acme Corp

Pano

Aktif Kullanıcılar

1,248

Gelir

₺284k

Canlı önizlemeli tema düzenleyici

Geçersiz Kılmaları Yazma

Özel Temalar düzenleyicisi, standart bir CSS :root {} bloğu kabul eder. Her geçersiz kılma bir belirteç adı ve değerinden oluşur:

/* Marka renklerini geçersiz kıl */
:root {
    --color-primary: #875a7b;
    --color-primary-hover: #714868;
    --color-surface: #0f172a;
    --color-background: #080a12;
}

/* Belirli bir tema için geçersiz kıl */
[data-theme="light"] {
    --color-surface: #ffffff;
    --color-background: #f8fafc;
}

Tema seçici	Ne zaman uygulanır
`:root`	Tüm temaları etkiler.
`[data-theme="dark"]`	Yalnızca Koyu tema.
`[data-theme="light"]`	Yalnızca Açık tema.
`[data-theme="sleek"]`	Yalnızca Sleek tema.

Temel Belirteç Referansı

Belirteç	Varsayılan değer	Kullanım yeri
`--color-primary`	`#6366f1`	Düğmeler, bağlantılar, aktif durumlar
`--color-background`	`#080a12`	Uygulama kök arka planı
`--color-surface`	`#0f172a`	Kart ve panel arka planları
`--color-surface-light`	`#1e293b`	Hover durumları, bölücüler
`--color-text`	`#e2e8f0`	Birincil metin
`--color-text-muted`	`#94a3b8`	Etiketler, yer tutucular
`--color-border`	`rgba(255,255,255,0.08)`	Kart kenarlıkları
`--color-success`	`#10b981`	Başarı rozetleri, onay işaretleri
`--color-warning`	`#f59e0b`	Uyarı rozetleri
`--color-danger`	`#ef4444`	Hata durumları, silme eylemleri
`--font-family-base`	`'Inter', sans-serif`	Tüm kullanıcı arayüzü metni

Sık Sorulan Sorular

Geçersiz kılmalar bir TotalApp güncellemesinden sonra da kalır mı?

Evet. Geçersiz kılmalar /api/data/white-label.json adresinde saklanır ve sunucu tarafı kalıcı depolama alanında bulunur. Dağıtımlar bu dosyayı silmez.

Geçersiz kılmalarda herhangi bir CSS kullanabilir miyim?

Yalnızca :root ve [data-theme="..."] seçicilerdeki CSS özel özellikleri desteklenir. Keyfi CSS kuralları (sınıf seçiciler, animasyonlar vb.) güvenlik nedeniyle filtrelenir.

Temalar arasında farklı birincil renkler ayarlayabilir miyim?

Evet. [data-theme="dark"] altında bir --color-primary değeri ve [data-theme="light"] altında farklı bir değer yazabilirsiniz. Her biri yalnızca ilgili tema etkinleştirildiğinde uygulanır.