گفت‌وگو
آکادمی کوانتا

ما هر روز در حال یاد گرفتن هستیم و مطالبی که فکر می‌کنیم مفید است با شما به اشتراک می‌گذاریم.

ورود به صفحه آکادمی
اسکیما
تفاوت سئو و گوگل ادز
الگورتیم گوگل
Screenshot
نمونه کار سایت اندولیفت سنتر
drrabet
پروژه_ی جدید
هنر خاص بودن به سبک کوانتا
مشاهده همه نمونه کارها
دارک مود چیست؟

دارک مود چیست؟

دارک مود (Dark Mode یا Night Mode) یعنی نمایش رابط کاربری با پس زمینه های تیره و متن/عناصر روشن. این انتخابِ تم، چند سال اخیر از یک قابلیت جانبی به یک انتظار عمومی تبدیل شده: کاربران دوست دارند در محیط های کم نور چشمشان اذیت نشود، توسعه دهندگان به صرفه جویی انرژی روی نمایشگرهای OLED اشاره می کنند، و طراحان هم از زیبایی و تمرکز بصری آن می گویند.

اما دارک مود فقط «سیاه کردن پس زمینه» نیست. اگر بی برنامه اجرا شود، خوانایی را خراب می کند، کنتراست ها می ریزد، نمودارها اشتباه خوانده می شوند و تجربه ی کاربری افت می کند. این راهنما، با رویکردی عملی، همه چیز را از صفر تا صد پوشش می دهد: مزایا و معایب، اصول رنگ و تایپوگرافی، دسترس پذیری، الگو های طراحی سایت ، پیاده سازی در وب و موبایل، مدیریت تصاویر و آیکون ها، پیشگیری از خطاهای رایج، تست و نگهداری.

  • درجه سختی: مقدماتی

اشتراک‌گذاری

نویسنده
Picture of آژانس کوانتا
آژانس کوانتا
سایر مطالب

درخواست مشاوره یا خدمات

فرم صفحات داخلی بلاگ

دارک مود دقیقاً چیست؟

حالت تیره یک «تم رنگ» است که روشنایی کلی رابط را پایین می آورد: پس زمینه ها تیره، متن ها روشن تر، و سطوح میانی با خاکستری های هوشمند تعریف می شوند. دو ویژگی کلیدی آن:

  1. تقلیل روشنایی ادراکی: کاهش نور صفحه در محیط های کم نور، که می تواند خستگی چشم را کم کند.

  2. تعادل کنتراست کنترل شده: متن باید واضح بماند، اما «سفیدِ کورکننده» روی «مشکی مطلق» معمولاً ایده آل نیست.

تفاوت «دارک مود» با «تم مشکی محض»

  • مشکی محض (#000000) روی نمایشگرهای OLED می تواند پیکسل ها را خاموش کند و مصرف انرژی را پایین بیاورد، اما برای متن های بلند، این کنتراستِ ۱۰۰٪ گاهی باعث «هاله/هالیشن» و خستگی می شود.

  • تیرهٔ نرم (#121212 یا خاکستری های خیلی تیره) معمولاً خوانایی بهتری می دهد، به خصوص برای مقاله های طولانی.

مزایا و محدودیت ها

مزایا

  • کاهش خستگی چشم در نور کم: پس زمینه ی تیره با متن روشن، تابش کلی را پایین می آورد.

  • صرفه جویی انرژی در OLED: پیکسل های سیاه خاموش اند؛ رنگ های تیره انرژی کمتری می گیرند.

  • زیبایی و تمرکز: در بسیاری از اپ ها (کد ادیتور، ابزارهای پرو)، تمرکز روی محتوا بیشتر می شود.

  • هم خوانی با تنظیمات سیستم: کاربران انتظار دارند برنامه ها به تنظیم «حالت تیره سیستم» احترام بگذارند.

محدودیت ها

  • خوانایی در نور زیاد: در فضای باز یا محیط خیلی روشن، دارک مود می تواند بدخوان شود.

  • تصاویر و نمودارها: پالِت های داده و آیکون های شفاف اگر برای تیره تنظیم نشوند، گم می شوند.

  • کنتراستِ بیش ازحد یا ناکافی: سفید خیلی روشن روی مشکی یا خاکستری کم کنتراست، هر دو مشکل سازند.

  • دسترسی پذیری: افراد با برخی اختلالات بینایی ممکن است در حالت تیره عملکرد بدتری داشته باشند؛ پس همیشه امکان سوییچ لازم است.

دارک مود دقیقاً چیست؟

اصول طراحی رنگ در حالت تیره

از «مشکی مطلق» فاصله بگیرید

رنگ پایه ی پس زمینه را چیزی مثل #0B0B0B تا #121212 یا خاکستری خیلی تیره انتخاب کنید. سطح های بالاتر را با اختلاف های کوچکِ روشنایی بسازید (Elevation).

با HSL فکر کنید

کار با HSL یا OKLCH باعث می شود کنترل سریعی بر روشنایی (L) داشته باشید. یک نمونه ی پایه:

  • پس زمینهٔ اصلی: hsl(0 0% 7%)

  • سطح کارت: hsl(0 0% 10%)

  • مرزها/دیوايدر: hsl(0 0% 18%)

  • متن اصلی: hsl(0 0% 92%)

  • متن ثانویه: hsl(0 0% 70%)

  • لینک/اکشن (آبی): hsl(220 85% 65%) با هاور hsl(220 85% 72%)

مراقب اشباع رنگ باشید

روی پس زمینه ی تیره، رنگ های اشباع به راحتی «نارنجی/نئونی» به نظر می رسند. کمی اشباع را کم کنید و روشنایی شان را برای کنتراست کافی بالا ببرید.

کنتراست را علمی بسنجید

برای متن معمولی، نسبت کنتراست بالای ۴٫۵:۱ هدف گذاری کنید. متن های بزرگ می توانند ۳:۱ داشته باشند، اما برای بدنه ی متن بهتر است استاندارد سخت گیرانه تری اعمال شود. از خاکستری خیلی کم رنگ برای متن ثانویه استفاده نکنید.

تایپوگرافی در دارک مود

  • سایز و وزن: فونت کمی بزرگ تر یا وزن ۴۰۰–۵۰۰ برای متن های بدنه روی تیره بهتر جواب می دهد.

  • ارتفاع خط (line-height) را کمی بالا بگیرید تا در پس زمینه ی تیره «چسبندگی بصری» ایجاد نشود.

  • سایه ی متن یا آنتی الیاسینگ؟ معمولاً لازم نیست؛ اگر هم استفاده می کنید بسیار ظریف.

  • فاصله ی حروف را برای فونت های باریک کمی افزایش دهید تا وضوح بالاتر شود.

الگوهای رایج در UI تیره

  • سطوح لایه ای (Layering/Elevation): هرچه کارت/مودال بالاتر است، اندکی روشن تر یا با مرز واضح تر.

  • مرزهای ظریف: خطوط ۱px با کنتراست ملایم (hsl(0 0% 18%)) برای جداسازی سکشن ها.

  • فوکوس/هوور واضح: در تیره، حالت های تعاملی باید قابل تشخیص باشند؛ بوردر/گلو/پس زمینه ی موقتی.

  • اسکرول بار و فرم ها: اگر سیستم اجازه می دهد، color-scheme: dark; به فرم ها بدهید تا کنترل ها بومیِ تیره شوند.

نمودارها و داده نما

  • پس زمینه ی نمودار: تیره ی ملایم، نه مشکیِ خالص.

  • شبکه/گرید: خطوط خیلی کمرنگ که شلوغی ایجاد نکنند.

  • پالت سری ها: رنگ های درخشان با روشنایی مناسب، اما اشباع کنترل شده.

  • حالت های کوررنگی: لازمه که هر سری با الگوی خط/نقطه یا شکل متفاوت هم قابل تشخیص باشد.

دارک مود

تصاویر، آیکون ها و لوگوها

  • آیکون های تک رنگ: ست آیکون روشن (Light) و تیره (Dark) داشته باشید.

  • لوگوها: نسخه ی معکوس (Reverse) یا حاشیه ی نازک برای دیده شدن روی تیره.

  • تصاویر با پس زمینه ی سفید: در کارت های تیره، قاب یا سایه ی داخلی خیلی ظریف دهید تا «برش» نخورد.

  • فیلتر معکوس (invert) کل صفحه؟ به هیچ وجه. این روش سریع است ولی با تصاویر/ویدئو/لوگو فاجعه می شود.

معماری تم: از «رنگ ثابت» تا «توکن های معنایی»

به جای این که همه جا #fff و #121212 بنویسید، توکن های معنایی تعریف کنید:

 
:root {
/* Base tokens */
--bg: hsl(0 0% 100%);
--fg: hsl(0 0% 10%);
--muted: hsl(0 0% 45%);
--border: hsl(0 0% 90%);
--primary: hsl(220 90% 50%);
--primary-contrast: hsl(0 0% 100%);
}

:root[data-theme=“dark”] {
–bg: hsl(0 0% 7%);
–fg: hsl(0 0% 92%);
–muted: hsl(0 0% 70%);
–border: hsl(0 0% 18%);
–primary: hsl(220 85% 65%);
–primary-contrast: hsl(0 0% 7%);
}

/* Usage */
body {
background: var(–bg);
color: var(–fg);
}
.card {
background: color-mix(in oklab, var(–bg), white 4%); /* لایه روشن‌تر */
border: 1px solid var(–border);
}
.button-primary {
background: var(–primary);
color: var(–primary-contrast);
}

این رویکرد چند امتیاز دارد: سوئیچ تم سریع، مدیریت سیستماتیک کنتراست، و ساده شدن نگهداری.

تشخیص ترجیح کاربر و سیستم

در وب می توانید به ترجیح سیستم گوش کنید و سپس اجازه ی override به کاربر بدهید.

 
/* احترام به تنظیم سیستم */
@media (prefers-color-scheme: dark) {
:root { color-scheme: dark; }
}

/* حالت روشن پیش‌فرض */
:root { color-scheme: light; }

و در کنار آن، با جاوااسکریپت ترجیح کاربر را ذخیره کنید:

 
<script>
// جلوگیری از فلش تم اشتباه قبل از رندر
(function() {
const saved = localStorage.getItem('theme');
if (saved) document.documentElement.setAttribute('data-theme', saved);
else if (window.matchMedia('(prefers-color-scheme: dark)').matches)
document.documentElement.setAttribute('data-theme', 'dark');
})();
</script>

سپس یک سوئیچ ساده:

 
const toggle = document.getElementById('theme-toggle');
toggle.addEventListener('click', () => {
const html = document.documentElement;
const current = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', current);
localStorage.setItem('theme', current);
});

و با CSS:

 
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

نکته: ویژگی color-scheme به مرورگر می گوید کنترل های فرم، اسکرول بار و اجزای بومی را در تم مناسب رندر کند.

پیاده سازی با فریم ورک ها

Tailwind CSS

Tailwind حالت تیره را با کلاس dark مدیریت می کند.

 
// tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
}
 
<!-- روی <html> یا <body> -->
<html class="dark">
<button class="bg-blue-600 text-white dark:bg-blue-500">
دکمه
</button>
</html>

با اسکریپت بالا، کلاس dark را بر اساس ترجیح کاربر/سیستم ست کنید.

React/Next.js

  • در Next.js یک اسنیپت «pre-hydration» داخل <head> بگذارید تا قبل از رندر، تم درست اعمال شود و «فلش تم» نبینید.

  • از کتابخانه های سبک تمینگ یا Context خودتان استفاده کنید. ترجیح را در localStorage نگه دارید.

Vue/Nuxt

الگو مشابه است: کلاس سطح ریشه و واچ برای prefers-color-scheme، به علاوه ی ذخیره ی ترجیح کاربر.

موبایل: Android و iOS

  • Android: از Android 10 به بعد، سیستم دارک مود سراسری دارد. در اپ، رنگ ها را با Material Theme و توکن ها تعریف کنید تا با سوییچ سیستم هماهنگ شوند.

  • iOS: از iOS 13، UIKit و SwiftUI پشتیبانی مستقیم دارند. در Asset Catalog نسخه های Light/Dark برای رنگ ها و تصاویر نمادین (SF Symbols) تعریف کنید. تصاویر بیت مپ حساس به تم را با «Appearances» دودسته کنید.

راهنمای عملی:

  • از رنگ های دینامیک سیستم (Semantic Colors) استفاده کنید تا خود اپ با تم تغییر کند.

  • برای تصاویر خاص، دو نسخه (Light/Dark) داشته باشید یا از قالب های تک رنگ با «tint» بهره بگیرید.

  • حالت خودکار + سوییچ دستی را هم زمان ارائه دهید؛ کاربر باید بتواند override کند.

دسترس پذیری (A11y): معیارها و نکات حیاتی

  • کنتراست متن: حداقل ۴٫۵:۱ برای متن های معمولی. برای متن مهم/تعامل پذیر، حتی بالاتر.

  • حالت فوکوس واضح: در پس زمینه ی تیره، حلقه ی فوکوس روشن با ضخامت کافی.

  • حالت های خطا/موفق: رنگ سبز/قرمز به تنهایی کافی نیست؛ آیکون یا متن راهنما اضافه کنید.

  • حالت های کوررنگی: روی دارک مود تست کنید؛ بعضی رنگ ها روی تیره تمایزشان کم می شود.

  • حالت هیبرید: برای برخی کاربران، «دارکِ سخت» خسته کننده است؛ یک تم «Dim» یا «Midnight» با کنتراست ملایم تر ارائه دهید.

  • هرگز کاربر را قفل نکنید: امکان خاموش کردن دارک مود همیشه در دسترس باشد.

دارک مود web

عملکرد و معماری CSS

  • بدون JS سنگین: تم باید با یک کلاس/اتریبیوت روی ریشه فعال شود؛ CSS Variables کار بقیه را انجام می دهند.

  • Critical CSS: متغیرهای رنگ و اسنیپت تشخیص تم را در <head> بگذارید تا قبل از پِینت اجرا شوند.

  • پرهیز از دوبله کاری: به جای نگه داشتن دو فایل CSS کامل، با متغیرها سوییچ کنید.

  • حالت SSR/SSG: برای جلوگیری از فلش تم، ترجیح کاربر را قبل از Hydration اعمال کنید.

خطاهای رایج و راه حل ها

  1. invert کل صفحه: تصاویر، لوگوها و ویدئوها مسخ می شوند. به جایش از توکن های رنگ و نسخه های جداگانه ی دارک/لایت استفاده کنید.

  2. مشکی مطلق + سفید مطلق: خوانایی بد و هاله ی بصری. از خاکستری های نزدیک استفاده کنید.

  3. کنتراست ناکافی متن ثانویه: خاکستری بیش ازحد کمرنگ را افزایش دهید تا خوانا بماند.

  4. فراموشی حالت های تعاملی: هاور، فوکوس، اکتیو را برای تیره طراحی کنید.

  5. نمودارهای ناپیدا: رنگ سری ها را برای تیره بازطراحی کنید؛ خطوط شبکه را ملایم اما کافی بگذارید.

  6. فلش تم (Theme Flash): اسکریپت تعیین تم را قبل از رندر اجرا کنید؛ از color-scheme کمک بگیرید.

  7. آیکون های PNG با حاشیه ی سفید: از SVG تک رنگ یا نسخه ی معکوس استفاده کنید.

  8. مرزهای نامرئی: در تیره، بدون مرز یا سایه ی ملایم، کارت ها درهم می روند. مرز ۱px ملایم بگذارید.

  9. قفل کاربر: فقط «اتکا به سیستم» کافی نیست؛ سوئیچ دستی بدهید.

چک لیست طراحی و پیاده سازی

قبل از شروع

  • آیا واقعاً به دارک مود نیاز دارید؟ مخاطب، محیط استفاده و نوع محتوا را بسنجید.

  • پالِت تیره ی پایه + توکن های معنایی تعریف شده است؟

  • استانداردهای کنتراست و تایپوگرافی مشخص اند؟

در حین طراحی

  • سطوح (Elevation) و مرزها تعریف شده اند.

  • حالت های تعاملی (Hover/Focus/Active) واضح اند.

  • آیکون ها و لوگوها نسخه ی تیره دارند.

  • نمودارها و وضعیت های رنگی (Success/Warning/Error) برای تیره بازطراحی شده اند.

در پیاده سازی

  • @media (prefers-color-scheme) اعمال و override کاربر فراهم شده.

  • اسکریپت پیش از رندر برای جلوگیری از فلش تم اجرا می شود.

  • color-scheme روی ریشه ست شده تا کنترل های بومی درست رندر شوند.

  • ذخیره ی ترجیح در localStorage یا معادل بومی موبایل.

بعد از انتشار

  • تست دستی در محیط های پرنور و کم نور.

  • تست کوررنگی و نسبت کنتراست.

  • بازخورد کاربران و متریک های استفاده در شب/روز.

  • به روزرسانی دارایی های بصری که هنوز برای روشن طراحی شده اند.

رویکرد داده محور: کی دارک مود را «الزامی» کنید؟

  • تحلیل زمان استفاده: اگر سهم استفاده در شب بالاست، دارک مود به احتمال زیاد رضایت را بالا می برد.

  • ماهیت محتوا: اپ های کدنویسی، مانیتورینگ، تریدینگ و مدیای تصویری از تیره سود می برند. وبلاگ متنیِ عمومی؟ تم روشن هنوز در روز بهتر خوانده می شود؛ بنابراین هر دو حالت را ارائه دهید.

  • پروفایل دستگاه: کاربران موبایل شبانه فعال بیشتر به تیره سوئیچ می کنند؛ دسکتاپ روزانه معمولاً روشن را ترجیح می دهد.

  • بازخورد مستقیم: اگر کاربران درخواست می کنند، برنامه ی پیاده سازی بسازید و با بتا/فازبندی منتشر کنید.

نگهداری، تکامل و سیستم طراحی

  • Design Tokens منسجم: رنگ، فاصله، سایه، روشنایی سطوح؛ همه را با توکن های مشترک لایت/دارک مدیریت کنید.

  • مستندسازی: قوانین کنتراست، الگوهای کارت/مودال/نمودار، و موارد ممنوعه (مثلاً مشکی/سفید مطلق).

  • رجیونال/فرهنگی: برخی بازارها به پالت های خاص علاقه دارند؛ به هویت برند وفادار بمانید، ولی خوانایی اولویت دارد.

  • نسخه های بینابینی (Dim/AMOLED): بسته به جامعه ی کاربران، یک گزینه ی «مشکی OLED» هم می تواند در تنظیمات پیشرفته عرضه شود.

تست جامع پیش از انتشار

  • دستگاه های واقعی و شبیه ساز: موبایل/دسکتاپ، OLED/LCD، فضای باز/اتاق تاریک.

  • تست کاربر کم دید: با بزرگ نمایی و کنتراست بالا، کارها را انجام دهید؛ آیا مسیرها واضح اند؟

  • تحلیل کنتراست خودکار + بازنگری دستی: ابزار سنجش کنتراست مفید است، اما چشمی هم بررسی کنید.

  • کارایی: تغییر تم باید بی درنگ باشد؛ هیچ «پرش» بصری.

  • متن بلند: مقاله ای ۱۰۰۰ کلمه ای را در دارک بخوانید؛ خستگی را بسنجید و رنگ/line-height را تنظیم کنید.

  • نمودارها: یک داشبورد داده را در تیره تست کنید؛ آیا سری ها قابل تشخیص و لِیبل ها واضح اند؟

سناریوهای نمونه و راهکار

  • اپ خواندن خبر: روز روشن و خوانایی مهم است؛ شب دارک مود با فونت کمی بزرگ تر و کنتراست کنترل شده ارائه دهید.

  • ادیتور کد: پالت سینتکس در تیرهِ کم اشباع، پس زمینه ی نزدیک به #0E0E0E، و کُرسور/هایلایت واضح.

  • فروشگاه آنلاین: تصاویر محصول در تیره باید قاب ظریف داشته باشند؛ صفحات جزئیات محصول امکان سوییچ سریع تم را حفظ کنند.

  • اپ مالی/ترید: نمودار شمعی با پس زمینه ی تیره ی نرم، رنگ های افزایش/کاهش مناسب و کنتراست خوب برای متن ها.

جمع بندی

دارک مود «آپشن لوکس» نیست؛ بخشی از احترام به انتخاب کاربر و زمینه ی استفاده است. اجرای موفق آن سه اصل دارد:

  1. طراحی رنگ و تایپوگرافی با کنتراست علمی (نه سیاه/سفید مطلق).

  2. معماری تم با توکن های معنایی و پیاده سازی سبک وزن (CSS Variables + color-scheme).

  3. دسترسی پذیری و تست واقعی روی دستگاه ها و شرایط نوری مختلف.

سرفصل‌های این مطلب

سوالات متداولی که شاید برای شما پیش بیاید

نه. در روز و نور زیاد، روشن خواناتر است. گزینه ی انتخابی بهترین راه است.

مستقیم نه؛ اما تجربه ی بهتر می تواند رفتار کاربر را بهبود دهد.

نه لزوماً. خاکستری های خیلی تیره معمولاً خواناترند.

کنتراستش را پایین بیاورید اما نه آن قدر که ناخوانا شود؛ محدوده ی ۶۵–۷۵٪ روشنایی برای خاکستری متن ثانویه غالباً خوب است.

تا کنون 150 نفر این مطلب را پسندیده‌اند

0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها

اشتراک‌گذاری

آکادمی آژانس کوانتا

Quanta Academy

مشاهده همه