ترفندهای استفاده از متغیرهای CSS (CSS Variables) برای مدیریت تم‌های دارک‌مود

چرا باید از متغیرهای CSS استفاده کنیم؟ (CSS Variables چیستند؟)

بذارید از پایه شروع کنیم. متغیرهای CSS یا Custom Properties، ابزارهایی هستن که بهت اجازه می‌دن مقادیر مشخصی رو در فایل‌های CSS تعریف کنی و هر جای دیگه از اونها استفاده کنی. فکر کن یه رنگ خاص داری که قراره توی ۱۰ جای مختلف سایتت استفاده بشه. اگه بخوای اون رنگ رو عوض کنی، باید ۱۰ جا رو دستی ادیت کنی. اما با متغیرها، کافیه فقط مقدار متغیر رو یک بار تغییر بدی، و تمام! اینجاست که معجزه شروع میشه.

این متغیرها از قدرت آبشاری (Cascading) CSS بهره می‌برن، یعنی می‌تونن در Scopeهای مختلف (مثلاً در یک عنصر خاص یا در کل داکیومنت) تعریف و Override بشن. این قابلیت، بستر اصلی برای مدیریت تم‌های مختلف مثل دارک‌مود رو فراهم می‌کنه.
برای یادگیری بیشتر در مورد ترفندهای CSS، حتماً بخش اسنیپت‌های CSS ما رو چک کن.

سینتکس پایه متغیرهای CSS

تعریف یه متغیر خیلی راحته. با دو تا خط تیره (–) اسمش رو مشخص می‌کنی و بعدش هم مقدارش رو می‌ذاری. برای استفاده ازش هم از تابع var() کمک می‌گیریم.

:root {
  --primary-color: #007bff; /* تعریف متغیر در Scope سراسری */
  --text-color: #333;
  --bg-color: #fff;
}

body {
  background-color: var(--bg-color); /* استفاده از متغیر */
  color: var(--text-color);
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
    

آماده‌سازی پروژه برای دارک‌مود با CSS Variables

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

تعریف متغیرهای پایه برای تم‌ها

معمولاً متغیرهای اصلی رو داخل :root (که همون عنصر html هست) تعریف می‌کنیم تا در سراسر داکیومنت در دسترس باشن. بعدش برای دارک‌مود، یه کلاس مثل .dark-mode ایجاد می‌کنیم و داخل اون، همین متغیرها رو با مقادیر دارک‌مودشون Override می‌کنیم.

/* حالت پیش‌فرض (لایت‌مود) */
:root {
  --background-color: #ffffff;
  --text-color: #333333;
  --primary-color: #007bff;
  --secondary-bg: #f8f9fa;
  --border-color: #dee2e6;
}

/* حالت دارک‌مود */
.dark-mode {
  --background-color: #1a202c; /* پس‌زمینه تیره */
  --text-color: #e2e8f0;       /* متن روشن */
  --primary-color: #66b3ff;   /* رنگ اصلی روشن‌تر */
  --secondary-bg: #2d3748;    /* پس‌زمینه ثانویه تیره */
  --border-color: #4a5568;    /* مرزهای تیره‌تر */
}

/* استفاده از متغیرها در عناصر HTML */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease; /* برای انیمیشن نرم */
}

.container {
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

button {
  background-color: var(--primary-color);
  color: var(--text-color); /* معمولاً رنگ متن دکمه سفید یا روشن باشه */
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
    

پیاده‌سازی مکانیزم سوئیچ دارک‌مود

حالا که متغیرها رو تعریف کردیم، نیاز داریم به یه راهی برای تعویض این تم‌ها. دو تا رویکرد اصلی داریم: یا بذاریم مرورگر کاربر تصمیم بگیره (بر اساس تنظیمات سیستم عاملش) یا یه سوئیچ دستی برای کاربر بذاریم. می‌تونیم این دو تا رو با هم ترکیب هم بکنیم.

۱. استفاده از @media (prefers-color-scheme: dark)

این یه قابلیت CSS هست که بهمون اجازه میده بر اساس تنظیمات سیستم عامل کاربر، استایل‌ها رو اعمال کنیم. اگه کاربر تو سیستمش دارک‌مود رو انتخاب کرده باشه، این media query فعال میشه و استایل‌های داخلش اعمال میشن.

/* حالت پیش‌فرض (لایت‌مود) در :root */
:root {
  --background-color: #ffffff;
  --text-color: #333333;
  /* ... سایر متغیرها ... */
}

/* اعمال دارک‌مود اگر سیستم عامل کاربر روی دارک تنظیم شده باشد */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1a202c;
    --text-color: #e2e8f0;
    /* ... متغیرهای دارک‌مود ... */
  }
}
    

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

۲. گام‌به‌گام: ساخت یک سوئیچ تم دستی با جاوااسکریپت

برای ساخت یه سوئیچ دستی، یه دکمه یا توگل توی HTML لازم داریم. بعد با جاوااسکریپت، وقتی کاربر روی اون کلیک می‌کنه، یه کلاس (مثلاً .dark-mode) رو به عنصر body یا html اضافه یا حذف می‌کنیم. این کلاس همون کلاسی هست که متغیرهای دارک‌مود رو Override می‌کنه.

HTML برای دکمه سوئیچ

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مدیریت تم با CSS Variables</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>مدیریت تم با CSS Variables</h1>
    <button id="theme-toggle" aria-label="Toggle dark mode">
      تغییر تم
    </button>
  </header>
  <main class="container">
    <p>این یک متن تستی برای نمایش تغییرات تم است.</p>
    <button>دکمه نمونه</button>
  </main>
  <script src="script.js"></script>
</body>
</html>
    

جاوااسکریپت برای منطق سوئیچ

اینجا جاوااسکریپت میاد و کار اصلی رو انجام میده. علاوه بر اینکه کلاس رو تغییر میده، باید تنظیمات کاربر رو هم در LocalStorage ذخیره کنه تا وقتی کاربر دوباره به سایتت سر زد، تم مورد علاقه‌اش یادش باشه.

document.addEventListener('DOMContentLoaded', () => {
  const themeToggle = document.getElementById('theme-toggle');
  const body = document.body;

  // بررسی تنظیمات ذخیره شده در LocalStorage
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    body.classList.add(savedTheme);
  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // اگر کاربر قبلاً تمی را انتخاب نکرده باشد، از تنظیمات سیستم عامل استفاده کن
    body.classList.add('dark-mode');
  }

  themeToggle.addEventListener('click', () => {
    if (body.classList.contains('dark-mode')) {
      body.classList.remove('dark-mode');
      localStorage.setItem('theme', 'light-mode'); // ذخیره به عنوان لایت‌مود
    } else {
      body.classList.add('dark-mode');
      localStorage.setItem('theme', 'dark-mode');  // ذخیره به عنوان دارک‌مود
    }
  });
});
    

همونطور که دیدی، تو این جاوااسکریپت، ابتدا تنظیمات قبلی کاربر از LocalStorage خونده میشه. اگه چیزی پیدا نشد، از prefers-color-scheme برای تشخیص تم سیستم عامل استفاده می‌کنیم. این ترکیب، یه تجربه کاربری عالی رو فراهم می‌کنه.
برای کسب اطلاعات بیشتر در مورد جاوااسکریپت و بهینه‌سازی کدهات، می‌تونی به اسنیپت‌های JS مراجعه کنی.

متغیرهای CSS و طراحی ریسپانسیو: ترکیب جادویی

اینجا یه نکته جالب دیگه هم هست: متغیرهای CSS فقط برای رنگ‌ها نیستن! تو می‌تونی هر مقداری رو به عنوان متغیر تعریف کنی، از سایز فونت گرفته تا فاصله بین عناصر یا حتی z-index. این یعنی می‌تونی متغیرها رو داخل Media Queries هم تغییر بدی و کنترل بی‌نظیری روی طراحی ریسپانسیو داشته باشی.

تغییر مقادیر متغیرها در Media Queries

فرض کن می‌خوای توی صفحات موبایل، فاصله بین بخش‌ها کمتر باشه. به جای اینکه هر بار margin رو جداگانه تغییر بدی، می‌تونی یه متغیر برای اون تعریف کنی و توی Media Query فقط مقدار اون متغیر رو عوض کنی.

:root {
  --spacing-unit: 20px;
  --font-size-base: 16px;
}

body {
  padding: var(--spacing-unit);
  font-size: var(--font-size-base);
}

@media (max-width: 768px) {
  :root {
    --spacing-unit: 10px; /* کاهش فاصله برای موبایل */
    --font-size-base: 14px; /* کاهش سایز فونت برای موبایل */
  }
}
    

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

بهترین روش‌ها و نکات پیشرفته برای مدیریت تم‌ها

رسیدیم به اونجایی که قراره کدنویسی رو از یه سطح ساده به یه سطح حرفه‌ای برسونیم. استفاده از CSS Variables فقط تعریف چند تا رنگ نیست، بلکه یه استراتژی کامل می‌طلبه.

۱. سازماندهی متغیرها (Global vs Component-Specific)

متغیرها رو می‌تونیم در Scopeهای مختلف تعریف کنیم. متغیرهای کلی (Global) رو داخل :root بذار، مثل رنگ‌های اصلی، فونت‌ها، و فاصله‌گذاری‌های عمومی. اما برای کامپوننت‌های خاص، می‌تونی متغیرها رو داخل همون کامپوننت تعریف کنی تا تغییراتش فقط روی خودش اثر بذاره. مثلاً یه کامپوننت کارت (Card) می‌تونه متغیر --card-bg خودش رو داشته باشه.

۲. نام‌گذاری معنادار و سازگار

مهم‌ترین اصل در برنامه‌نویسی، خواناییه. برای متغیرها، از نام‌هایی استفاده کن که هدفشون رو مشخص کنن. مثلاً به جای --c1، از --primary-background یا --text-on-dark استفاده کن. این کار بعداً تو دیباگینگ و نگهداری پروژه جونت رو نجات میده.

۳. Fallback Values (مقادیر جایگزین)

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

.element {
  background-color: var(--some-undefined-var, #ff0000); /* اگر متغیر پیدا نشد، قرمز شود */
}
    

۴. استفاده از متغیرها در توابع CSS (مثل calc())

یکی از جذابیت‌های متغیرها اینه که می‌تونی اونها رو با توابع CSS مثل calc()، rgb()، hsl() و… ترکیب کنی. این انعطاف‌پذیری فوق‌العاده‌ای بهت میده.

:root {
  --base-spacing: 16px;
  --header-height: 60px;
}

.main-content {
  padding-top: calc(var(--header-height) + var(--base-spacing));
}
    

جدول آموزشی: مقایسه روش‌های مدیریت تم

برای اینکه دید بهتری نسبت به مزایای CSS Variables داشته باشی، یه مقایسه سریع با روش‌های قدیمی‌تر یا پیش‌پردازنده‌ها می‌تونه حسابی کمکت کنه.

چالش‌ها و راه‌حل‌ها در استفاده از CSS Variables

هیچ تکنولوژی بدون چالش نیست، و CSS Variables هم از این قاعده مستثنی نیست. اما خوشبختانه، برای بیشتر این چالش‌ها، راه‌حل‌های خوبی وجود داره.

۱. پشتیبانی مرورگرها

مشکل: در حالی که بیشتر مرورگرهای مدرن از CSS Variables پشتیبانی می‌کنن، IE11 و برخی نسخه‌های قدیمی‌تر مرورگرها خیر.

راه‌حل: برای این مشکل، می‌تونی از PostCSS به همراه پلاگین postcss-custom-properties استفاده کنی. این پلاگین متغیرهای CSS رو به مقادیر ثابت تبدیل می‌کنه تا برای مرورگرهای قدیمی هم قابل فهم باشن. البته، بهترین راه اینه که از Fallback values استفاده کنی تا حداقل یه استایل پایه برای اون مرورگرها وجود داشته باشه.

/* CSS عادی برای مرورگرهای قدیمی */
body {
  background-color: #ffffff; /* مقدار ثابت */
  color: #333333;
}

/* متغیرها برای مرورگرهای مدرن که Override می‌شوند */
:root {
  --background-color: #ffffff;
  --text-color: #333333;
}

body {
  background-color: var(--background-color); /* مرورگر مدرن این را می‌خواند */
  color: var(--text-color);
}

.dark-mode {
  --background-color: #1a202c;
  --text-color: #e2e8f0;
}
    

۲. Scope و ارث‌بری

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

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

۳. دیباگینگ (Debugging)

مشکل: پیدا کردن اینکه یه متغیر از کجا داره مقدارش رو میگیره یا چرا Override نشده، ممکنه کمی وقت‌گیر باشه.

راه‌حل: ابزارهای توسعه مرورگر (Developer Tools) توی Chrome و Firefox پشتیبانی خوبی از CSS Variables دارن. تو می‌تونی مقدار فعلی متغیرها رو ببینی و حتی اونها رو درجا تغییر بدی تا تاثیرش رو مشاهده کنی. این قابلیت دیباگینگ رو خیلی راحت‌تر می‌کنه.

اهمیت دسترسی‌پذیری (Accessibility) در تم‌های دارک‌مود

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

کنتراست رنگی کافی

مطمئن شو که کنتراست بین رنگ متن و پس‌زمینه در هر دو تم (لایت و دارک) به اندازه کافی بالاست. حداقل نسبت کنتراست 4.5:1 برای متن‌های عادی توصیه میشه (استاندارد WCAG AA). ابزارهای آنلاین زیادی هستن که می‌تونن بهت کمک کنن این نسبت رو چک کنی.

حالت‌های فوکوس و انتخاب

وقتی کاربر با کیبورد تو سایتت حرکت می‌کنه، باید بتونه به راحتی ببینه الان روی کدوم عنصر فوکوس کرده. حالت‌های :focus، :hover و :active رو برای هر دو تم چک کن و مطمئن شو که قابل مشاهده و واضح هستن. از رنگ‌های قوی‌تر و برجسته‌تر برای حالت فوکوس در دارک‌مود استفاده کن.

عیب‌یابی سریع: مشکلات رایج و راه‌حل‌های آن‌ها

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

نتیجه‌گیری

رفیق برنامه‌نویس، دیدی چقدر CSS Variables کارمون رو برای مدیریت تم‌ها، مخصوصاً دارک‌مود، راحت‌تر می‌کنه؟ دیگه لازم نیست نگران تکرار کد یا پیچیدگی‌های نگهداری باشی. با یه استراتژی درست، می‌تونی یه سیستم تم منعطف و قدرتمند بسازی که هم برای خودت دردسر کمتری داره و هم تجربه کاربری فوق‌العاده‌ای رو برای بازدیدکنندگانت فراهم می‌کنه.
این قابلیت نه تنها بهت کمک می‌کنه تا کد تمیزتری داشته باشی، بلکه توسعه‌ و بروزرسانی پروژه رو هم سریع‌تر و لذت‌بخش‌تر می‌کنه. پس ازش استفاده کن و پروژه‌هات رو به یه سطح جدید ببر!
اگر دوست داری بیشتر در مورد ابزارهای برنامه‌نویسی بدونی، حتماً یه سری به FA-Tools بزن.

/* Basic Reset & Font for readability – This would typically be in a main CSS file */
body {
font-family: ‘Vazirmatn’, sans-serif; /* Or any suitable Persian font */
margin: 0;
padding: 0;
box-sizing: border-box;
direction: rtl; /* For Persian text */
text-align: right;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(–background-color, #f0f2f5); /* Fallback for root variables */
color: var(–text-color, #333);
transition: background-color 0.3s ease, color 0.3s ease;
}

/* General link styling */
a {
color: #007BFF;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

/* Responsive adjustments for tables and code blocks within the content */
@media (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #dee2e6; margin-bottom: 15px; border-radius: 8px; overflow: hidden; }

td {
border: none;
border-bottom: 1px solid #dee2e6;
position: relative;
padding-right: 50%;
text-align: right;
}

td:before {
position: absolute;
top: 0;
right: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
content: attr(data-label);
background-color: #f8f9fa;
border-left: 1px solid #dee2e6;
padding: 12px 15px;
box-sizing: border-box;
}
/* Add data-label to td for proper display on small screens */
table td:nth-of-type(1):before { content: “ویژگی”; }
table td:nth-of-type(2):before { content: “متغیرهای CSS (CSS Variables)”; }
table td:nth-of-type(3):before { content: “متغیرهای SASS/LESS یا روش سنتی”; }

.infographic-item {
flex: 1 1 100%; /* Stack items on small screens */
}

pre {
white-space: pre-wrap; /* Allows long lines to wrap in code blocks */
word-wrap: break-word;
}
}

@media (min-width: 769px) {
/* Ensure table headers are visible on larger screens */
table th {
display: table-cell;
}
table td:before {
display: none;
}
}

/* Styles for the infobox items to ensure proper flex behavior for responsiveness */
.infographic > div {
flex: 1 1 calc(33% – 20px); /* Adjust for 3 columns, accounting for gap */
box-sizing: border-box;
}
@media (max-width: 1024px) {
.infographic > div {
flex: 1 1 calc(50% – 20px); /* 2 columns on tablet */
}
}
@media (max-width: 600px) {
.infographic > div {
flex: 1 1 100%; /* 1 column on mobile */
}
}

“`

ترفندهای استفاده از متغیرهای CSS (CSS Variables) برای مدیریت تم‌های دارک‌مود

امروزه پشتیبانی از حالت تاریک یا همان دارک‌مود (Dark Mode) دیگر یک ویژگه لوکس و تفننی نیست؛ بلکه به یکی از استانداردهای اصلی تجربه کاربری (UX) تبدیل شده است. کاربران انتظار دارند که وب‌سایت شما با تنظیمات سیستم‌عامل آن‌ها هماهنگ باشد یا حداقل گزینه‌ای برای سوئیچ دستی بین حالت روشن و تاریک ارائه دهد. در گذشته، پیاده‌سازی این قابلیت نیاز به نوشتن کدهای طولانی CSS و کلاس‌های متعدد داشت. اما با ورود متغیرهای CSS (Custom Properties)، همه‌چیز تغییر کرد. در این مقاله جامع، قرار است یاد بگیریم چطور با استفاده از قدرت متغیرهای CSS، یک سیستم تم‌دهی فوق‌العاده تمیز، بهینه و منعطف پیاده کنیم.

چرا متغیرهای CSS بهترین انتخاب برای دارک‌مود هستند؟

تا قبل از معرفی متغیرهای CSS، برای تغییر تم ناچار بودیم کدهایی بنویسیم که تمام استایل‌ها را بازنویسی می‌کردند. این روش نه‌تنها حجم فایل‌های CSS را به شدت افزایش می‌داد، بلکه نگهداری و توسعه کد را هم سخت می‌کرد. اما متغیرهای CSS این مشکل را حل کرده‌اند. شما کدهای رنگ را یک‌بار تعریف می‌کنید و در بخش‌های مختلف وب‌سایت از آن‌ها بهره می‌برید. در نتیجه، برای تغییر تم کل سایت، فقط کافی است مقدار چند متغیر را تغییر دهید!

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

راهنمای گام‌به‌گام پیاده‌سازی دارک‌مود پایه‌ای

بیایید کار را با یک مثال واقعی شروع کنیم. در این بخش، یک ساختار پایه‌ای با استفاده از ویژگی ترجیحات رنگی سیستم‌عامل کاربر (Media Query) پیاده می‌کنیم.

گام اول: تعریف متغیرها در سطح روت (Root)

ابتدا متغیرهای رنگی را در حالت لایت‌مود (روشن) مشخص می‌کنیم. این کار معمولاً روی سلکتور :root انجام می‌شود:

:root {
  --bg-color: #ffffff;
  --text-color: #1e293b;
  --accent-color: #4f46e5;
  --card-bg: #f8fafc;
}

گام دوم: اعمال متغیرها روی عناصر صفحه

حالا به جای اینکه از رنگ‌های هاردکد شده (سفت و سخت) استفاده کنیم، متغیرها را به تگ‌ها اختصاص می‌دهیم:

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
  background-color: var(--card-bg);
  border: 1px solid rgba(0,0,0,0.1);
}

گام سوم: تعریف تم دارک با مدیاکوئری سیستم‌عامل

با استفاده از مدیاکوئری prefers-color-scheme، به مرورگر می‌گوییم که اگر تم سیستم کاربر روی دارک بود، مقادیر متغیرها را تغییر دهد:

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #0f172a;
    --text-color: #f8fafc;
    --card-bg: #1e293b;
  }
}

تلفیق با جاوااسکریپت برای کنترل دستی کاربر

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

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

استفاده از کلاس بدنه یا اتریبیوت دیتا

به جای مدیاکوئری مستقیم، بیایید متغیرهای دارک‌مود را به یک اتریبیوت سفارشی مثل [data-theme="dark"] روی تگ html یا body متصل کنیم:

/* تم پیش‌فرض لایت */
:root {
  --bg-color: #ffffff;
  --text-color: #1e293b;
}

/* تم دارک زمانی که اتریبیوت اضافه شد */
[data-theme="dark"] {
  --bg-color: #0f172a;
  --text-color: #f8fafc;
}

کد سوئیچ تم با جاوااسکریپت

این کد ساده وضعیت تم را تغییر می‌دهد و انتخاب کاربر را در localStorage مرورگر ذخیره می‌کند تا در بازدیدهای بعدی نیز اعمال شود:

const toggleBtn = document.querySelector('#theme-toggle');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
  document.documentElement.setAttribute('data-theme', currentTheme);
}

toggleBtn.addEventListener('click', () => {
  let theme = document.documentElement.getAttribute('data-theme');
  if (theme === 'dark') {
    document.documentElement.setAttribute('data-theme', 'light');
    localStorage.setItem('theme', 'light');
  } else {
    document.documentElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme', 'dark');
  }
});

ترفندهای پیشرفته برای بهینه‌سازی تم‌ها

حالا که اصول پایه را بلد شدید، نوبت به ترفندهای حرفه‌ای می‌رسد که تمایز یک پروژه معمولی را با یک وب‌سایت در کلاس جهانی نشان می‌دهد.

ترفند ۱: مدیریت تصاویر و آیکون‌ها در حالت تاریک

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

[data-theme="dark"] img {
  filter: opacity(0.85) contrast(1.1);
}

ترفند ۲: ترکیب رنگ‌های HSL برای ایجاد تم‌های منعطف

استفاده از سیستم رنگی HSL به همراه متغیرهای CSS به شما این امکان را می‌دهد تا به راحتی شفافیت رنگ را تغییر دهید یا سایه‌های داینامیک بسازید:

:root {
  --primary-hue: 240;
  --primary-saturation: 100%;
  --primary-lightness: 50%;
  
  --primary-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
  --primary-color-alpha: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 0.1);
}

ترفند ۳: جلوگیری از پرش ترنزیشن هنگام بارگذاری صفحه

گاهی اوقات وقتی صفحه لود می‌شود، افکت Transition باعث ایجاد یک افکت ناخوشایند رنگی در چند ثانیه اول می‌شود. برای حل این مشکل، کلاس موقت زیر را به کار ببرید:

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

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

مقایسه روش سنتی با روش متغیرهای CSS

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

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

عیب‌یابی سریع و رفع مشکلات رایج

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

سوالات متداول (FAQ)

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