Tema

Bu sayfa İngilizceden çevrilmiştir. İngilizce sayfayı okuyun

Durum: crates/zeyn/assets/zeyn.css içinde uygulandı.

Varsayılan UI kit'i her rengi, yazı tipini, boyutu ve köşe yarıçapını :root üzerindeki CSS özel özelliklerinden (custom properties) okur. Bir kurum, bunlardan birkaçını geçersiz kılarak görünümü değiştirir. zeyn.css dosyasını düzenlemesi ya da seçici (selector) yazması gerekmez.

1. Bir tema nasıl uygulanır

Sunucu önce zeyn.css dosyasını, ardından uygulamada varsa token geçersiz kılmalarını içeren ek bir stil sayfasını sunar. Geçersiz kılma dosyası yalnızca :root blokları içerir:

:root {
  --z-brand: #7a2448;
  --z-font: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --z-radius: 8px;
  --z-density: 0.75;
}

Geçersiz kılma dosyası için kurallar:

• Uygulamanın kendi origin'inden sunulmalıdır. Content Security Policy style-src 'self' olduğundan satır içi <style> blokları ve üçüncü taraf stil sayfaları engellenir.
• Yazı tipleri kullanıcıların makinelerinde önceden kurulu olmalı ya da uygulamanın origin'inden sunulmalıdır. Kit'in kendisi hiçbir web yazı tipi yüklemez.
• zeyn.css dosyasından sonra yükleyin; böylece eşit seçiciler sıraya göre kazanır.
• 2. bölümdeki temel token'ları ayarlayın. 3. bölümdeki türetilmiş token'lar otomatik olarak uyum sağlar. Türetilmiş bir token'ı yalnızca hesaplanan değer markanız için işe yaramıyorsa geçersiz kılın.

Açık, koyu ve uygulama temaları

Her uygulamanın menüde, dil seçicinin yanında bir tema seçicisi vardır. Sistem (prefers-color-scheme değerini izler), Açık, Koyu ve uygulamanın tanımladığı her temayı sunar:

App::new("Billing")
    .theme(Theme::new().brand("#7a2448").radius(6))
    .themes([
        Theme::light(),
        Theme::dark(),
        Theme::named("sand", [("--z-bg", "#f5f1ea"), ("--z-surface", "#fffdf8")]).label(t!("theme.sand")),
    ])
    .default_theme("system")

• App::theme kurumun görünümüdür ve her temanın altında uygulanır.
• App::themes kullanıcıların seçebileceklerini listeler. Verilmezse liste Açık ve Koyu'dur. Her ikisi de listedeyse Sistem sunulur. Theme::named(...) açık temanın üzerine kurulur; .dark_base() koyu temanın üzerine kurar.
• App::default_theme, henüz seçim yapmamış kullanıcıların temasıdır. Ayarlanmazsa system.
• App::theme_picker(false) seçiciyi gizler; herkes varsayılan temayı alır.
• Tek bir tema uygulamayı kilitler: .themes([Theme::named("acme", tokens)]) ya da .theme(Theme::dark()).

Token'lar uygulama başlarken denetlenir. App::check (dolayısıyla router ve serve) bilinmeyen token adlarını, bildirimlerinden taşabilecek değerleri (;, süslü parantezler, \, <, >, url(), hatalı tema adlarını, bilinmeyen bir varsayılan temayı ve bir temanın WCAG 2.2 AA'nın altına ittiği 5. bölümdeki her renk çiftini raporlar. Kontrast yalnızca #rgb ve #rrggbb değerleri için denetlenebilir; diğer renk sözdizimine güvenilir.

Tüm temalar tek bir stil sayfasında, /_zeyn/theme.css içinde sunulur; bu sayfa başlangıçta bir kez oluşturulur ve kit'in stil sayfalarından sonra yüklenir. Seçim zeyn_theme cookie'sinde saklanır; görünüm deposu olan bir uygulamada (App::datagrid_views) oturum açmış kullanıcı için ayrıca bu depoda saklanır, böylece kullanıcıyı yeni bir cihaza kadar izler. Sunucu temayı <html> üzerinde işler; bu yüzden ilk boyama zaten doğrudur ve satır içi betiğe gerek kalmaz:

Seçicide temayı değiştirmek yalnızca bu öznitelikleri ve color-scheme meta etiketini değiştirir, sonra POST /_zeyn/theme çağrısını yapar. Hiçbir şey yeniden yüklenmez.

Koyu temaya elle yazılmış bir geçersiz kılma dosyasında kendi değerlerini vermek için kit'in kullandığı seçicileri tekrarlayın:

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --z-bg: #0e1012; }
}
:root[data-theme="dark"] { --z-bg: #0e1012; }

Yoğunluk

--z-density boşluk birimini ölçekler. 1 normal, 0.75 kompakttır. <html data-density="compact"> bir stil sayfası olmadan 0.75 ayarlar. Kontroller ve grid satırları hiçbir zaman 24 px'in altına inmez; bu yüzden kompakt kipte de WCAG 2.2 hedef boyutu karşılanır.

Sanal (virtual) bir grid'in satır yüksekliği sunucu tarafından sabitlenir (Paging::virtual_rows(px), varsayılan 32 px), çünkü çalışma zamanı kaydırma konumlarını bundan hesaplar. Yoğunluk bunu değiştirmez.

2. Temel token'lar

Bunlar, bir kurumun ayarlaması beklenen token'lardır.

3. Türetilmiş token'lar

Temel token'lardan color-mix() ve göreli renk sözdizimi (relative color syntax) ile hesaplanır. Bir temel token değiştiğinde kendiliğinden güncellenir.

Sunucu işaretlemesinin ayarladığı öğe başına token'lar: --z-width (pencere genişliği), --z-flex (sütun payı), --z-row-height (sanal grid satır yüksekliği) ve bileşen kütüphanesi için --z-stack-gap, --z-split, --z-progress, --z-columns, --z-level ile --z-pop-x / --z-pop-y (açılır pencere konumu).

Grafik seri renkleri components.css içinde --z-chart-1 ile --z-chart-6 arasındadır; koyu temada daha açık değerler kullanılır. Her biri --z-surface karşısında 3:1'e ulaşır. Herhangi bir temel token gibi geçersiz kılın.

4. Marka rengi seçmek

• --z-brand, açık temada beyaz metin taşır (düğmeler, uygulama adı bandı). --z-on-brand karşısında en az 4,5:1 olan bir renk seçin. Orta ile koyu arası çoğu marka rengi geçer. Sarı gibi açık bir marka rengi için --z-on-brand değerini de koyu bir renge ayarlayın.
• Koyu temada kit, metin, halkalar ve birincil düğmeler için markayı açar, uygulama adı bandı için dolu markayı korur. Farklı bir marka, ikinci bir renk gerekmeden iki temada da bilinçli görünür.
• Durum renklerini markadan ayrı tutun. Kırmızı hata satırlarının yanındaki kırmızı bir marka, hataları fark etmeyi zorlaştırır; bu durumda --z-danger değerini farklı bir kırmızıya kaydırın ya da --z-brand-subtle değerini geçersiz kılarak markayı grid'lerden uzak tutun.
• Renklerinizi 5. bölümdeki tabloyu hedef alarak denetleyin. Eşiğin altındaki her çift WCAG 2.2 AA'yı karşılamaz.

5. Doğrulanmış kontrast

Çalışan örnek uygulamada Chromium'da ölçüldü: her token işlenmiş sRGB değerine çözüldü (color-mix() ve göreli renkler dahil), sonra WCAG 2.x kontrast oranı hesaplandı. Eşikler: metin için 4,5:1, UI bileşen dış çizgileri ve odak göstergeleri için 3:1.

--z-border süslemedir (zaten metni olan öğeler arasındaki ayırıcılar) ve 3:1 şartına tabi tutulmaz.

6. Diğer erişilebilirlik davranışları

• Her etkileşimli öğe, --z-focus renginde 2 px'lik bir :focus-visible halkası gösterir. Grid satırları halkayı satırın içine çizer; böylece kaydırma kapsayıcısı tarafından asla kesilmez.
• Düğmeler, girdiler, sıralama başlıkları, filtre kutuları, sayfalama düğmeleri ve pencere kapatma düğmesi her yoğunlukta en az 24 x 24 px'tir.
• prefers-reduced-motion: reduce, bildirim giriş animasyonunu ve tüm geçişleri kaldırır.
• forced-colors kipinde simgeler CanvasText, birincil düğme ve odaklanmış satır Highlight kullanır; arka plan tonlarına dayanan durum (geçerli menü öğesi, satır durumu) bunun yerine bir dış çizgi ya da kenarlık alır.