Arayüz Teması Geçiş

1) İlkeler

1. Sistem> cilt. Tema sadece bir arka plan inversiyonu değil, bir dizi belirteçtir (renk, arka plan, kontrast, gölgeler, durumlar, resimler, grafikler).
2. Önce sistem. Varsayılan olarak - Sistem ('prefers-color-scheme'), Açık/Koyu/Yüksek Kontrast'ı manuel olarak seçme özelliğine sahiptir.
3. Varsayılan kontrast. Hedef - WCAG AA, küçük metin/önemli etiketler için - AAA.
4. Salgın yok. Oluşturmadan önce temayı uyguluyoruz (satır içi komut dosyası) ve geçişleri dikkatlice yapıyoruz.
5. Marka istikrarı. Statülerin aksanları ve semantikleri tüm konularda korunmaktadır.

2) Modlar ve senaryolar

Işık - gün komut dosyaları/ödeme formları/uzun okuma.
Karanlık - akşam/düşük ışık/canlı maçlar; parlamayı azaltır.
Sistem - OS/tarayıcıyı takip edin ('prefers-color-scheme').
Yüksek Kontrast - artan kontrast ve en aza indirgenmiş mücevher (dahil. Hareketi azaltın).
Sezonluk/Promosyon (isteğe bağlı) - turnuva/etkinlik için temel tema üzerinde (belirteçleri kırmaz).

3) Token mimarisi

css
:root {
/ semantics/
--bg:    hsl(0 0% 99%);
--bg-elev:  hsl(0 0% 100%);
--fg:    hsl(220 15% 15%);
--muted:   hsl(220 10% 45%);
--accent: hsl (260 95% 60%) ;/brand accent/
--success:  hsl(152 55% 40%);
--warning:  hsl(36 85% 45%);
--danger:  hsl(0 75% 50%);
--border:  hsl(220 10% 90%);
--focus:   hsl(260 95% 60% /.6);
--shadow:  0 6px 24px hsl(220 20% 10% /.08);

/ typography/radii/
--radius: 12px;
--lh: 1. 4;
}
:root[data-theme="dark"]{
--bg:   hsl(220 18% 10%);
--bg-elev: hsl(220 18% 14%);
--fg:   hsl(0 0% 96%);
--muted:  hsl(220 10% 70%);
--accent: hsl (260 95% 65%) ;/slightly lighter in the dark/
--border: hsl(220 14% 22%);
--shadow: 0 8px 28px hsl(220 50% 2% /.6);
}
:root[data-theme="hc"]{
/ high-contrast: simple pairs, high Lc/
--bg: #000; --bg-elev:#000; --fg:#fff; --muted:#fff;
--accent:#00E; --success:#0F0; --warning:#FF0; --danger:#F00;
--border:#fff; --focus:#0FF;
}

Kural: Bileşenler sadece semantik belirteçler kullanır.

4) Dedektör ve seçimi kaydedin

html
<script>
(function(){
const saved = localStorage. getItem('theme'); // 'light'    'dark'    'hc'    'system'    null const sys = window. matchMedia('(prefers-color-scheme: dark)'). matches? 'dark': 'light';
const theme = saved && saved!=='system'? saved: sys;
document. documentElement. setAttribute('data-theme', theme);
})();
</script>

js matchMedia('(prefers-color-scheme: dark)'). addEventListener('change', e=>{
if(localStorage. getItem('theme')==='system'){
document. documentElement. setAttribute('data-theme', e. matches? 'dark': 'light');
}
});

5) FOUC olmadan yumuşak geçişler

CSS'yi (satır içi komut dosyası) yüklemeden önce temayı uygulayın.

css
@media (prefers-reduced-motion: no-preference){
html. theme-ready { transition: color. 18s, background-color. 18s, border-color. 18s; }
}

Uygulamayı monte ettikten sonra, 'class =' theme-ready '' ekleyin.

6) Bileşenler ve durumlar

Metin/simgeler: AA ≥ kontrast; İkincil metin 4'ten düşük değil. 5:1 (karanlıkta kolayca "kaybolur").
Alanlar/kartlar: arka plan '--bg-elev', kenarlık '--border', gölge '--shadow'.
CTA: background '--accent', kontrast metin ('# fff' veya hesaplanmış).
Durumlar (hover/focus/active/disabled): Parlaklığı/alfayı değiştirin, "gökkuşağını parlatın'değil.
Grafikler/ışıltılar: açık/karanlık için ayrı paletler; Izgara/eksenler düşük kontrastlı ancak okunabilir.

7) Görüntüler/Medya/Logolar

Tek renkli simgeler - 'geçerli' Renk 'aracılığıyla (metne ayarlayın).
Marka logolarını ters çevirmeyin; İki versiyon hazırlayın (açık/koyu).
Posterler/ekran görüntüleri: metinlerin okunabilirliği için karanlıkta kolay kaplama (%8-12).
SVG: "sert" dolgulardan kaçının, var 'var (--fg)'/' var (--accent)' kullanın.

8) Satın alınabilirlik

Yüksek kontrast: ayrı ön ayar' data-theme =" hc"'.
Odak halkaları: her zaman görünür ('anahat: 2px katı var (--focus); Anahat-ofset: 2px ').
Renklere güvenmeyin. Durumlar için simge/metin/desen.
Fontlar: 'font-variant-numeric: tabular-nums;' toplamlar/faktörler için.
RTL: tema yansıtmayı bozmaz (mantıksal özellikleri kullanıyoruz).

9) Performans

Renkler - kökte CSS özel özellikleri - bileşen yeniden adlandırma olmadan anında yeniden kullanım.
Büyük kaplarda 'invert ()' filtreli görüntüleri "yeniden boyamaktan" kaçının.
Tema için ağır resimlerin tembel ikamesi (gerekirse).
Büyük paletleri JS'de saklamayın - tema sınıf/nitelik tarafından kontrol edilir.

10) iGaming'in özellikleri

Geceleri canlı faktörler: "Yumuşak" kontrast (sayılar için AAA), faktördeki değişimi vurgulayarak titremeden göze çarpmaz.
Sorumlu oyun: Hatırlatıcılar ve istemler her iki temada da okunabilir; Geceleri "zehirli" çiçekler olmadan.
Gişe: parlayan vurguları yormadan alanlar/imzalar/hatalar; Başarı/hata bu konuda sabittir.
Turnuva "derileri": sadece yüzeysel vurgu geçersiz kılma, temel belirteçleri kırmayın.

11) Snippets UI

html
<label class="theme-switch">
<span> Topic </span>
<select id="theme">
<option value = "system "> System </option>
<option value = "light "> Bright </option>
<option value = "dark "> Dark </option>
<option value = "hc"> High contrast </option>
</select>
</label>
<script>
const sel = document. getElementById('theme');
sel. value = localStorage. getItem('theme')          'system';
sel. addEventListener('change', e=>{
const v = e. target. value;
localStorage. setItem('theme', v);
if(v==='system'){
const sys = matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light';
document. documentElement. setAttribute('data-theme', sys);
} else {
document. documentElement. setAttribute('data-theme', v);
}
});
</script>

css
.btn{height:44px; padding:0 16px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px}
.btn--primary{background:var(--accent); color:#fff}
.card{background:var(--bg-elev); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius)}
.text-muted{color:var(--muted)}

tsx import { useEffect, useState } from 'react';
type Theme = 'light'    'dark'    'hc'    'system';
export function useTheme(){
const [theme, setTheme] = useState<Theme>(()=>localStorage. getItem('theme') as Theme          'system');
useEffect(()=>{
const apply = (t:Theme)=>{
const v = t==='system'? (matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light'): t;
document. documentElement. setAttribute('data-theme', v);
};
apply(theme);
const mql = matchMedia('(prefers-color-scheme: dark)');
const on = ()=> theme==='system' && apply('system');
mql. addEventListener('change', on);
return ()=> mql. removeEventListener('change', on);
},[theme]);
useEffect(()=> localStorage. setItem('theme', theme),[theme]);
return { theme, setTheme };
}

12) Metrikler

Tema benimseme oranı: Dark/System/HC'deki kullanıcıların payı.
FOUC oranı: başlangıçta görünür "beyaz patlama'ile oran (<%1).
Kontrast kusurları: serbest bırakılarak kontrast hatalarının sayısı.
Hata görünürlüğü: Farklı konulardaki "görünmez" hatalar nedeniyle tıklamalar/tekrarlar.
Enerji etkisi (mobil): Karanlıkta oturum süresinin lait (dolaylı metrik) ile karşılaştırılması.

13) Anti-desenler

Tüm 'filtreyi ters çevir: ters çevir (1)' - markayı ve anlamları kırar.
Belirteçleri olmayan bileşenlerde renkleri doğrudan değiştirin.
Odak halkalarını karanlık bir temada gizleyin.
Metin koyu bir arka plan üzerinde çok koyu (veya açık bir arka plan üzerinde açık).
Tüm sayfaya uzun geçiş (yavaşlamalar).
Başka bir konuda olmayan bir konuda "özel" durum renkleri.

14) KG kontrol listesi

Kontrast ve okunabilirlik

• Tüm AA ≥ metinleri; Kritik etiketler/küçük metin ≥ AAA.
• Hatalar/başarı/uyarılar sadece renkli olarak fark edilemez.

Davranış

• Sistem 'prefers-color-scheme'e saygı duyar ve işletim sistemi değişikliklerine yanıt verir.
• FOUC yok (tema oluşturmadan önce geçerlidir).
• Temanın değiştirilmesi sayfa durumunu sıfırlamaz.

Bileşenler

• Kartlar/formlar/tablolar yalnızca belirteçleri kullanır.
• Grafikler her iki tema için de paletlere sahiptir.
• Logolar/simgeler her iki temada da doğru şekilde görülebilir.

A11y

• Görünür odak halkası; Yüksek Kontrast modu mevcuttur.
• 'Prefers-reduced-motion' düşünün.

Performans

• Geçiş ≤ 200 ms; küresel yeniden akışlar olmadan.
• Kaplarda ağır filtreler/karışımlar yok.

15) Tasarım sistemindeki belgeler

Tema belirteçleri: paletler, kontrastlar, durum (hover/focus/active/disabled).
Kılavuzlar: Kontrastı geriletmeden yeni bir brendo vurgusu nasıl eklenir.
Grafikler/Medya: açık/karanlık için önceden tanımlanmış paletler.
Desenler: Sistem-ilk, Yüksek Kontrast, FOUC olmadan pürüzsüz anahtarlama.
Yap/Yapma: filtre inversiyonu, satır içi renkler, görünmez hatalar/odaklanma.

Kısa Özet

Çalışma teması anahtarı semantik belirteçler + Sistem-ilk + titreyen başlangıçtır. Kontrastı yakalayın, renkleri merkezileştirin, "renk düzenini tercih eder've hareketi azaltın, kullanıcı seçimini saklayın ve ağır efektlerden kaçının. Ardından UI, herhangi bir ortamda okunabilir ve tanınabilir kalır - bir gece canlı maçından bir günlük gişeye ve turnuva ekranlarına kadar.