آموزش افزودن دارک مود به سایت با CSS و JavaScript

در دنیای طراحی وب، دارک مود (Dark Mode) یکی از قابلیت‌های محبوبی و کاربردی است که تجربه‌ی کاربری (UX) و سئو را بهبود می‌بخشد و به چشم کاربران در محیط‌های کم‌نور کمک می‌کند. از طرفی برخی کاربران به تم تاریک علاقه‌مند هستند و ترجیح آنها استفاده از تم تاریک می‌باشد. در این مقاله همراه با سوبلز، به شما آموزش می‌دهیم که چگونه با استفاده از CSS و JavaScript یک حالت دارک مود را به سایت خود اضافه کنید.

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

قبل از پرداختن به نحوه‌ی پیاده‌سازی، بیایید بررسی کنیم که چرا دارک مود اهمیت دارد:

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

بهینه‌سازی مصرف انرژی: در صفحه‌نمایش‌های OLED و AMOLED، نمایش رنگ‌های تیره مصرف باتری را کاهش می‌دهد و می‌تواند باعث افزایش طول عمر سخت افزار آن شود.

جذابیت بصری: بسیاری از کاربران ظاهر تیره را جذاب‌تر و مدرن‌تر می‌دانند.

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

روش‌های مختلف افزودن دارک مود به سایت

برای پیاده‌سازی دارک مود در وبسایت، روش‌های مختلفی وجود دارد که ما از ترکیب CSS و JavaScript برای کنترل و پیاده سازی آن استفاده خواهیم کرد.

ایجاد فایل CSS برای دارک مود

ابتدا یک فایل CSS یا یک تگ style  برای دارک مود ایجاد کنید و استایل‌های لازم را در آن بنویسید:

<style>
/* استایل‌های حالت روشن */
body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

/* استایل‌های حالت تاریک */
body.dark {
    background-color: #121212;
    color: white;
}

/* تغییر رنگ برای سایر عناصر */
.dark a {
    color: #bb86fc;
}
</style>

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

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

افزودن دکمه‌ی تغییر وضعیت دارک مود

برای اینکه کاربران بتوانند بین حالت روشن و تاریک تغییر وضعیت دهند، شما می‌توانیدیک دکمه‌ی ساده به HTML اضافه کنید تا با کلیک کردن بر روی آن یک تابع جاوااسکریپت اجرا شود و کلاس dark را به تگ body اضافه یا حذف کند:

<button id="toggleDarkMode">تغییر دارک مود</button>

افزودن جاوا اسکریپت برای تغییر دارک مود

شما نیاز دارید که یک فایل js بسازید و درون صفحه html فراخوانی کنید یا در یک تگ script ، تکه کد زیر را برای جابجایی بین دو تم موجود قرار دهید:

<script>
  const toggleDarkMode = document.getElementById("toggleDarkMode");
  const body = document.body;

  // بررسی ذخیره شدن تنظیمات در Local Storage
  if (localStorage.getItem("dark") === "enabled") {
    body.classList.add("dark");
  }

  // رویداد کلیک برای تغییر وضعیت دارک مود
  darkModeToggle.addEventListener("click", () => {
    body.classList.toggle("dark");

    // ذخیره وضعیت جدید  در Local Storage
    if (body.classList.contains("dark")) {
      localStorage.setItem("dark", "enabled");
    } else {
      localStorage.setItem("dark", "disabled");
    }
  });
</script>

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

توضیح کد بالا:

1. در خط اول ما دکمه ای که در مرحله دوم در html سایت خود ساخته ایم را توسط جاوااسکریپت انتخاب کردیم و درون یک متغیر با نام toggleDarkMode قرار دادیم.
2. در شرط اول بررسی کردیم که آیا کاربر در این وبسایت ، قبلاً حالت دارک مود را انتخاب کرده است یا خیر ، که اگر انتخاب کرده بود بصورت پیشفرض این حالت برای آن فعال شود.
3. در بخش بعدی برای دکمه ای که انتخاب کرده بودیم یک شنونده قرار می‌دهیم که با هر بار کلیک کاربر بر روی دکمه تابع مدنظر ما اجرا شود
4. درون تابع کلاس dark را در body جابجا کند (در صورت وجود کلاس ، آن را حذف کرده و در غیر این صورت اضافه می‌کند) در ادامه این مورد را بررسی می‌کند که آیا تگ body دارای کلاس dark است یا خیر در صورتی که وجود داشت این مقدار را درون localStorage ذخیره می‌کند و در غیر این صورت حذف می‌کند.

بهینه‌سازی تجربه‌ی کاربری با media query

برای فعال‌سازی خودکار دارک مود براساس تنظیمات سیستم عامل کاربر، می‌توان از prefers-color-scheme در CSS استفاده کرد:

<style>
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #121212;
      color: white;
    }
  }
</style>

در صورت نیاز در جاوااسکریپت نیز می‌توانید به این مقدار دسترسی داشته باشید ، تا بتوانید مدیریت بهتری بر روی تصمیم گیری اولیه برای نمایش تم تیره یا روشن داشته باشید:

const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches

این کد یک مقدار boolean (صحیح یا غلط) برگشت می‌دهد ، در صورتی که تم کاربر دارک باشد مقدار صحیح (true) و در غیر این صورت مقدار غلط (false) درون متغیر تعریف شده با نام isDarkMode  ، قرار می‌گیرد.

استفاده از متغیر های CSS

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

در حالت دارک مود نیاز دارید هر سه مورد تغییر کند ، و در تمام بخش ها و تمامی صفحات سایت نیز این تغییر اعمال شود ، راه حل اصولی تر برای این کار ، استفاده از متغیر های css می‌باشد.

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

چگونه این کار را انجام دهیم ؟

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

<style>
  body {
    --background-color: #ffffff;
    --text-color: #000000;
    --section-color: #eaeaea;
    --primary-text-color: #121212;
    --link-color:#bb86fc;
  }
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
  section {
    background-color: var(--section-color);
  }
  p {
    color: var(--primary-text-color);
  }
  a {
    color: var(--link-color);
  }
  /* ... */

  body.dark {
    --background-color:#121212;
    --text-color: #ffffff;
    --section-color: #252525;
    --primary-text-color: #eaeaea;
  }
</style>

در بخش اول با ساختار « مقدار:نام– » متغیر های مورد نیاز را با مقادیر مربوط به آن ایجاد کردیم که در خود body و تمام فرزندان آن در دسترس باشد.

در بخش بعدی با استفاده از تابع var در css می‌توان به مقدار درون متغیر دسترسی پیدا کرده و از آن استفاده کرد.

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

ویژگی‌های پیاده‌سازی‌شده

✔ تغییر دستی بین دارک مود و لایت مود
✔ ذخیره‌ی وضعیت انتخاب‌شده در localStorage
✔ تشخیص خودکار دارک مود از تنظیمات سیستم
✔ پیاده سازی اصولی با استفاده از متغیر های css

نتیجه‌گیری

در این مقاله، سعی شد نحوه‌ی افزودن دارک مود به وبسایت را با استفاده از CSS و JavaScript  پیاده سازی کنیم که در طراحی سایت کاربرد دارد. با استفاده از localStorage ، انتخاب کاربران را ذخیره کردیم تا تجربه‌ی کاربری بهتری فراهم شود. همچنین از media queries برای تشخیص تنظیمات پیشفرض سیستم کاربر بهره بردیم.

با پیاده‌سازی این روش، سایت شما حرفه‌ای‌تر و کاربرپسندتر خواهد شد. 🚀