تغییر موضوع رابط

1) اصول

1. سیستم> پوست. تم فقط یک معکوس پس زمینه نیست، بلکه مجموعه ای از نشانه ها (رنگ، پس زمینه، کنتراست، سایه ها، حالت ها، تصاویر، نمودار ها) است.
2. اول سیستم. به طور پیش فرض - سیستم ('prefers-color-scheme') با توانایی انتخاب دستی Light/Dark/High-Contrast.
3. تضاد پیشفرض. هدف - WCAG AA، برای متن کوچک/برچسب های مهم - AAA.
4. شيوع بيماري نداره. ما تم را قبل از رندر (اسکریپت درون خطی) اعمال می کنیم و انتقال ها را با دقت انجام می دهیم.
5. ثبات برند. لهجه ها و معانی وضعیت ها در همه موضوعات حفظ می شود.

2) حالت ها و سناریوها

اسکریپت های روز روشن/فرم های پرداخت/خواندن طولانی.
تاریک - مسابقات شب/نور کم/زنده ؛ تابش خیره کننده را کاهش می دهد.
سیستم - سیستم عامل/مرورگر را دنبال کنید ('prefers-color-scheme').
کنتراست بالا - افزایش کنتراست و به حداقل رساندن جواهرات (شامل کاهش حرکت).
فصلی/تبلیغاتی (اختیاری) - بیش از موضوع اصلی برای مسابقات/رویداد (نشانه ها را شکستن نیست).

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»، مرز «- مرز»، سایه «- سایه».
CTA: پس زمینه «- accent»، متن کنتراست («# fff» یا محاسبه شده).
حالت (شناور/تمرکز/فعال/غیر فعال): تغییر روشنایی/آلفا، نه «درخشش رنگین کمان».
گرافیک/sparklines: پالت جداگانه برای نور/تاریک ؛ grid/axes کنتراست کم اما قابل خواندن است.

7) تصاویر/رسانه ها/آرم ها

آیکون های تک رنگ - از طریق 'currentColor' (تنظیم به متن).
آرم های نام تجاری را معکوس نکنید آماده سازی دو نسخه (روشن/تاریک).
پوسترها/تصاویر: پوشش آسان در تاریکی (8-12٪) برای خوانایی متون.
SVG: اجتناب از پر کردن «سخت»، استفاده از var 'var (--fg) '/' var (--accent)'.

8) قیمت مناسب

کنتراست بالا: از پیش تعیین شده جداگانه' data-theme =» hc».
حلقه های تمرکز: همیشه قابل مشاهده است ('طرح کلی: 2px solid var (--focus) ؛ طرح کلی-افست: 2px ').
به رنگ ها اعتماد نکنید شمایل/متن/الگو برای وضعیتها.
قلمها: 'font-variant-numeric: tabular-numers;' برای مبالغ/عوامل.
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

کنتراست و خوانایی

• تمام متون ≥ AA ؛ برچسب های بحرانی/متن کوچک ≥ AAA.
• خطاها/موفقیت/هشدارها نه تنها در رنگ قابل تشخیص است.

رفتار

• سیستم احترام می گذارد «prefers-color-scheme» و به تغییرات سیستم عامل پاسخ می دهد.
• بدون FOUC (موضوع قبل از رندر اعمال می شود).
• تغییر موضوع حالت صفحه را بازنشانی نمی کند.

قطعات

• کارت ها/فرم ها/جداول فقط از نشانه ها استفاده می کنند.
• گرافیک دارای پالت برای هر دو موضوع است.
• آرم ها/آیکون ها در هر دو موضوع به درستی قابل مشاهده هستند.

A11y

• حلقه تمرکز قابل مشاهده ؛ حالت کنتراست بالا در دسترس است.
• «prefers-reduced-motion» را در نظر بگیرید.

عملکرد

• انتقال ≤ 200 میلی ثانیه ؛ بدون بازتاب جهانی
• بدون فیلتر سنگین/مخلوط در ظروف.

15) مستندات در سیستم طراحی

نشانه های تم: پالت ها، کنتراست ها، حالت (شناور/تمرکز/فعال/غیر فعال).
راهنمایی: چگونه برای اضافه کردن لهجه brendo جدید بدون regressing کنتراست.
نمودارها/رسانه ها: پالت های از پیش تعریف شده برای نور/تاریکی.
الگوها: سیستم اول، کنتراست بالا، سوئیچینگ صاف بدون FOUC.
انجام/انجام ندهید: وارونگی فیلتر، رنگ های درون خطی، خطاهای نامرئی/تمرکز.

خلاصه ای کوتاه

سوئیچ موضوع کار نشانه معنایی + سیستم برای اولین بار + شروع سوسو زدن است. کنتراست را ضبط کنید، رنگ ها را متمرکز کنید، احترام به «prefers-color-scheme» و کاهش حرکت، انتخاب کاربر فروشگاه و جلوگیری از اثرات سنگین. سپس UI در هر محیطی قابل خواندن و قابل تشخیص است - از یک بازی زنده شبانه به یک دفتر جعبه روز و صفحه نمایش مسابقات.