طراحی تم تیره؛ فقط برعکس کردن رنگ‌ها نیست

ساده‌ترین راه ساختن تم تیره این است: سفید را سیاه کن، سیاه را سفید. نتیجه معمولاً رابطی است که چشم را خسته می‌کند، رنگ برندش جیغ می‌زند و سایه‌هایش ناپدید شده‌اند.

این سایت پیش‌فرض تیره است و دیزاین‌سیستم کاشی هر دو تم را دارد. این‌ها قاعده‌هایی است که در عمل جواب داده‌اند.

#۱. سیاه مطلق نه

پس‌زمینه‌ی #000000 با متن سفید، کنتراست بیش از حد دارد و در صفحه‌های OLED هنگام اسکرول لکه‌ی تیره می‌سازد. یک خاکستری خیلی تیره، کمی متمایل به رنگ برند، چشم‌نوازتر است. این سایت از #0b0b10 استفاده می‌کند.

#۲. ارتفاع با روشنایی، نه سایه

در تم روشن، کارتی که بالاتر است سایه دارد. در تم تیره سایه به‌سختی دیده می‌شود، پس سطح بالاتر، کمی روشن‌تر است: پس‌زمینه، کارت، منوی بازشو و پنجره، هر کدام یک پله روشن‌تر از قبلی. یک حاشیه‌ی ۱ پیکسلی کم‌رنگ هم مرز سطح‌ها را روشن می‌کند.

#۳. رنگ برند را آرام کنید

رنگی که روی پس‌زمینه‌ی سفید متعادل است، روی پس‌زمینه‌ی تیره جیغ می‌زند. در تم تیره از درجه‌ی کمی روشن‌تر و کم‌اشباع‌تر همان رنگ استفاده کنید، مثلاً ۴۰۰ به‌جای ۶۰۰. برای پس‌زمینه‌های رنگی (مثل هشدار)، رنگ را با درصد کم روی سطح ترکیب کنید، نه رنگ کامل.

#۴. متن، نه سفید مطلق

متن اصلی خاکستری خیلی روشن (مثل #ececf2)، متن دوم کم‌رنگ‌تر و متن سوم کم‌رنگ‌تر از آن. ولی هر سه باید حداقل کنتراست ۴٫۵ به ۱ را با سطح زیرشان داشته باشند. این را نسنجیده رها نکنید؛ متن کم‌رنگ در تم تیره رایج‌ترین مشکل دسترس‌پذیری است.

#۵. تصویرها و آیکون‌ها

• آیکون‌ها با currentColor خودشان رنگ متن را می‌گیرند و در هر دو تم درست‌اند.
• تصویرهای با پس‌زمینه‌ی سفید در تم تیره مثل یک چراغ روشن می‌شوند؛ یک کادر یا حاشیه‌ی گرد کمک می‌کند. تصویرهای مقاله‌های همین سایت عمداً پس‌زمینه‌ی کرم دارند و در قاب گرد نشسته‌اند.
• نمودارها پالت جدا برای تم تیره لازم دارند.

#۶. هر دو تم از یک کد

با توکن‌های معنایی، تم تیره فقط یک نقشه‌ی دیگر از همان نام‌هاست. کامپوننت‌ها هیچ‌وقت رنگ خام نمی‌خوانند و هیچ کدی برای تم تیره جدا نوشته نمی‌شود:

[data-theme="dark"]  { --x-bg-primary: #0b0b10; --x-bg-secondary: #14141b; --x-text-primary: #ececf2; }
[data-theme="light"] { --x-bg-primary: #ffffff; --x-bg-secondary: #f6f6f8; --x-text-primary: #16151a; }

و به ترجیح سیستم کاربر احترام بگذارید: prefers-color-scheme برای پیش‌فرض، و یک کلید برای تغییر دستی که انتخاب کاربر را به خاطر بسپارد.

#چک‌لیست

• پس‌زمینه خاکستری خیلی تیره، نه سیاه مطلق.
• سطح بالاتر روشن‌تر، با حاشیه‌ی کم‌رنگ.
• رنگ برند روشن‌تر و کم‌اشباع‌تر.
• همه‌ی متن‌ها کنتراست ۴٫۵ به ۱ یا بیشتر.
• هر دو تم را برای هر کامپوننت ببینید، نه فقط تم پیش‌فرض.