بهترین پالت‌های رنگی سایت برای دو حالت دارک و لایت مود

حالت روشن

امروزه حالت روشن همچنان به عنوان گزینه‌ی پیش‌فرض بسیاری از رابط‌های کاربری استفاده می‌شود. این حالت با سادگی و وضوح بالا، برای محیط‌های پرنور و استفاده‌ی روزانه مناسب‌تر است.

لایت مود حالتی از طراحی رابط کاربری است که در آن پس‌زمینه‌ها روشن و متن‌ها تیره هستند.

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

این حالت معمولاً برای استفاده در روز یا فضاهای روشن و اداری توصیه می‌شود.

🔹 مزایای Light Mode

• خوانایی بهتر در نور طبیعی
• تطابق با عادت بصری اکثر کاربران
• نمایش دقیق‌تر رنگ‌ها و تصاویر
• احساس تمیز و سازمان‌یافته در طراحی

حالت تاریک

امروزه حالت تاریک به یک روند رایج در میان برندها تبدیل شده است. این حالت حال و هوای مرموز و زیبایی‌شناختی را به بینندگان می‌بخشد که به برندها کمک می‌کند محصولات خود را بهتر بازاریابی کنند.

دارک مود حالتی از طراحی رابط کاربری است که در آن پس‌زمینه‌ها تیره و متن‌ها روشن هستند.

این طراحی‌ها معمولا دارای رنگ های تیره مانند سیاه یا از خوانواده‌ی خاکستری هستند.

این حالت معمولاً برای استفاده در شب یا محیط‌های کم‌نور توصیه می‌شود

🔹 مزایای Dark Mode

• کاهش خستگی چشم در نور کم
• ظاهر مدرن و مینیمال
• افزایش تمرکز روی محتوا
• صرفه‌جویی در مصرف باتری (به‌ویژه در نمایشگرهای OLED)

چالش‌های طراحی تم دوگانه

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

ایجاد تعادل بین رنگ‌ها و سبک طراحی، بدون آنکه حالت تاریک یا روشن دچار افت کیفیت بصری شود، نیازمند آزمون و خطا، تست‌های دستی و در نظر گرفتن ترجیحات کاربران است. همچنین پیاده‌سازی طراحی دوگانه باعث افزایش پیچیدگی کدنویسی و نیاز به مدیریت مؤثر اجزای UI در هر حالت می‌شود.

🔹 انواع چالش‌های طراحی دوگانه

• دانش فنی و سازگاری با تنظیمات کاربر
• انتخاب رنگ‌های خوانا و قابل‌دسترسی در هر دو تم
• هماهنگی بصری بین دو حالت بدون قربانی کردن جذابیت طرح
• افزایش حجم کد و استایل‌ها برای پشتیبانی از طراحی دوگانه
• مدیریت رفتار عناصر UI مانند hover و focus به صورت دوگانه

جدول مقایسه‌ای تم تاریک و روشن

بحث حالت تاریک در مقابل حالت روشن تقریبا از زمان طراحی‌های مردن وب مطرح بوده و هرگز به‌طور کامل پایان نمی‌یابد. به همین خاطر طراحان حرفه‌ای معمولاً از دو تم تاریک و روشن برای یک طراحی استفاده می‌کنند.

طرح اول : گرانبها، اصالت، و تعادل

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

طرح دوم : لاکچری، خلاقیت، و ظرافت

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

طرح سوم : پایداری، طبیعت، و زندگی

این پالت با رنگ‌های الهام‌گرفته از عناصر طبیعی، حس پایداری و آرامش را به طراحی منتقلمی‌کند. ترکیب سبز و خاکی در کنار سایه‌های گرم، مناسب طرح‌هایی‌ست که به دنبال ارتباط باطبیعت و احساس زندگی هستند.

طرح چهارم : هیجان، قدرت، و جسارت

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

پیاده‌سازی با Css, Javascript

🔹 کدهای CSS

/* حالت لایت */
.light-theme {
	--bg-color: #F8F8FF;
	--text-color: #333333;
	--shadow-color: #D3D3D3;
	--bold-color: #5E376D;
}

/* حالت دارک */
.dark-theme {
	--bg-color: #121212;
	--text-color: #E0E0E0;
	--shadow-color: #1E1E1E;
	--bold-color: #6A1B9A;
}

/* استایل‌های عمومی */
body {
	background-color: var(--bg-color);
	color: var(--text-color);
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* سایه یا باکس */
.card {
	background-color: var(--shadow-color);
	padding: 1rem;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* دکمه یا عنوان برجسته */
.bold {
	color: var(--bold-color);
	font-weight: bold;
}

این باعث می‌شه فقط با تغییر کلاس بدنه (body) بین light-theme و dark-theme، کل استایل رنگ‌ها به‌صورت داینامیک عوض بشه. خیلی تمیز و قابل توسعه است.

🔹 کدهای Javascript

با classList.toggle() کلاس‌های dark-theme و light-theme جا‌به‌جا می‌شن.

بعد از سوئیچ، بررسی می‌کنه که آیا کلاس dark-theme فعال شده یا نه.

نتیجه رو به‌صورت dark یا light در localStorage ذخیره می‌کنه تا در دفعات بعدی بازدید، این تنظیم حفظ بشه.

button.addEventListener("click",() => {
	const body = document.body;

	// سوئیچ کردن بین کلاس‌ها
	body.classList.toggle('dark-theme');
	body.classList.toggle('light-theme');

	// تشخیص تم فعلی
	const currentTheme = body.classList.contains('dark-theme') ? 'dark' : 'light';

	// ذخیره در localStorage
	localStorage.setItem('preferredTheme', currentTheme);
});

window.addEventListener('DOMContentLoaded', () => {
	const savedTheme = localStorage.getItem('preferredTheme');
	if (savedTheme) {
		document.body.classList.add("${savedTheme}-theme");
	} else {
		document.body.classList.add('light-theme'); // پیش‌فرض
	}
});

پیاده‌سازی با Tailwind

🔹 در فایل css قبل از build

برای اینکه تیلویند رنگ‌های شخصی‌سازی‌شده را به عنوان کلاس‌های معبتر خودش بشناسه باید آنها رو درتنظیماتش تعریف کنیم (حتما آخرین نسخه تیلویند نصب شده باشد).

@import "tailwindcss";
@theme {
	--color-light-bg: #F8F8FF;
	--color-light-text: #333333;
	--color-light-shadow: #D3D3D3;
	--color-light-bold: #5E376D;
	
	--color-dark-bg: #121212;
	--color-dark-text: #E0E0E0;
	--color-dark-shadow: #1E1E1E;
	--color-dark-bold: #6A1B9A;
}

🔹 نحوه نوشتن کلاس‌ها در html

هر کلاس یا استایلی که در لایت‌مود می‌خواهیم رو به صورت عادی اضافه می‌کنیم و هر استایلی که در داخل دارک‌مود می‌خواهیم استفاده کنیم روبه‌روی dark: قرار می‌دهیم.

<div class="bg-light-bg text-light-text dark:bg-dark-bg dark:text-dark-text">
	<h1 class="font-bold text-light-bold dark:text-dark-bold">
		بهترین پالت‌های رنگی سایت برای دو حالت دارک و لایت مود
	</h1>
</div>

🔹 در فایل tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
	darkMode: 'class',
	...
}

🔹 سوئیچ کردن با js

function toggleDarkMode() {
	document.documentElement.classList.toggle('dark');
	const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
	localStorage.setItem('theme', currentTheme);
}

window.addEventListener('DOMContentLoaded', () => {
	const savedTheme = localStorage.getItem('theme');

	if (savedTheme === 'dark') {
		document.documentElement.classList.add('dark');
	} else {
		document.documentElement.classList.remove('dark'); // پیش‌فرض لایت
	}
});