Özelleştirme

Bu sayfa panelin ana rengini, koyu temasını, görünüm seçeneklerini, yazı tipini ve köşelerini değiştirmeyi anlatır.

En kısa örnek

/* resources/css/acun-ui.css, dosyanın sonuna */
@theme {
    --color-brand-600: #0f766e;
}

Bütün brand-* tonları bu tek değerden türetilir. Düğmeler, bağlantılar, seçili menü öğesi ve odak halkaları birlikte değişir. Değişikliği görmek için npm run dev çalışıyor olmalı ya da npm run build ile derleyin.

Renkler, yazı ölçeği, gölgeler ve köşeler @acunsoft/acun-ui-core içindeki panel.css dosyasının @theme bloğunda tanımlıdır. Bileşenler Tailwind'in kendi renk adlarını (gray, zinc, emerald…) kullanır; bu değerler o ölçeklerin üzerine yazılmıştır. Kendi @theme bloğunuzla herhangi birini değiştirebilirsiniz. Bloğu @import '@acunsoft/acun-ui-core'; satırından sonra yazın.

Kullanıcının seçtiği ana renk

Kullanıcı rengi görünüm panelindeki renk seçiciyle (acun:brand-color-picker) seçer. Siz de düzenin brand-color prop'uyla ya da yapılandırmadaki brand_color ile bir renk verebilirsiniz:

<acun:layout.sidebar brand-color="green" …>

Hazır renkler paletin renkleridir: default (#696bfe), green (#42d697), red (#fe696a), yellow (#f9c74f), blue (#45b8f4), gray (#8592a3), dark (#2b2c40). Herhangi bir #rrggbb değeri de olur.

Hazır bir renkte primary düğme o rengin kendi düğme tonlarıyla çizilir: zemin, kenarlık, üzerine gelince ve gölge. Bu renkler açık olduğu için bağlantı, seçili menü öğesi ve odak çerçevesinde aynı rengin okunaklı, koyu bir tonu kullanılır. Açık bir özel renk seçildiğinde de aynısı yapılır.

Renk ölçekleri

Güncel değerler sitenin Tasarım sistemi bölümünde, Renkler başlığında.

Koyu tema

Koyu tema <html> etiketindeki dark sınıfıyla açılır. Bileşenler dark: sınıflarıyla buna uyar; kendi işaretlemenizde de dark: sınıflarını kullanın.

Düzenler kullanıcının tercihini (light, dark, system) ilk boyamadan önce uygular. Böylece sayfa açılırken beyaz bir parlama olmaz. Üst çubuktaki acun:theme-toggle ve görünüm paneli tercihi değiştirir. Düzenin theme prop'u sunucuda saklanan değeri verir.

Görünüm seçenekleri

Prop'ları temada resources/views/layouts/admin/vertical.blade.php dosyasındaki <acun:layout.sidebar> etiketine yazın. semi-dark, sidebar-mode ve navbar-mode yalnızca dikey düzende vardır.

Varsayılan ayarlar

Seçenekleri her düzende tek tek yazmak yerine uygulamanın varsayılanlarını config/acun-ui.php dosyasında bir kez tanımlayın:

'layout' => [
    'theme' => 'system',      // light | dark | system
    'brand_color' => 'blue',  // hazır renk adı ya da #rrggbb
    'skin' => 'bordered',     // default | bordered
    'customizer' => true,     // görünüm paneli
],

Bunlar varsayılandır. Kullanıcının seçimi her zaman önce gelir: görünüm panelinde yapıp tarayıcıda saklanan seçim ya da hesaba kayıtlı olup düzene prop olarak verdiğiniz tercih. null bırakılan ayar paketin varsayılanını kullanır. Görünüm panelindeki Varsayılana döndür düğmesi de bu değerlere döner.

Temada yapılandırma dosyası hazırdır. Tema olmadan kurduysanız dosyayı php artisan vendor:publish --tag=acun-ui-config ile oluşturun. Bütün anahtarlar Yapılandırma sayfasında.

Bir sayfaya özel ayar

Tek bir sayfa kendi görünümünü zorlayabilir. Örneğin geniş bir düzenleyici sayfası menüyü daraltabilir, bir sunum sayfası üst çubuğu gizleyebilir:

@extends('layouts.admin.vertical')

@php(\Acun\Ui\Support\Layout::page(['sidebar_mode' => 'collapsed', 'navbar_mode' => 'static']))

@section('content')
    …
@endsection

Aynı çağrıyı controller'da ya da Livewire bileşeninin mount() yönteminde de yapabilirsiniz. Anahtarlar config/acun-ui.php içindekilerle aynıdır: theme, brand_color, skin, semi_dark, sidebar_mode, navbar_mode, customizer, theme_toggle. Bilinmeyen bir anahtar hata verir.

Sayfanın verdiği değer bu istekte her şeyden önce gelir. Kullanıcının saklanan tercihini değiştirmez ve bir sonraki sayfada geçerli değildir. Böyle bir sayfadan wire:navigate ile ayrılırken Acun UI sayfayı baştan yükler; kullanıcının kendi ayarları geri gelir. Sayfaya ayrıca kod eklemeniz gerekmez.

Öncelik sırası:

1. Layout::page()
2. Kullanıcının tercihi: düzen prop'u ya da tarayıcıda saklanan değer
3. config/acun-ui.php
4. Paketin varsayılanı

Yazı tipleri ve köşeler

@theme {
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --radius-sm: 0.5rem; /* bütün bileşenlerin köşesi */
}

Varsayılan yazı tipleri Public Sans (metin) ve DM Mono'dur (kod ve sayılar). Yeni bir yazı tipini yüklemeyi CSS, JavaScript ve derleme sayfası anlatır.

--radius-sm temanın genel köşe yuvarlaklığıdır. Bileşenler bu değere bağlıdır; tek satırla keskin ya da yumuşak bir görünüme geçersiniz.

Bir bileşeni değiştirmek

Önce prop'lara ve class özniteliğine bakın: verdiğiniz sınıflar bileşenin kendi sınıflarıyla birleştirilir.

<acun:card class="border-2 border-brand-600">…</acun:card>

İşaretlemeyi kalıcı olarak değiştirmeniz gerekirse bileşenin dosyasını paketten kopyalayın. Kopyayı uygulamanızın resources/views/components/ui/ klasörüne aynı adla koyun; Laravel önce uygulamadaki kopyayı kullanır. Örneğin button.blade.php kopyası <acun:button> etiketinin yerini alır.

Dikkat

Kopyalanan bileşen paket güncellemelerini ve düzeltmelerini almaz. Bu yola yalnızca gerçekten gerektiğinde başvurun; güncellemeden sonra kopyanızı paketteki sürümle karşılaştırın.

Daha fazlası

• Düzenler: düzen dosyaları ve tercihleri hesapta saklamak.
• Yapılandırma: config/acun-ui.php dosyasının bütün anahtarları.
• CSS, JavaScript ve derleme: CSS dosyası ve yazı tipleri.