حالت تاریک و راحتی بصری

1) چرا یک موضوع تاریک

راحتی چشم در نور کم، تابش کمتر و «چشمک زدن نور».
انرژی: صفحه نمایش تاریک باتری کمتر در OLED/AMOLED صرف می کند.
تمرکز بر داده ها: تمرکز بر محتوا، نه پس زمینه.
انتظارات کاربر: پرچم سیستم «prefers-color-scheme» استاندارد واقعی است.

2) اصول

1. پس زمینه خاکستری تیره> سیاه خالص برای سطوح UI (خوانایی و درجه بندی بهتر).
2. کنتراست در محتوا: نه «سفید در سیاه»، بلکه سایه های نرم برای متون طولانی.
3. «درخشندگی» دقیق: نور پس زمینه/لهجه ها خفه می شوند، اما قابل تشخیص هستند.
4. سایه ≠ عمق: ما با سایه نور/تاری کار می کنیم، نه کنتراست تیز.
5. در دسترس بودن: WCAG AA (حداقل)، تمرکز قابل مشاهده و کشورهای قابل فهم است.
6. تنظیمات سیستم اصلی هستند: خودکار سوئیچینگ و «کاهش حرکت».

3) پالت و نشانه (به عنوان مثال)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• لهجه ها در حالت تاریک + 8-12٪ سبک تر از حالت نور است.
• استفاده از مقیاس خاکستری (4-5 مرحله)، اجتناب از مطلق # 000 برای مناطق بزرگ (استثنا - حالت AMOLED).

4) متن و خوانایی

متن بدنه: خاکستری روشن '# E6E8EB' به '# 0E1116' (~ کنتراست 12:1).
متن ثانویه: «# A6AEB8» ؛ نکات - یک مرحله تیره تر/شفاف تر.
خواندن طولانی: سایه کمی گرم (کاهش «هاله»).
لینک ها - لهجه + خط زیر خط به طور پیش فرض ؛ رنگ ≠ تنها وسیله معنی است.

5) سطوح، عمق و شیشه

ارتفاعات: «پایه» → «elev1» → «elev2» ؛ هر لایه 2-4٪ سبک تر/گرم تر است.
سایه ها نرم، گسترده، با کدورت کم هستند. اجتناب از ضربه های «درخشان».
پانل های شفاف (تاری) نسبتا مناسب هستند ؛ متن را با زیر مقایسه کنید.
محدودیت ها نیمه نازک هستند «--bd-soft» یا به سختی قابل مشاهده «وارثان».

6) کشورها و تمرکز

شناور: + 2-3٪ پس زمینه سبک تر ؛ فعال: − 2-3٪ (تیره تر).
تمرکز: حلقه روشن (به عنوان مثال،. "خروجی: 2px جامد # 6EA0FF ؛ طرح کلی: 2px ؛ ')، قابل مشاهده بر روی دکمه های لهجه.
معلول: کنتراست را با دقت کاهش دهید. زیر سطح قابل خواندن برای متن قرار نگیرید.

7) دکمه ها، فرم ها و جداول

اولیه: پس زمینه «- accent»، متن «# 0E1116».
ثانویه: پس زمینه «- bg-elev1»، مرز «- bd-strong»، متن «- fg-primary».
زمینه های ورودی: پس زمینه «--bg-elev1»، با تمرکز - مرز لهجه ؛ placeholder خسته کننده تر است، اما قابل خواندن است.
جداول: پس زمینه گورخر به سختی قابل توجه است، انتخاب ردیف در شناور + 2-3٪ سبک تر است.

8) تصاویر، آرم ها و عکس ها

لوگو و pictograms - نسخه های معکوس در تاریکی ؛ اجتناب از خطوط نازک و نور در زمینه های اشباع شده.
عکس: یک ماسک تیره (40-60٪) برای هدر های متضاد در بالا اضافه کنید.
آیکون ها: ضخامت تک، کانتور + پر کردن - با شرایط، رنگ های «سمی» نیست.

9) تجسم داده ها در یک موضوع تاریک

رنگ ردیف ها اشباع متوسط است. حداقل 5 تن متفاوت

شبکه ها و محورها - خاموش (آلفا 20-30٪)، امضاها - «- fg-muted».
حاشیه نویسی/حوادث زنده اما قابل خواندن است ؛ زیر خط با شکل/نشانگر، نه فقط رنگ.
داده های خالی/تاخیر - نرم «مه»، نه زمینه های سفید.

10) عملکرد و باتری

OLED واقعا موجب صرفه جویی در سیاه و سفید خالص (# 000) - استفاده در حالت AMOLED با توجه به گزینه کاربر.
اجتناب از درخشش/تاری بزرگ جامد در GPU های ضعیف.
احترام «prefers-reduced-motion»: ساده سازی انیمیشن ها/انتقال.

11) رفتار و تعویض

پیش فرض این است که «prefers-color-scheme» را دنبال کنید.
به کاربر یک سوئیچ صریح بدهید (Light/Dark/System)، انتخاب را نگه دارید (cookie/localStorage).
هنگام تغییر موضوع - بدون فلاش: قبل از اضافه کردن کلاس تم قبل از رندر.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) در دسترس بودن (A11y)

≥ کنتراست متن 4. 5:1 (به طور منظم)، ≥ 3:1 (بزرگ).
حالت را فقط در رنگ رمزگذاری نکنید: از نماد/الگو/امضا استفاده کنید.
سبک های تمرکز و ناوبری صفحه کلید اجباری است.
VoiceOver/TalkBack: نقش ها، برچسب ها، صف بندی تابا.

13) ضد الگوهای

متن کاملا سفید در یک پس زمینه کاملا سیاه و سفید در مناطق بزرگ - «سوسو زدن» و خستگی.
لهجه نئون در تاریکی - «سر و صدای نور».
سایه های کنتراست بالا (خاکستری روی سیاه با مرز سخت).
متن شفاف در عکس بدون ماسک.
محو شدن حفره (آلفا خیلی کم).

14) نمونه هایی از قطعات

دکمه ها

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

کارت

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) طرح تست

روشنایی: اتاق تاریک/نور روز/خیابان شب.
دستگاه ها: OLED و IPS، تلفن همراه/دسکتاپ، تراکم های مختلف.
A11y: جستجوگر کنتراست، صفحه کلید عبور، خوانایی متغیرهایی.
ادراک: آزمون AB «خستگی چشم» و خطاهای ورودی در شب.
عملکرد: معیارهای RUM (INP/CLS) پس از شامل یک موضوع تاریک ؛ بار GPU (اثرات تاری/سایه).

16) معیارهای کیفیت

کنتراست Violations/1k عناصر (هدف: → 0).
میزان شکایت در «بیش از حد تاریک/روشن».
تکمیل جلسه شبانه (معیارهای رفتاری توسط جلسه 22: 00-06: 00).
INP/CLS p75 در حالت تاریک در مقابل نور (نه بدتر از پایه).
انتخاب کردن در حالت تاریک و حفظ کاربران که یک موضوع را انتخاب می کنند.

17) چک لیست راه اندازی

• پالت تم تاریک با 4-5 سطح سطح
• کنتراست متن/آیکون ها/مرزها مربوط به WCAG AA است
• سبک های تمرکز قابل مشاهده و حالت (شناور/فعال/غیر فعال)
• آرم/آیکون/عکس اقتباس شده، ماسک در عکس اضافه شده است
• نمودار - شبکه های خاموش، زیرنویس های قابل خواندن، ردیف های غیر سمی
• سوئیچ نور/تاریک/سیستم، صرفه جویی در انتخاب بدون «فلش»
• احترام به «prefers-color-scheme» و «prefers-reduced-motion»
• RUM/perf-dashboard، هشدارهای رگرسیون

18) برنامه پیاده سازی (3 تکرار)

تکرار 1 - بنیاد (1-2 هفته)

پالت/نشانه، سطوح پایه (پایه/elev1/elev2)، متن/مرزها، دکمه ها/زمینه ها/جداول، سوئیچ موضوع.

تکرار 2 - دانه دانه (3-4 هفته)

نمودارها و تصاویر در تاریکی، ماسک در عکس، تمرکز/حالت ها، انیمیشن ها با توجه به کاهش حرکت، perf-audit.

تکرار 3 - بهینه سازی (مداوم)

حالت AMOLED به عنوان یک گزینه، کنتراست تنظیم دقیق، تست قابلیت استفاده در شب، مقایسه نور در مقابل Dark RUM، ممیزی منظم برند/UX.

19) مینی سوالات متداول

آیا باید یک پس زمینه سیاه خالص ایجاد کنم ؟

برای UI، خاکستری تیره عمیق بهتر است ؛ ترک خالص # 000 با «حالت AMOLED» گزینه.

آیا باید اشباع لهجه ها را افزایش دهم ؟

در تاریکی - معمولا، در مقابل، کمی روشن و کاهش اشباع به طوری که به «درخشش».

در مورد تصاویر بنر چطور ؟

یک پس زمینه/ماسک تیره اضافه کنید، کنتراست متن و آرم را بررسی کنید.

مجموع

تم تاریک یک تغییر رنگ نیست، بلکه یک حالت طراحی جداگانه است: یک پالت متفکر، سطح سطح، خوانایی، حالت های صحیح، گرافیک و رسانه های سازگار و احترام به تنظیمات سیستم. تکیه بر نشانه ها، کنترل کنتراست و عملکرد - و حالت تاریک یک ابزار مناسب، پایدار و زیبا برای کاربران شب و روز است.