# Global Tema Sistemi - Dokümantasyon

## 📋 Genel Bakış

Tüm sayfalarda uygulanacak dinamik tema sistemi oluşturulmuştur. HomepageTheme tablosundaki veriler kullanılarak, middleware aracılığıyla tüm layoutlara tema CSS'i otomatik olarak enjekte edilir.

## 🏗️ Sistem Mimarisi

### 1. **ThemeMiddleware** (`app/Http/Middleware/ThemeMiddleware.php`)
- Her request'e aktif temayı atar
- CSS değişkenlerini dinamik olarak üretir
- Tüm view'larda `$activeTheme` ve `$themeCss` değişkenlerini paylaşır

```php
// Middleware çalışma akışı:
// 1. HomepageTheme::getActiveTheme() ile aktif temayı alır
// 2. generateThemeCss() ile CSS değişkenlerini oluşturur
// 3. view()->share() ile tüm view'lara paylaşır
```

### 2. **Theme Styles Component** (`resources/views/components/theme-styles.blade.php`)
- Blade şablonudur
- Aktif temanın CSS'ini dinamik olarak render eder
- Tüm layout dosyalarında eklenir

### 3. **Kayıtlı Temalar**

Seeder tarafından başlatılan 5 tema:

| Tema | Renk Şeması | Stil |
|------|------------|------|
| **dark** (Varsayılan) | Koyu lacivert (#0f172a), Mavi (#2563eb) | Modern, Animated |
| **military** | Koyu yeşil (#1a2e1a), Haki (#16a34a) | Classic, Static |
| **light** | Beyaz (#f8fafc), Açık (#eff6ff) | Modern, Animated |
| **navy** | Derin lacivert (#0a1628), Altın (#ca8a04) | Gradient, Animated |
| **crimson** | Koyu kırmızı (#1c0a0a), Kırmızı (#dc2626) | Modern, Animated |

## 🔧 Teknik İmplementasyon

### Middleware Registrasyonu

`bootstrap/app.php` içinde kayıtlı:
```php
->withMiddleware(function (Middleware $middleware) {
    $middleware->append(\App\Http\Middleware\ThemeMiddleware::class);
})
```

### Layout Entegrasyonu

Tüm üç layout dosyasında tema CSS'i eklendi:

#### **welcome.blade.php**
- Hero section background gradient
- Hero başlık ve subtitle renkleri
- Buton renklerini tema renklerine bağlı

#### **public.blade.php**
- Body background ve text colors
- Sidebar widget renkleri
- Link ve button renklerini tema değişkenlerine bağlı

#### **admin.blade.php**
- Navbar brand rengi
- Sidebar navigation renkleri
- Button ve form renkleri
- Stat card colors

## 🎨 CSS Değişkenleri

Middleware tarafından oluşturulan CSS değişkenleri:

```css
:root {
    --primary-color: #2563eb;      /* Ana renk */
    --accent-color: #3b82f6;        /* Vurgu rengi */
    --background-color: #f8fafc;    /* Arkaplan */
    --text-color: #111827;          /* Metin rengi */
    --border-color: #e2e8f0;        /* Kenar rengi */
    --font-family: Inter;           /* Font */
    --hero-bg-gradient: linear-gradient(...);
    --hero-title-color: #ffffff;
    --hero-subtitle-color: rgba(...);
    --show-animations: 1;           /* 1 = aktif, 0 = inaktif */
}
```

## 🚀 Tema Değiştirme İşlemi

### Adım 1: Admin Panelinden Tema Aktif Et
```
Admin Panel → Görünüm → Temalar → [Tema Seç] → Aktif Et
```

### Adım 2: Sistem Otomatik Olarak Günceller
- ThemeController::activate() tetiklenir
- HomepageTheme::activateTheme() çalışır
- Cache temizlenir: `HomepageTheme::clearCache()`

### Adım 3: Sonraki Request'lerde Tema Uygulanır
- ThemeMiddleware yeni temayı alır
- CSS değişkenleri güncellenir
- Tüm sayfalar yeni renkleri gösterir

## ✨ Özellikler

### 1. **Dinamik Renk Sistemi**
Tema özelleştirmeleri:
- Hero background gradient
- Hero başlık rengi
- Hero alt başlık rengi
- Primary color (Ana renk)
- Accent color (Vurgu rengi)
- Background color
- Text color
- Border color

### 2. **Stil Seçenekleri**
- `hero_style`: modern, classic, gradient, animated
- `card_style`: elevated, flat, outlined
- `button_style`: gradient, solid, outlined

### 3. **Animasyon Kontrolü**
```php
'show_animations' => true/false  // Tüm animasyonları etkinleştir/devre dışı bırak
```

### 4. **Custom CSS Desteği**
```php
'custom_css' => '.hero-badge { /* özel CSS */ }'
```

### 5. **Cache Desteği**
- Temalar 1 saat cache'lenir
- Model save/delete event'lerde cache otomatik temizlenir
- `HomepageTheme::clearCache()` ile manuel temizleme

## 🧪 Test Etme

### Test 1: Tema Aktivasyonu
```bash
# Admin panelinde farklı tema seç ve aktif et
# Sayfayı yenile ve renklerin değiştiğini kontrol et
```

### Test 2: CSS Değişkenleri
Browser DevTools → Elements → Inspect `<html>` → Computed Styles
```
--primary-color: değiştiğini kontrol et
--background-color: değiştiğini kontrol et
```

### Test 3: Animasyon Kontrolü
Military tema seçildiğinde animasyonlar kaybolmalı:
```css
/* Military theme'de */
* {
    animation: none !important;
    transition: none !important;
}
```

### Test 4: Custom CSS
Navy tema'nın custom badge CSS'i uygulandığını kontrol et

## 📊 Veri Modeli

### HomepageTheme Model
```php
protected $fillable = [
    'name',                    // Tema key'i (dark, military, light, navy, crimson)
    'label',                   // Görüntü adı (🌑 Dark)
    'description',             // Açıklama
    'is_active',              // Aktif mi?
    'sort_order',             // Sıra
    'hero_bg_gradient',       // Hero arka plan
    'hero_title_color',       // Hero başlık rengi
    'hero_subtitle_color',    // Hero alt başlık rengi
    'primary_color',          // Ana renk
    'accent_color',           // Vurgu rengi
    'background_color',       // Arkaplan rengi
    'text_color',             // Metin rengi
    'border_color',           // Kenar rengi
    'hero_style',             // Hero stili
    'card_style',             // Kart stili
    'button_style',           // Buton stili
    'show_animations',        // Animasyonlar
    'font_family',            // Font ailesi
    'custom_css',             // Özel CSS
    'hero_html_override',     // Hero HTML override
];
```

## 🔄 Workflow Diyagramı

```
Request
  ↓
ThemeMiddleware
  ├→ HomepageTheme::getActiveTheme() (Cache'den)
  ├→ generateThemeCss() (CSS değişkenleri üret)
  └→ view()->share(['activeTheme', 'themeCss'])
  ↓
View Render
  ├→ components/theme-styles.blade.php (CSS inject et)
  ├→ CSS değişkenleri :root içinde kullanılır
  └→ Tüm elementler tema renklerini kullanır
  ↓
HTML Response (Tema renkli sayfalar)
```

## 🛠️ Gelişmiş Özelleştirme

### Custom CSS Ekleme
```php
// Admin panelinde custom_css alanına ekle:
.my-element {
    color: var(--primary-color);
    background: var(--background-color);
}
```

### Hero HTML Override
```php
// Admin panelinde hero_html_override alanına HTML ekle
// Bu HTML, hero section içinde render edilir
```

### Yeni Tema Eklemek
```php
HomepageTheme::create([
    'name' => 'myTheme',
    'label' => '🎨 My Theme',
    'primary_color' => '#your-color',
    // ... diğer alanlar
    'is_active' => false,
    'sort_order' => 5,
]);
```

## 📝 Best Practices

1. **CSS Değişkenleri Kullan**
   ```css
   color: var(--primary-color);     /* ✅ DOĞRU */
   color: #2563eb;                   /* ❌ SABİT, tema çalışmaz */
   ```

2. **Fallback Değerler**
   ```css
   background: var(--background-color, #f8fafc);  /* Fallback var */
   ```

3. **Admin'de Test Et**
   Her tema değişikliğinde admin panelinden önizleme yap

4. **Cache Temizle**
   Sorun yaşıyorsan:
   ```bash
   php artisan cache:clear
   php artisan view:clear
   ```

## 🐛 Troubleshooting

**Temalar görünmüyor?**
- `php artisan db:seed --class=HomepageThemeSeeder` çalıştır

**Renkler güncellenmiyor?**
- Cache temizle: `php artisan cache:clear`
- Browser cache temizle (Ctrl+Shift+Del)

**Custom CSS çalışmıyor?**
- Admin panelde `custom_css` alanında yazıldığını kontrol et
- Geçerli CSS yazıntısı kullan

**Animasyonlar hala görünüyor?**
- `show_animations: false` olduğundan emin ol
- Middleware çalıştığını kontrol et

## 📞 İlgili Dosyalar

- `app/Http/Middleware/ThemeMiddleware.php`
- `app/Models/HomepageTheme.php`
- `bootstrap/app.php`
- `resources/views/components/theme-styles.blade.php`
- `resources/views/layouts/welcome.blade.php`
- `resources/views/layouts/public.blade.php`
- `resources/views/layouts/admin.blade.php`
- `app/Http/Controllers/Admin/ThemeController.php`
- `database/seeders/HomepageThemeSeeder.php`