تبديل سمة الواجهة

1) المبادئ

1. النظام> الجلد. الموضوع ليس مجرد انعكاس للخلفية، ولكن مجموعة من الرموز (اللون والخلفية والتباين والظلال والحالات والرسوم التوضيحية والرسوم البيانية).
2. النظام أولاً. افتراضيًا - النظام («يفضل نظام الألوان») مع القدرة على اختيار الضوء/الظلام/التباين العالي يدويًا.
3. التباين الافتراضي. الهدف - WCAG AA، للنص الصغير/الملصقات المهمة - AAA.
4. لا تفشي. نطبق السمة قبل تقديم (نص داخلي)، ونجري التحولات بعناية.
5. استقرار العلامة التجارية. يتم الحفاظ على لهجات ودلالات الأوضاع في جميع الموضوعات.

2) الأنماط والسيناريوهات

النصوص النهارية/نماذج الدفع/القراءة الطويلة.
مباريات مظلمة - مسائية/منخفضة الإضاءة/حية ؛ يقلل من الوهج.
النظام - اتبع نظام التشغيل/المتصفح («يفضل نظام الألوان»).
التباين العالي - زيادة التباين وتقليل المجوهرات (بما في ذلك تقليل الحركة).
Seasonal/Promo (اختياري) - حول الموضوع الأساسي للبطولة/الحدث (لا يكسر الرموز).

3) العمارة الرمزية

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;
}

القاعدة: تستخدم المكونات الرموز الدلالية فقط.

4) كاشف وحفظ الاختيار

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

طبق السمة قبل تحميل CSS (الخط النصي).

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

بعد تركيب التطبيق، أضف «class =» theme-ready «».

6) المكونات والدول

النص/الأيقونات: التباين ≥ AA ؛ نص ثانوي لا يقل عن 4. 5:1 («يتلاشى» بسهولة في الظلام).
الحقول/البطاقات: الخلفية '-bg-elev'، الحدود '-border'، الظل '-shadow'.
CTA: الخلفية "-لكنة"، النص المتباين (# fff "أو المحسوب).
الدول (تحوم/تركيز/نشط/معوق): قم بتغيير السطوع/ألفا، وليس «تألق قوس قزح».
الرسومات/خطوط الشرارة: لوحات منفصلة للضوء/الظلام ؛ الشبكة/المحاور منخفضة التباين ولكنها قابلة للقراءة.

7) الصور/وسائل الإعلام/الشعارات

أيقونات أحادية اللون - من خلال «اللون الحالي» (اضبط على النص).
لا تقلب شعارات العلامة التجارية ؛ قم بإعداد نسختين (فاتحة/مظلمة).
ملصقات/لقطات شاشة: تراكب سهل في الظلام (8-12٪) لسهولة قراءة النصوص.
SVG: تجنب الملء «الصعب»، استخدم var «var (-fg) »/« var (-accent)».

8) القدرة على تحمل التكاليف

التباين العالي: منفصل «موضوع البيانات =» hc «».
حلقات التركيز: مرئية دائمًا ("الخطوط العريضة: 2px solid var (-ocus) ؛ الموجز: 2px ').
لا تعتمد على اللون. أيقونة/نص/نمط للحالات.
الخطوط: "خط-متغير-رقم: جدول-nums' ؛ للمبالغ/العوامل.
RTL: السمة لا تكسر الانعكاس (نستخدم الخصائص المنطقية).

9) الأداء

الألوان - خصائص CSS المخصصة في الجذر → إعادة الاستخدام الفوري دون إعادة تسمية المكونات.
تجنب «إعادة طلاء» الصور باستخدام مرشحات «معكوس ()» على حاويات كبيرة.
الاستبدال الكسول للرسوم التوضيحية الثقيلة للموضوع (إذا لزم الأمر).
لا تخزن لوحات كبيرة في JS - يتم التحكم في الموضوع بواسطة الفئة/السمة.

10) تفاصيل iGaming

العوامل الحية في الليل: التباين «الناعم» (AAA للأرقام)، وتسليط الضوء على التغيير في العامل غير مزعج، دون وميض.
اللعب المسؤول: يمكن قراءة التذكيرات والمطالبات في كلا الموضوعين ؛ بدون زهور «سامة» في الليل.
شباك التذاكر: حقول/توقيعات/أخطاء بدون لهجات متوهجة متعبة ؛ النجاح/الخطأ مستقر بشأن الموضوع.
«جلود» البطولة: فقط كتجاوز اللهجة السطحية، لا تكسر الرموز الأساسية.

11) واجهة المستخدم المقتطفات

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) المقاييس

معدل اعتماد الموضوع: حصة المستخدمين في Dark/System/HC.
معدل FOUC: النسبة مع «الانفجار الأبيض» المرئي في البداية (<1٪).
عيوب التباين: عدد أخطاء التباين عن طريق الإطلاق.
رؤية الخطأ: نقرات/تكرارات بسبب أخطاء «غير مرئية» في مواضيع مختلفة.
تأثير الطاقة (متنقل): مقارنة وقت الجلسة في الظلام مقابل lait (مقياس غير مباشر).

13) الأنماط المضادة

عكس جميع «المرشح: معكوس (1)» - يكسر العلامة التجارية والمعاني.
قم بتغيير الألوان مباشرة في مكونات بدون رموز.
إخفاء حلقات التركيز في موضوع مظلم.
النص مظلم جدًا على خلفية مظلمة (أو ضوء على خلفية ضوئية).
انتقال طويل إلى الصفحة بأكملها (تباطؤ).
ألوان الحالة «الحصرية» في موضوع ليس في موضوع آخر.

14) قائمة QA المرجعية

التباين وسهولة القراءة

• جميع النصوص ≥ ؛ الملصقات الحرجة/النص الصغير ≥ AAA.
• الأخطاء/النجاح/التحذيرات ليست فقط واضحة في اللون.

السلوك

• يحترم النظام «يفضل نظام الألوان» ويستجيب لتغييرات نظام التشغيل.
• لا ينطبق أي من الاتفاقيتين (ينطبق الموضوع قبل عرضه).
• تبديل السمة لا يعيد ضبط حالة الصفحة.

المكونات

• البطاقات/النماذج/الجداول تستخدم الرموز فقط.
• تحتوي الرسومات على لوحات لكلا الموضوعين.
• الشعارات/الأيقونات مرئية بشكل صحيح في كلا الموضوعين.

A11y

• حلقة تركيز مرئية ؛ وضع التباين العالي متاح.
• النظر في «prefers-lowing-motion».

الأداء

• الانتقال ≤ 200 مللي ثانية ؛ دون انعكاسات عالمية.
• لا توجد مرشحات/خلطات ثقيلة على الحاويات.

15) التوثيق في نظام التصميم

رموز الموضوع: لوحات، تناقضات، حالة (تحوم/تركيز/نشط/معوق).
الأدلة: كيفية إضافة لهجة بريندو جديدة دون تراجع التباين.
الرسوم البيانية/الوسائط: لوحات محددة مسبقًا للضوء/الظلام.
الأنماط: النظام أولاً، التباين العالي، التبديل السلس بدون FOUC.
افعل/لا تفعل: انعكاس المرشح، الألوان الداخلية، الأخطاء/التركيز غير المرئي.

موجز موجز

مفتاح موضوع العمل هو الرموز الدلالية + System-first + wlicking start. تباين الالتقاط، ومركزية الألوان، واحترام «يفضل نظام الألوان» وتقليل الحركة، وتخزين اختيار المستخدم وتجنب التأثيرات الثقيلة. ثم تظل واجهة المستخدم قابلة للقراءة والتعرف عليها في أي مكان - من مباراة حية ليلية إلى شباك التذاكر وشاشات البطولة النهارية.