Dark Mode: اصول طراحی و پیاده‌سازی

حالت تاریک از یک ترند به یک انتظار تبدیل شده. چگونه Dark Mode حرفه‌ای طراحی کنیم؟

اصول طراحی Dark Mode

رنگ پس‌زمینه خالص سیاه نباشد (#121212 بهتر از #000). تضاد رنگ کافی اما نه چشم‌آزار. سلسله‌مراتب با روشنایی.

• پس‌زمینه: #121212 نه #000000
• تضاد رنگ: حداقل 4.5:1
• تصاویر: کاهش روشنایی 5-10%

پیاده‌سازی CSS

prefers-color-scheme، CSS Custom Properties و toggle دستی بهترین ترکیب است. داده ترجیح کاربر را در localStorage ذخیره کنید.

جمع‌بندی

Dark Mode دیگر اختیاری نیست. با رعایت اصول صحیح، تجربه کاربری عالی ایجاد کنید.