M

MLOG

فارسی

با این راهنمای جامع، حالت تاریک را در وب‌سایت خود پیاده‌سازی کنید. درباره کوئری‌های مدیا در CSS، دکمه‌های جاوا اسکریپت، ملاحظات دسترسی‌پذیری و بهترین شیوه‌ها برای یک تجربه کاربری روان بیاموزید.

پیاده‌سازی حالت تاریک: راهنمای جامع با CSS و جاوا اسکریپت

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

چرا حالت تاریک را پیاده‌سازی کنیم؟

چندین دلیل قانع‌کننده برای در نظر گرفتن پیاده‌سازی حالت تاریک وجود دارد:

روش‌های پیاده‌سازی حالت تاریک

چندین رویکرد برای پیاده‌سازی حالت تاریک وجود دارد که هر کدام مزایا و معایب خود را دارند. ما متداول‌ترین روش‌ها را بررسی خواهیم کرد:

۱. پیاده‌سازی حالت تاریک با کوئری‌های مدیا در CSS

کوئری مدیا prefers-color-scheme در CSS به شما امکان می‌دهد تا طرح رنگی ترجیحی کاربر را تشخیص داده و استایل‌های متفاوتی را بر اساس آن اعمال کنید. این ساده‌ترین و کارآمدترین روش برای پیاده‌سازی حالت تاریک برای کاربرانی است که قبلاً تنظیمات سیستم خود را مشخص کرده‌اند.

مثال کد

CSS زیر را به فایل استایل خود اضافه کنید:

/* تم پیش‌فرض (روشن) */
body {
  background-color: #fff;
  color: #000;
}

/* تم تاریک */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* تنظیم عناصر دیگر در صورت نیاز */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

توضیح:

مزایا

معایب

۲. پیاده‌سازی حالت تاریک با دکمه جاوا اسکریپت

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

ساختار HTML

ابتدا، یک عنصر دکمه را به HTML خود اضافه کنید:

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

این یک سوئیچ ساده با استفاده از یک چک‌باکس و مقداری استایل سفارشی CSS ایجاد می‌کند.

استایل‌دهی CSS (اختیاری)

شما می‌توانید سوئیچ را با استفاده از CSS استایل‌دهی کنید. در اینجا یک مثال آورده شده است:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* اسلایدرهای گرد */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

کد جاوا اسکریپت

اکنون، کد جاوا اسکریپت زیر را برای مدیریت عملکرد دکمه اضافه کنید:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// تابع برای تغییر حالت تاریک
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // ذخیره ترجیح کاربر در localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// بررسی localStorage برای ترجیح ذخیره شده
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// اضافه کردن event listener به دکمه
darkModeToggle.addEventListener('change', toggleDarkMode);

توضیح:

استایل‌دهی CSS برای حالت تاریک (با استفاده از کلاس)

CSS خود را به‌روزرسانی کنید تا از کلاس dark-mode برای اعمال استایل‌های تم تاریک استفاده کند:

/* تم پیش‌فرض (روشن) */
body {
  background-color: #fff;
  color: #000;
}

/* تم تاریک */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

مزایا

معایب

۳. ترکیب کوئری‌های مدیا و جاوا اسکریپت

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

مثال کد

از همان HTML و CSS مثال دکمه جاوا اسکریپت استفاده کنید. جاوا اسکریپت را برای بررسی ترجیحات سیستم تغییر دهید:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// تابع برای تغییر حالت تاریک
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // ذخیره ترجیح کاربر در localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// بررسی localStorage برای ترجیح ذخیره شده، سپس ترجیح سیستم
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// اضافه کردن event listener به دکمه
darkModeToggle.addEventListener('change', toggleDarkMode);

توضیح:

مزایا

معایب

ملاحظات دسترسی‌پذیری

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

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

در اینجا چند بهترین شیوه برای دنبال کردن هنگام پیاده‌سازی حالت تاریک در وب‌سایت شما آورده شده است:

مثال: متغیرهای CSS برای تم‌بندی

متغیرهای CSS جابجایی بین تم‌های روشن و تاریک را آسان می‌کنند. متغیرها را در شبه‌کلاس :root تعریف کنید:

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

اکنون، هنگامی که کلاس dark-mode به بدنه اضافه می‌شود، متغیرهای CSS به‌روز می‌شوند و استایل‌ها به طور خودکار اعمال می‌شوند.

نتیجه‌گیری

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

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

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