Muzibu'nun görsel kimliği: Koyu tema, gradient arka plan ve akıllı yerleşim.
Sitenin nasıl göründüğünü belirleyen tasarım sistemi. Tıpkı bir evin iç mimarisi gibi: Sol tarafta navigasyon menüsü, ortada ana içerik, sağ tarafta ek bilgiler. Dark mode (karanlık tema) göz yorgunluğunu azaltır ve müzik dinleme deneyimini iyileştirir.
Spotify, Apple Music gibi büyük platformlar da bu yapıyı kullanır. Kullanıcılar alışık, gezinmesi kolay.
Karanlık arka plan gece dinlemede göz yorgunluğunu %60 azaltır.
OLED ekranlarda siyah pikseller kapalı kalır, pil ömrü uzar.
Koyu arka planda albüm kapakları daha canlı ve dikkat çekici görünür.
Karanlık tema konser, gece kulübü havasını yansıtır.
Arka planda coral→pink gradient sürekli hareket eder. Bu canlılık hissi verir ama dikkat dağıtmaz.
Tema tasarımı yüklenirken ve özelleştirmeler uygulanırken arka planda şu işlemler gerçekleşir:
Tenant'a ait tema ayarları (renkler, fontlar, logo) veritabanından çekilir. Config değerleri Blade view'lara aktarılır ve CSS değişkenleri olarak enjekte edilir.
config('theme.primary_color') → :root { --primary: #6366f1; }
Her tenant için özel CSS dosyası (tenant-X.css) npm run prod ile derlenir. Kullanılmayan class'lar purge edilir, sadece gereken stiller kalır. Dosya boyutu minimize edilir.
public/css/tenant-1001.css - Purged & Minified
Kullanıcı sistem tercihine göre otomatik dark/light mode uygulanır. prefers-color-scheme media query ile algılanır, localStorage'da tercih saklanır.
@media (prefers-color-scheme: dark) + class="dark"
backdrop-filter: blur() ile cam etkisi oluşturulur. GPU hızlandırma kullanılır. Eski tarayıcılarda fallback solid arka plan uygulanır.
.glass { backdrop-filter: blur(20px); @supports not ... }
Sidebar açık/kapalı durumu Alpine.js ile yönetilir. localStorage'da saklanır, sayfa yenilendiğinde aynı durumda kalır. Responsive breakpoint'lerde otomatik kapanır.
x-data="{ sidebarOpen: $persist(true) }" - Alpine Persist