سیستم‌های رنگی حالت تاریک: چطور پالتی بسازیم که ساعت ۲ بامداد هم کار کند
راهنمای عملی سیستم‌های رنگی حالت تاریک. مدل ارتفاع سطوح، قانون کم‌کردن اشباع، کالیبراسیون رنگ تأکیدی، و هفت برندی که در ۲۰۲۶ تمیزترین پالت‌های تاریک را عرضه میکنند.
سیستم‌های رنگی حالت تاریک: چطور پالتی بسازیم که ساعت ۲ بامداد هم کار کند
حالت تاریک یک سیستم موازی است، و محصولاتی که فقط یک کلید روی حالت روشن می‌زنند همان‌هایی‌اند که وقتی چراغ‌ها خاموش میشوند خراب به نظر می‌رسند.
کل مقاله در یک جمله همین است. دلیل شکست بیشتر حالتهای تاریک دقیق‌تر است: طراح‌ها سراغ «پالت روشن را معکوس کن» می‌روند و به دشت‌های تخت خاکستری روی خاکستری یا مرجانی الکتریکی می‌رسند که شبکیه را می‌سوزاند. راه‌حل معماری است، نه ظاهری. یک سیستم موازی بسازید با مدل ارتفاع خودش، قوانین کم‌کردن اشباع خودش و کالیبراسیون رنگ تأکیدی خودش، آن‌وقت نتیجه عمدی به نظر می‌رسد، چون واقعاً عمدی است.
حالت تاریک یک سیستم موازی است، نه یک معکوسسازی
پالت روشن شما توکنهای پسزمینه، سطح، حاشیه، متن و رنگ تأکیدی دارد. پالت تاریک شما به همان توکن‌ها نیاز دارد، و مقادیرش معکوس مقادیر روشن نیست. کروما در روشنایی پایین رفتار متفاوتی دارد. جابه‌جایی‌های رنگمایه در مرز ادراکی رخ میدهد. چیزی که در حالت روشن با L 0.62 مرجانی تمیز دیده می‌شود، در حالت تاریک با L 0.72 روی سطحی نزدیک به سیاه به نئونی لرزان تبدیل می‌شود.
تیم‌هایی که حالت تاریک تمیز عرضه میکنند دست به یک کلید ساده نمی‌زنند. آنها پالت دوم را طراحی میکنند، آن را به همان لایه توکن معنایی وصل میکنند و دو پالت را با یک کلید حالت در ریشه تم به هم متصل میکنند. کار بیشتری می‌برد. و تنها رویکردی است که شما را شرمنده نمی‌کند.
مدل ارتفاع سطوح
پسزمینه. سطح. سطح بالابرده. سطح رویه. هر رابط طراحی حالت تاریک که کار میکند این چهار لایه را دارد، و حذف لایه سوم شایع‌ترین دلیل تخت به نظر رسیدن رابط‌های تاریک است.
در حالت روشن ارتفاع بدیهی است: کارت‌های سفید روی پسزمینههای خاکستری می‌نشینند، سایه ارزان است و عمق مجانی. در حالت تاریک سایه‌ها روی سطوح تیره محو میشوند. ارتفاع باید در روشنایی خود سطح زندگی کند. هر لایه یک گام کوچک و حساب‌شده بالاتر در روشنایی است، نه یک جهش.
این چهار لایه انتخاب زیبایی‌شناختی نیستند. ساختار باربر هستند. هر کامپوننت در سیستم شما روی یکی از این لایه‌ها می‌نشیند، و خوانایی هر جفت متن روی سطح به جایگاه آن در این پشته بستگی دارد.
پسزمینه کف را تعیین میکند
پسزمینه عمیق‌ترین لایه است. قانون: هرگز از سیاه خالص (oklch(0 0 0)) استفاده نکنید. از یک نزدیک‌به‌سیاه با ته‌رنگ ملایم در حدود ۸ تا ۱۰ درصد روشنایی استفاده کنید. ته‌رنگ تقریباً همیشه گرم است، چون سیاه‌های سرد ارزان‌تر و سردتر از شأن محصول به نظر می‌رسند.
مقداری مثل oklch(0.10 0.012 30) یک ذغالی گرم و تیره میدهد که روی هر نمایشگری «سیاه» خوانده می‌شود اما حس خلأ مرده سیاه خالص را ندارد. کروما ۰.۰۱۲ و زاویه رنگمایه ۳۰ درجه (یک تمایل ملایم به گرم) کافی است. بیشتر شود گل‌آلود می‌شود. کمتر شود بی‌جان.
سطح، محتوا را نگه می‌دارد
سطح لایه‌ای است که بیشتر محتوا روی آن می‌نشیند، کمی بالاتر از پسزمینه. گام روشنایی از پسزمینه به سطح معمولاً ۳ تا ۵ واحد در OKLCH است. این فاصله اولین سیگنالی است که چشم می‌خواند: محتوا اینجا زندگی میکند و پسزمینه پشت آن است.
oklch(0.14 0.010 30) در برابر oklch(0.10 0.012 30) بدون حاشیه یا سایه جداسازی بصری کافی میدهد. کروما کمی کم می‌شود چون با بالا رفتن روشنایی در سطوح تیره، کروما باید عقب بکشد تا به پسزمینه گل‌آلود نشت نکند. این در زمان رندر ظریف است و اگر نادیده‌اش بگیرید کاملاً غلط.
سطح بالابرده و سطح رویه
سطوح بالابرده کارت‌ها و پنل‌ها را نگه می‌دارند. سطوح رویه مودال‌ها و شیت‌ها را. پیشروی روشنایی ادامه پیدا میکند: سطح بالابرده تقریباً در oklch(0.18 0.008 30) و سطح رویه در oklch(0.22 0.007 30). با هر گام کروما کم می‌شود چون بالاتر در پشته یعنی نزدیک‌تر به بیننده، و آن سطوح باید تمیز حس شوند.
دلیل اینکه بیشتر رابط‌های تاریک به فرنی خاکستری تخت تبدیل میشوند این است که طراح‌ها از دو لایه استفاده میکنند: پسزمینه و سطح. کارت‌ها روی پس‌زمینه‌اند، متن روی سطح، و همه چیز در یک عمق خوانده می‌شود. لایه سوم و چهارم را اضافه کنید و رابط بی‌درنگ بدون حتی یک سایه خوانایی پیدا میکند.
قانون کم‌کردن اشباع
رنگهای اشباع‌شده‌ای که در روشنایی کار میکنند شب می‌سوزانند. قانون: رنگهای تأکیدی را ۱۵ تا ۲۵ درصد کم‌اشباع کنید و کرومای متن و حاشیه را حتی بیشتر پایین بیاورید. این درباره کم‌نور کردن برند نیست. درباره نحوه پردازش کروما توسط چشم در نور محیط کم است.
در نور محیط زیاد (دفتر کار ظهر)، کرومای زنده پرانرژی خوانده می‌شود. در نور محیط کم (میز کار نیمه‌شب)، همان کروما تهاجمی، هاله‌دار و از نظر فیزیکی ناراحت‌کننده خوانده می‌شود. راه‌حل ترسیدن از رنگ نیست. کالیبره کردن آن است. برند قابل تشخیص می‌ماند. محصول دیگر آزار نمیدهد.
چرا متن سفید خالص اشتباه است
سفید خالص روی نزدیک‌به‌سیاه کنتراست بالا نیست، کنتراست بیش از حد است. اثر هاله، یعنی نفوذ متن روشن به محیط تیره اطرافش، یک پدیده نوری مستند است که خواندن رابط‌های تاریک را سخت‌تر میکند، نه آسانتر.
مقدار درست برای متن اصلی در حالت تاریک حدود ۹۰ تا ۹۵ درصد روشنایی با کمی ته‌رنگ گرم است. oklch(0.93 0.005 60) «سفید» خوانده می‌شود اما هاله ندارد. متن ثانویه به oklch(0.70 0.010 60) می‌رسد، هنوز در اندازه متن بدنه خوانا و از نظر بصری نسبت به متن اصلی عقب‌نشسته. سفید شکسته مقداری است که طراح‌ها بیش از همه در آن اشتباه میکنند، چون شبیه سازش است و در واقع مقدار درست است.
کالیبراسیون رنگ تأکیدی برند را قابل تشخیص نگه می‌دارد
رنگهای تأکیدی برند باید در حالت تاریک خوانده شوند بی‌آنکه هویتشان را از دست بدهند. کالیبراسیون یک بالا بردن روشنایی به‌علاوه یک کاهش کروماست، نه تغییر رنگمایه. اگر رنگ تأکیدی حالت روشن oklch(0.62 0.22 25) باشد، رنگ تأکیدی حالت تاریک oklch(0.72 0.17 25) است. همان رنگمایه. روشنایی بالاتر تا روی سطوح تیره بدرخشد. کروما پایین‌تر تا هاله نزند.
اشتباه این است که حالت تاریک را جایی بدانیم که رنگهای تأکیدی کم‌نور میشوند. کم‌نور کردن شناخت برند را می‌کشد. بالا بردن روشنایی و کاهش کروما حس پالت رنگ برند را حفظ میکند و از سوزش بصری جلوگیری میکند. کاربر تنظیم را متوجه نمی‌شود. متوجه می‌شود که محصول خوب به نظر می‌رسد.
بررسی کنتراستی که WCAG از دست میدهد
نسبت‌های کنتراست در WCAG 2.1 خیلی از رابط‌های تاریک زشت را رد میکنند. نسبت ۴.۵:۱ بین یک سطح تیره و متن خاکستری کم‌رنگ میتواند از WCAG بگذرد و در شرایط واقعی محیط واقعاً سخت خوانده شود. بررسی دوم APCA است که ادراک روشنایی را دقیق‌تر مدل میکند، به‌ویژه در تمایز روشن-روی-تیره.
بعد از APCA، آزمون چشمی را انجام دهید. شیمر لرزشی است که وقتی دو رنگ با روشنایی مشابه اما کروماهای متفاوت کنار هم قرار می‌گیرند می‌بینید. هاله نشت عناصر روشن به محیط تیره اطرافشان است. بلوم درخشش ادراک‌شده روی رنگهای تأکیدی اشباع است. وجود هر یک از این‌ها یعنی آن جفت رنگ مردود است، صرفنظر از نسبت. مقادیر را درست کنید، نه نسبت را. برای بررسی عمیق‌تر مکانیک کنتراست رنگ دسترس‌پذیر، روش‌شناسی کامل موارد حاشیه‌ای را پوشش میدهد که ممیزی حالت روشن آنها را نشان نمیدهد.
هفت برند با پالت تاریک تمیز
Linear، Notion، Vercel، Stripe، GitHub، Arc و Raycast هرکدام حالت تاریک را متفاوت حل میکنند. الگوهای مشترکشان همان‌هایی‌اند که ارزش دزدیدن دارند.
| برند | مدل سطح | راهبرد رنگ تأکیدی | چه چیزی را درست انجام میدهند |
|---|---|---|---|
| Linear | چهارلایه واقعی، گامهای فشرده | بنفش با روشنایی بالاتر، کروما ~0.15 | گامها آن‌قدر فشرده‌اند که عمق یکپارچه خوانده می‌شود |
| Notion | سه‌لایه با رویه | استفاده حداقلی از رنگ تأکیدی در تاریک | تقریباً بدون کروما، همه‌اش عمق |
| Vercel | دوگانه (پسزمینه + بالابرده) | فقط سفید | بی‌رحمانه ساده؛ جواب میدهد چون تعهد کامل دارد |
| Stripe | چهارلایه، ته‌رنگ گرم | آبی کالیبره‌شده، نه کاهش‌یافته | داده‌های متراکم در هر لایه تمیز خوانده میشوند |
| GitHub | سه تم نام‌دار (تاریک، کم‌نور، کنتراست بالا) | آبی-سبز، کم‌اشباع | «کم‌نور» پیشفرض درست است |
| Arc | ته‌رنگ سفارشی برای هر فضا | رنگمایه کاملاً تعریف‌شده توسط کاربر | ارتفاع از جابه‌جایی رنگمایه، نه روشنایی |
| Raycast | دولایه با محوشدگی سنگین | رنگ تأکیدی نارنجی، شدیداً روشن‌تر | محوشدگی ارتفاع ضمنی می‌سازد |
Linear پیاده‌سازی مرجع است. گامهای سطح آن‌قدر باریک‌اند که رابط مثل یک میدان تیره واحد با عمق واقعی خوانده می‌شود. رنگ تأکیدی بنفش بدون اینکه هرگز بسوزاند بهعنوان بنفش Linear قابل تشخیص است. سلسله‌مراتب تایپوگرافی به گامهای روشنایی در توکنهای متن تکیه دارد، نه فقط اندازه.
Vercel ثابت میکند مدل دوگانه اگر کاملاً به آن متعهد باشید جواب میدهد. بدون سطح سوم. بدون حالتهای خاکستری. همه‌چیز یا پسزمینه عمیق است یا سطح کمی بالابرده، و تعهد تک‌رنگ آن را شبیه یک تصمیم طراحی میکند نه یک محدودیت. بیشتر تیم‌ها نمی‌توانند این کار را بکنند چون رنگهای وضعیت، تصویرسازی و لحظه‌های برندی دارند که به ارتفاع نیاز دارند.
گزینه «Dimmed» در GitHub بینش درست است که روی دامنه اشتباه اعمال شده. آن را بهعنوان یک نسخه تم ساخته‌اند، اما درس واقعی این است که سطح تیره با ته‌رنگ گرم برای مطالعه طولانی راحت‌تر از پیشفرض سردتر است. هر حالت تاریک باید بهطور پیشفرض گرم باشد.
حالت تاریکی می‌خواهید که ساعت ۲ بامداد عمدی به نظر برسد، نه ظهر معکوس‌شده؟ Brainy سیستم‌های رنگی تاریک موازی را با مدل ارتفاع، کالیبراسیون رنگ تأکیدی و نقشه توکن OKLCH آماده انتقال به Figma و CSS طراحی میکند. Brainy را استخدام کنید.
نقشه توکن کاربردی حالت تاریک
نقشه توکن زیر یک حالت تاریک واقعی را در مختصات رنگ OKLCH عرضه میکند. پایهها مقادیر خام‌اند. معناییها نقش‌ها. پایهها را بهعنوان مقادیر خام در یک مجموعه متغیر Figma بگذارید. معناییها را به‌صورت alias به پایهها نگاشت کنید. همین معماری دولایه کل سیستم توکن است.
| توکن | نقش | مقدار OKLCH | تقریب Hex |
|---|---|---|---|
--color-bg | کف پسزمینه | oklch(0.10 0.012 30) | #191512 |
--color-surface | سطح پیشفرض محتوا | oklch(0.14 0.010 30) | #221e1a |
--color-surface-elevated | کارت‌ها، پنل‌ها | oklch(0.18 0.008 30) | #2c2723 |
--color-surface-overlay | مودال‌ها، منوها، شیت‌ها | oklch(0.22 0.007 30) | #35302c |
--color-text-primary | متن بدنه، سرتیترها | oklch(0.93 0.005 60) | #edeae5 |
--color-text-secondary | کپشن‌ها، برچسب‌ها، متا | oklch(0.70 0.010 60) | #b0a89e |
--color-text-disabled | حالتهای غیرفعال | oklch(0.45 0.005 60) | #6e6860 |
--color-border-subtle | جداکننده‌ها، خطوط مویی | oklch(0.22 0.008 30) | #36302b |
--color-border-default | حاشیه ورودی‌ها، حاشیه کارت‌ها | oklch(0.28 0.010 30) | #433d37 |
--color-accent | CTA اصلی، حالتهای فعال | oklch(0.72 0.17 25) | #e0816a |
--color-accent-muted | هاور، رنگ تأکیدی ثانویه | oklch(0.65 0.12 25) | #c27060 |
--color-accent-subtle | پسزمینه با ته‌رنگ پشت عناصر تأکیدی | oklch(0.16 0.04 25) | #2a1e1a |
رنگمایه در سراسر سیستم بین ۲۵ تا ۳۰ درجه است (قلمرو مرجانی گرم). سیستم منسجم است چون دما از کف تا سقف یکسان است. اگر رنگمایه را به ۲۵۰ درجه ببرید پالتی شبیه Linear می‌گیرید. اگر به ۲۰۰ درجه ببرید پالتی نزدیک به Vercel. ساختار تغییر نمی‌کند. فقط رنگمایه تغییر میکند.
برای پیاده‌سازی، کل جدول به custom propertyهای CSS روی :root[data-theme="dark"] نگاشت می‌شود. در Figma هر ردیف یک متغیر در مجموعه حالت «Dark» است. همین معماری دو مجموعه‌ای است که یک سیستم طراحی را در سطوح مختلف مقیاس‌پذیر میکند.
تغییر حالت، پیاده‌سازی‌ای که چشمک نمی‌زند
تغییر حالت بدون چشمک تم اشتباه با تنظیم color scheme روی عنصر html پیش از اجرای هر JavaScript حل می‌شود. هر رویکرد دیگری حداقل در یک حالت حاشیه‌ای غلط است.
الگو: localStorage را برای یک ترجیح ذخیره‌شده در یک تگ <script> درون‌خطی مسدودکننده در <head> بخوانید. data-theme="dark" یا data-theme="light" را همزمان روی عنصر html اعمال کنید، پیش از رندر شدن CSS که به custom propertyها ارجاع میدهد. بدون React. بدون useEffect. بدون چشمک.
<script>
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.dataset.theme = saved ?? (prefersDark ? 'dark' : 'light');
</script>
آن اسکریپت عمداً مسدودکننده است. پیش از رندر اجرا می‌شود. چشمک محتوای بدون استایل ناشی از اعمال تم در JavaScript بعد از اولین رندر است، و این یک اسکریپت مسدودکننده آن را کاملاً حذف میکند.
ترجیح سیستم، پیشفرض و بازنویسی
پیشفرض باید از ترجیح سیستم‌عامل پیروی کند. بازنویسی کاربر باید در localStorage ماندگار شود. کلید باید سه حالت داشته باشد: سیستم، روشن و تاریک.
کلید دوحالته یک اشتباه طراحی است. کاربری که سیستم‌عاملش را روی تاریک گذاشته و می‌خواهد اپ دنبالش بیاید نمی‌خواهد کلید دومی را مدیریت کند. کلید به حالت «سیستم» نیاز دارد که بازنویسی ذخیره‌شده را پاک کند و بگذارد ترجیح سیستم‌عامل رهبری کند. بیشتر اپ‌ها دو حالت می‌سازند و بعد هر بار که کسی تم سیستم‌عاملش را عوض میکند و تعجب میکند چرا اپ دنبالش نیامد، یک تیکت پشتیبانی می‌گیرند.
FAQ
آیا استفاده از رنگهای تأکیدی در حالت تاریک به عمر باتری OLED آسیب میزند؟
رنگهای تأکیدی در یک رابط معمولی سطح کمی را میپوشانند. صرفهجویی باتری حالت تاریک روی OLED تقریباً بهطور کامل از سطوح تیره میآید. یک دکمه CTA مرجانی روی پسزمینه تیره مصرف باتری را بهطور معناداری تغییر نمیدهد. پسزمینههای سیاه خالص مهماند. تصویرسازیهای اشباع تمامصفحه مهماند. یک دکمه مهم نیست.
آیا می‌توانم رنگ برند حالت روشن را مستقیم بهعنوان رنگ تأکیدی حالت تاریک استفاده کنم؟
بدون کالیبراسیون نه. اگر رنگ برند حالت روشن شما در OKLCH روی L 0.55 تا 0.65 باشد، استفاده مستقیم از آن روی سطح تیره یا ضعیف عمل میکند (برای درخشیدن بیش از حد کم‌نور) یا هاله میزند (برای نور محیط تیره بیش از حد زنده). روشنایی را ۸ تا ۱۲ واحد بالا ببرید. کروما را ۲۰ تا ۳۰ درصد پایین بیاورید. رنگمایه را نگه دارید. این رنگ تأکیدی کالیبره‌شده حالت تاریک است.
حداقل حالت تاریک قابلارائه برای سیستمی که هنوز ندارد چیست؟
پسزمینه، سطح، سطح بالابرده، متن اصلی، متن ثانویه، رنگ تأکیدی. شش توکن. کامل نیست، اما یک سیستم است. هر کامپوننت میتواند به یکی از این شش مقدار نگاشت شود، مدل ارتفاع برای گسترش آماده است و میتوانید بدون شرمندگی عرضهاش کنید. از همینجا شروع کنید، نه با صد توکن و بدون ساختار.
آیا حالت تاریک تولیدشده خودکار هرگز قابل قبول است؟
برای پروتوتایپها، ابزارهای داخلی و محصولات با یک طراح فعال، معکوسسازی خودکار با تنظیم اشباع بهعنوان نقطه شروع قابل قبول است. بهعنوان حالت تاریک عرضهشده برای محصولی با استانداردهای برند و کاربران واقعی، نه. حالتهای تاریک خودکار روی رنگهای تأکیدی شکست میخورند، روی تصویرسازی شکست میخورند و روی حالتهای کامپوننت شکست میخورند. آنها یک طرح اولیهاند، نه یک سیستم تمامشده.
آیا OKLCH ساخت حالت تاریک را آسانتر میکند؟
بهطرز چشمگیری. محور روشنایی یکنواخت ادراکی در OKLCH یعنی گامهای روشنایی بین لایههای ارتفاع در همه رنگمایهها همانطور که انتظار میرود رفتار میکنند. در HSL، یک گام ۵ واحدی روی نارنجی با یک گام ۵ واحدی روی آبی فرق دارد. در OKLCH ندارد. ساختن مدل ارتفاع در OKLCH یعنی گامها صرفنظر از رنگمایه تأکیدی هماهنگ حس میشوند. استدلال کامل برای رنگ OKLCH ریاضیات را در عمق پوشش میدهد.
آیا توکنهای معنایی باید بین روشن و تاریک فرق کنند یا فقط پایهها؟
پایهها فرق میکنند. معناییها یکسان میمانند. --color-surface در هر دو حالت یعنی «سطح پیشفرض محتوا». پایهای که به آن اشاره میکند در حالت تاریک متفاوت است. این همان فلسفه معماری دولایه است. کامپوننتها به معناییها ارجاع میدهند. معناییها به پایهها. کلید حالت پایهها را دوباره تخصیص میدهد. کامپوننتها خودکار و درست بهروز میشوند.
تغییری که سیستم‌های حالت تاریک واقعاً باز میکنند
یک حالت تاریک واقعی یک سطح طراحی موازی است. نه یک فکر بعدی. نه یک کلید تنظیمات. یک سطح دوم با ساختار خودش، محدودیت‌های خودش و تصمیم‌های صنعتی خودش. تیم‌هایی که این‌طور با آن برخورد میکنند محصولاتی عرضه میکنند که ساعت ۲ بامداد عمدی به نظر می‌رسند. تیم‌هایی که فقط یک کلید می‌زنند محصولاتی عرضه میکنند که انگار کسی فراموش کرده کارشان را تمام کند.
مدل ارتفاع بنیان است. قانون کم‌کردن اشباع و کالیبراسیون رنگ تأکیدی لایه صنعت‌اند. نقشه توکن OKLCH پیاده‌سازی است. کلید سه‌حالته با تغییر حالت بدون چشمک شرط عرضه است. هر قطعه به دیگری وصل است. اگر نتیجه خوب می‌خواهید هیچ‌کدام اختیاری نیست.
سیستم موازی را بسازید. نقشه را عرضه کنید. تفاوتش پیداست.
حالت تاریکی می‌خواهید که ساعت ۲ بامداد عمدی به نظر برسد، نه ظهر معکوس‌شده؟ Brainy سیستم‌های رنگی تاریک موازی را با مدل ارتفاع، کالیبراسیون رنگ تأکیدی و نقشه توکن OKLCH آماده انتقال به Figma و CSS طراحی میکند. Brainy را استخدام کنید.
در حال ذخیره در drafts/dark-mode-color-systems.md.
Want a dark mode that looks intentional at 2 a.m. instead of inverted at noon? Brainy designs parallel dark color systems with the elevation model, accent calibration, and the OKLCH token map ready to drop into Figma and CSS.
Get Started
